Make it possible to disable ariaHideOutside with ComboBox
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
When navigating with screen readers in the ComboBox, all content around it is hidden for screen readers. This way, the only way one can move to the next element is by using the dismiss button, which can be a bit cumbersome for users.
### 🤔 Expected Behavior?
I asked for an opinion from the authority of universal design of ICT in my country (Norway), and they say:
> It is important to ensure that users can easily navigate out of the list to the next item without having to click a button, as this can improve the user experience. More specifically, there are no WCAG rules that state that it is not OK to be able to navigate to the next element as long as it does not change the context of the page, in which case a warning must be given beforehand or confirmed with a button.
> The availability of the content behind the list is not specified in the documentation as to whether it should be hidden or accessible. However, it is generally recommended to make the content behind the list accessible to screen readers by not using the aria-hidden attribute, this allows users to navigate and interact with the content as needed. Here, then, there is a difference from HTML's specification and React Aria without this necessarily being a breach of the minimum requirements for universal design.
### 😯 Current Behavior
All the content around the ComboBox is hidden by aria-hidden, and screen reader users have to use the dismiss buttons to navigate to the next element.
### 💁 Possible Solution
Add a prop which makes it possible to decide whether to use `ariaHideOutside` or not.
### 🔦 Context
I am trying to implement a user friendly and accessible ComboBox for a large group of users.
### 💻 Examples
Has also been discussed here:
https://github.com/adobe/react-spectrum/discussions/4871
We discussed that you could consider allowing users to disable the ariaHideOutside behavior if they aren't portalling the dropdown menu.
It would then be smooth if the ListBox simply closes when the next element is focused. An example of this can be seen in the "Where will you travel" part of https://ruter.no/en.
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.