Menu-based Select Widget Implementation Example with Expandable Groups


A link that doesn't go anywhere and a after the widget, as anchors 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.

Summary: This select-like widget is based on a menu pattern, where the expandable items are menu items and the selectable items are at root level or within groups named by expandable menu items and are role of menuitemcheckbox. The expandable menu items cannot be buttons with a role of menuitem because VoiceOver Mac reports buttons within this compound widget as “interactive” and announces intstructions for interaction that break the widgets behavior. Implementations must use div or span as the element, in this widget in order to avoid this.

See the same general widget but with statically open (non-collapsable) groups.

Note: Only the first sub-group of menu items is using aria-describedby to signal group affiliation. The other groups are related in code only by the fact that they appear inside of a role=group. We are doing this in order to determine in testing if the aria-describedby association is needed — the group container should be enough to signal affiliation within AT.

Note: If this widget were used along with a dynamic search, an appropriate aria-live announcement of number of results returned would be something like “X selectable items, in Y groups.” The calculation of this should be easy, since only the items with role of menuitemcheckbox are selectable/checkable and determining group number would be a simple DOM query.