Menu-based Select Widget Implementation Example with Statically Open Groups

A link that doesn't go anywhere, after the widget, as an anchor to test tabbing through or out of the widget.

Testing Results and Commentary

Note on Windows High Contrast Mode (HC): To make selections more visually distinct when HC is enabled, an underline displays. We ensure icon visibility by setting forced-color-adjust: auto in the SVG style attribute and setting the property fill='currentColor' on the path.

Environment: Testing conducted June, 2022. All technologies evaluated at most recently released versions.

• NVDA + Firefox: Cardinality is reported for root menu items and separately for each grouping. The screen reader reports moving into groupings by announcing the name of the group. Checked and not checked are announced accurately. Announces the name and role of the menu when it is opened. Trigger button is announced as collapsed and having a sub-menu, as expected. The aria-describedby assocations are announced but not strictly necessary, since groupings are announced.
• Narrator + Edge: As in other instances, the widget works best if screen reader's “scan” mode is off. Cardinality announces out of the total menu items, not separately by level/grouping. Groups announce when moved into, so aria-describedby associations are not strictly necessary. Items announce as menu checkboxes with a checked or unchecked state.
• JAWS + Chrome: Announces “[name] button menu” but does not announced collapsed or expanded state. Cardinality includes all of the menu items, regardless of nesting. Groupings are not announced, so the aria-describedby technique for group affiliations is probably warranted. Items are announced by the text contents and checked or not checked. No issues with navigation. When entering the menu, the screen reader announces the menu's name and role and provides accurate instructions for navigating the contents.
• Android Talkback + Chrome: Lack of cardinality and announcement of grouping means that aria-describedby associations within the groups are advised. Other behaviors are as expected. Announces “in menu [name of menu]” when entering the expanded menu. The trigger is announced as a collapsed/expanded “menu pop-up.”
• iOS VoiceOver + Safari: Announces “[name] pop-up button, menu pop up, [button content], double-tap to activate the picker.” No cardinality or group affiliation is announced, so aria-describedby association is recommened for items within groups. Items announce as menu items that are checked or not checked, as expected. At time of testing, VoiceOver was sometimes not focusing items within the menu when trigger button was tapped. This behavior did not occur with the tree or listbox implementations, which have most of the same code. So that behavior seems particular to items in a menu. This behavior was also not consistently reproducable/flakey.
• Mac VoiceOver + Safari: VoiceOver announces cardinality but it incorrectly calculates the total number of items. Unfortunately, as seen in other examples, using the aria-posinset and aria-setsize attributes are not consistently reported/supported. So there does not seem to be an adequate means for overriding the browser's/screen reader's misreporting. Otherwise, reporting is consistent with what we experience in the menu item-based implementation with expanding groups. VoiceOver tends to read group affiliation multiple times, but more reporting is probably better than no reporting — and cannot be controlled for, in any case.