Brief Note on Dismissing Selects and Listboxen

Native controls can be different from their roled-up ARIA equivalents in a variety of ways. For example, an expanded native HTML <select> on mobile behaves differently when the dismiss gesture is used than when the same gesture is used with an expanded ARIA listbox.

Using Android with TalkBack, a down-then-left gesture closes the <select>. Using the same gesture with a custom ARIA listbox does not collapse the control; instead it moves back to the previous page.

Turn off TalkBack, and the swipe-left gesture will close the <select>, but with listbox it moves you back to the previous page.

Essentially the left-swipe gesture, or the down-then-left with TalkBack running, which mimics the platform generic Back button, does not work on Google’s Angular <mat-select>. You can see this in other custom listboxes (such as APG’s combobox pattern), but the Angular page offered an easy side-by-each comparison.

I repeated this with iPadOS and VoiceOver.

The VoiceOver two-finger right-left-right gesture closes a native <select>. On a listbox, the same gesture moves you back in the browser history.

A TalkBack and VoiceOver user hears a slightly different announcement for each control, so they may understand to change their interactions. A sighted user relying on the visual affordance of the controls may not realize the controls are effectively different.

From experience with testing with users, once you start to mix controls — essentially dropping a listbox on the same page as a <select> — this becomes more than an annoyance.

If you choose a custom listbox over a <select> strictly for styling reasons, you can style the heck out of a <select> already. If you resist because you want to style the list of options, ask yourself if your branding is more important than the consistent interface of the arguably more usable native version (larger text, larger hit areas, adapts to preferences).

Other Disparities

There are many other cases where the ARIA equivalent of a control does not match the native platform equivalent, whether by interaction, exposure, visual styles, or something else. I have documented some here:

• Brief Note on Buttons, Enter, and Space, identifying keyup and keydown differences, which should be accounted for in a custom button.
• WHCM and System Colors, noting the differences in border and text colors between native and custom controls when in Windows High Contrast Mode.
• Use Legend and Fieldset, which points out bugs in Apple’s implementation of ARIA control grouping.
• Disclosure Widgets, a case where support came so late that the ARIA version may be a better experience for Android and iOS users.

To Recap

Native controls and their ARIA equivalents sometimes behave differently. Understand that and make sure to account for it (ideally by testing). Try not to mix the native and ARIA version of a control within a page, flow, or maybe even site.

Update: 7 August 2022

Simon Flack noted that Google has proposed a close watcher API through the WICG (so not standards track) may allow authors to support the gesture — if they know about it and why they should. Also, only for Chrome.

Simon also logged the dismiss gesture problem with Chromium for dialogs back in April: Issue 1319915: Talkback “Back” gesture does not trigger <dialog> `close` event.