Select/Popup Component - Dismiss Buttons

[vmoralesbeltran-collab]

I noticed Select/Popover renders hidden DismissButtons before and after overlay content. Could someone please explain in which use cases those buttons are needed/useful? For a Select popup usually there are no Dismiss button because:
• it creates an additional Tab stop for screenreader users,
• it is not part of the expected select interaction pattern,
• users already have Escape and outside-click dismissal,
• selecting an option already closes the popup automatically.

[snowystinger]

it creates an additional Tab stop for screenreader users

Usually some element or item inside is autofocused, so most users would never come across it unless they hit the beginning or end, in which case, then they know that's the beginning or end and there's an easy way out right there

it is not part of the expected select interaction pattern

Correct, it was added as a helper after discussion with our accessibility team.

users already have Escape and outside-click dismissal

A screen reader user on a touch device may not be able to exit any other way

selecting an option already closes the popup automatically.

As you mentioned, Esc can close it or tapping outside can close it without selecting, so this is an affordance to screen reader users to close without selecting as well

[vmoralesbeltran-collab]

Thank you so much for the quick reply. This leaves me just with one single question. Going forward, is there any documentation or page that explains what has been added to a specific component for accessibility reasons?

[snowystinger]

Not really, that'd be a pretty major and ever changing target. We wrote a three part blog post just about button differences across browsers and all the things we do to normalise all of that.

This particular feature is mentioned on our home page with a little video that shows it in action.
https://react-aria.adobe.com/

Mobile ready.
All behaviors work without a keyboard, ensuring touch screen reader users have full access. Additional features such as hidden dismiss buttons in dialogs enable a great experience for mobile users.

[vmoralesbeltran-collab]

Perfect! Thanks again for the swift answer!