How to control Tree Style Tab via speech recognition

Tree Style Tab 3.7.5 and later provides some accessibility information for its sidebar. They should help you to navigate TST's UI via speech recognition software like Dragon.

This document aims to provide some hints to customize TST for such a usecase. Contents of this page is based on discussions in the issue #2864.

Make tabs and in-tab buttons more easily clickable via speech recognition

TST's tabs are treated as multiply selectable list options, and a tab contains some UI elements with button role:

• Tab label: a target just for clicking the tab itself. It is same to the title of the page.
• Twisty: a toggler of collapsed/expanded state. It is labeled as "collapse this tree" or "expand this tree".
• Sound button: a toggler of muted state. It is labeled as "mute tab" or "unmute tab".
• Close button: a button to close the tab or its descendants. It is labeled as "close this tab" or "close this tree".

Speech recognition software may let you to click those buttons with saying their name, but sometimes it is hard if there are too many tabs. Instead you can give more short name for each tab and buttons based on their visual position. Here is an example user CSS (copy them and paste to TST's options => "Advanced" => "Extra style rules for contents provided by Tree Style Tab"):

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
tab-item:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
tab-item:not(.collapsed) {
  counter-increment: vtabs tabs;
}
tab-item:not(.discarded) {
  counter-increment: atabs tabs;
}
tab-item {
  counter-increment: tabs;
}

tab-item,
tab-label,
tab-twisty,
tab-closebox,
tab-sound-button {
  -moz-user-focus: normal !important;
}

tab-item:not(.faviconized) .extra-items-container.front::after,
tab-item.faviconized tab-favicon::after {
  content: counter(vtabs);
  background: Highlight;
  bottom: 0.2em;
  color: HighlightText;
  font-size: x-small;
  right: 0;
  padding: 0.2em;
  pointer-events: auto;
  position: absolute;
  user-select:text;
  -moz-user-focus: normal;
  z-index: 1000;
}

tab-label::after,
tab-twisty::after,
tab-sound-button::before,
tab-closebox::before {
  max-height: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: auto;
  position: absolute;
  user-select:text;
  -moz-user-focus: normal;
}

tab-label::after {
  content: "Tab " counter(vtabs);
}

tab-twisty::after {
  content: "V" counter(vtabs);
}

tab-sound-button::after {
  content: "M" counter(vtabs);
}

tab-closebox::after {
  content: "X" counter(vtabs);
}

With this CSS, a small tooltip will appear in each tab to indicate their position. For example, if you want to control a tab in the position "12", you can use these short names:

• "Tab 12": focus to the 12th tab directly.
• "V12": toggle collapsed/expanded state of the 12th tab directly.
• "M12": toggle muted state of the 12th tab directly.
• "X12": close the 12th tab directly.