adobe / adobe/react-spectrum

Make it possible to disable ariaHideOutside with ComboBox

Open
#4,937 9 comments 0 reactions 0 assignees View on GitHub
accessibility enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.