Basic secondary actions test page

This example is not yet a usability study, it contains trees and tabs with secondary actions and basic support testing results.

Versions tested:

Trees

Plain tree

Just a normal tree to set a baseline of support

Tree with buttons inside treeitems

Tree with buttons adjacent to treeitems

Results

Screen reader/Browser Baseline: virtual cursor Baseline: app mode Nested: virtual cursor Nested: tabbing Adjacent: virtual cursor Adjacent: tabbing Notes
JAWS/Chrome Pass Pass Fail Fail Fail Fail (Note): someone else reported that JAWS 2021 handled the secondary buttons OK when tabbing. I don't have 2021 yet, so another tester would be appreciated (/Note). All tree interactions worked as expected, but secondary buttons did not announce name and role in either case. VPC didn't find them, and tab announced them as if they were one level down and had no name or role.
JAWS/Firefox Pass Pass Fail Fail Fail Fail Same as JAWS/Chrome
NVDA/Chrome Fail Pass N/A Pass N/A Pass Auto switches to browse mode when tabbing to buttons in both examples. Both work OK otherwise. Browse mode only interacts with first item + descendants in all trees.
NVDA/Firefox Fail Pass N/A Pass N/A Pass Same as chrome/td>
Narrator/Edge Pass Pass Pass Pass Pass Pass Auto-mode switching is buggy for unrelated reasons, so couldn't be tested. Tabbing works as expected in both examples.
VoiceOver/macOS Safari Fail Fail N/A N/A N/A N/A VoiceOver on macOS does not recognize or handle trees with cursor navigation or tabbing. Tabbing exposes names, but incorrect roles and no state info. All trees work equally well with tabbing (that is, it isn't the buttons that are the issue).
VoiceOver/iOS Safari Partial N/A Pass N/A Pass N/A Didn't test iPhone + keyboard; Base tree works OK, but doesn't include level/index info. Buttons in both examples work OK, though adjacent buttons include the expand/collapse information of their parent.
Talkback/Chrome Pass N/A Pass N/A Pass N/A Didn't test android + keyboard; baseline tree also doesn't include level/index info, focus does not follow cursor. Buttons were reachable and worked in both examples.

Tabs

Plain tabs

some example html content
some example CSS content
some example JSON content

Closeable tabs with nested buttons

some example html content
some example CSS content
some example JSON content

Closeable tabs with adjacent buttons

some example html content
some example CSS content
some example JSON content

Results

Screen reader/Browser Baseline: virtual cursor Baseline: app mode Nested: virtual cursor Nested: tabbing Adjacent: virtual cursor Adjacent: tabbing Notes
JAWS/Chrome Pass Pass Fail Fail Pass Pass Tabbing to a nested button reads it as the parent tab, and passes events to the parent tab (even though it works without JAWS). Tabbing to an adjacent button auto-switches to VPC (if enabled), but otherwise works.
JAWS/Firefox Pass Pass Fail Fail Pass Pass Same as JAWS/Chrome
NVDA/Chrome Pass Pass Fail Pass Pass Pass Mode auto-switches to browse for adjacent buttons, but not for nested buttons. Tabbing works for both.
NVDA/Firefox Pass Pass Fail Pass Pass Pass Same as Chrome
Narrator/Edge Pass Pass Pass Pass Pass Pass Auto-mode switching is buggy for unrelated reasons, so couldn't be tested. Tabbing works as expected in both examples.
VoiceOver/macOS Safari Pass Pass Fail Fail Pass Pass Neither tabbing nor cursor works for nested buttons, but both work for adjacent buttons.
VoiceOver/iOS Safari Pass N/A Fail N/A Pass N/A Nested buttons interfered with basic tab functionality (they weren't separately reachable, and double tab triggered nested button instead of tab). Adjacent buttons worked OK.
Talkback/Chrome Pass N/A Pass N/A Pass N/A Both nested and adjacent buttons worked as expected.

Listboxes

Normal listbox

Listbox with nested buttons

Listbox with buttons adjacent to options

Results

Screen reader/Browser Baseline: virtual cursor Baseline: app mode Nested: virtual cursor Nested: tabbing Adjacent: virtual cursor Adjacent: tabbing Notes
JAWS/Chrome Pass Pass Fail Pass Fail Pass Supports grouping, works surprisingly well tabbing both nested and adjacent buttons. No issues with mode switching or accname. VPC does not find close button in either example (not surprising since it surfaces the listbox as a whole).
JAWS/Firefox Pass Pass Fail Pass Fail Pass Same as Chrome
NVDA/Chrome Fail Pass N/A Pass N/A Pass Supports grouping, but browse mode only navigates first group for all examples. Mode auto-switches when tabbing to the button in both examples. Otherwise both work as expected.
NVDA/Firefox Fail Pass N/A Pass N/A Pass Same as Chrome.
Narrator/Edge Partial Pass Pass Pass Pass Pass Groups supported. Narrator doesn't navigate to listboxes with the form field shortcut. Otherwise scan mode reaches all buttons. Tabbing works as expected.
VoiceOver/macOS Safari Fail Fail Fail Fail Partial Partial Something about the markup of this listbox, or VoiceOver + listboxes in general didn't work. Listbox options were not read, independent of the buttons. Nested buttons were completely unreachable, though adjacent buttons were reachable and read correctly using both quicknav and tabbing.
VoiceOver/iOS Safari Partial N/A Fail N/A Pass N/A VO on iOS doesn't recognize a basic listbox as a form control w/ quick nav, but otherwise works OK. Nested buttons are unreachable, but don't interfere with listbox functionality. Adjacent buttons work.
Talkback/Chrome Pass-ish N/A Pass N/A Pass N/A Basic example reads incorrect index/total info (perhaps b/c of groups, which are not otherwise supported). Buttons in both examples are reachable and work as expected.