ComboBox: aXe throws an error when the virtualized listbox is scrollable
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
While testing MobileComboBox variant that opens within a Tray using [ComboBox example with many items](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#sections) example, aXe throws an error when the virtualized listbox is scrollable, [Scrollable region must have keyboard access](https://dequeuniversity.com/rules/axe/4.6/scrollable-region-focusable?application=AxeChrome), because the listbox and any of its descendant option items do not have a `tabIndex`.
This relates to the following commit, which removes `tabIndex` from the listbox and descendant option items for virtualized listboxes that use `aria-activedescendant`: [Remove tabIndex from listbox and options when using virtual focus: iOS 14 moves real DOM focus even with aria-activedescendant otherwise](https://github.com/adobe/react-spectrum/pull/1176/commits/3d82fda7ab4280bc775c9d32cce39b02f7c3a1ec).
See the code comments for this behavior as well:
https://github.com/adobe/react-spectrum/blob/0f953cac84f98cdff29f2348c120ce541ebb6da8/packages/%40react-aria/selection/src/useSelectableItem.ts#L151-L164
and:
https://github.com/adobe/react-spectrum/blob/0f953cac84f98cdff29f2348c120ce541ebb6da8/packages/%40react-aria/selection/src/useSelectableCollection.ts#L390-L397
## 🤔 Expected Behavior
aXe should not throw this false positive on platforms where it is not necessary to remove the `tabIndex`.
## 😯 Current Behavior
aXe throws an error when the virtualized listbox is scrollable, [Scrollable region must have keyboard access](https://dequeuniversity.com/rules/axe/4.6/scrollable-region-focusable?application=AxeChrome), because the listbox and any of its descendant option items do not have a `tabIndex`.
## 💁 Possible Solution
We might be able to safely remove the `tabIndex` attributes for a virtualized listbox only on mobile devices.
## 🔦 Context
Accessibility audit
## 🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | [@adobe/react-spectrum@3.24.1](https://github.com/adobe/react-spectrum/releases/tag/%40adobe%2Freact-spectrum%403.24.1)
| Browser | Google Chrome Version 110.0.5481.77 (Official Build) (arm64)
| Operating System | macOS Ventura 13.2.1 (22D68)
## 🧢 Your Company/Team
Adobe/Accessibility
## 🕷 Tracking Issue (optional)
A11Y-5821
Contributor guide
Assessment
This issue has not been assessed yet.