adobe / adobe/react-spectrum

ComboBox: aXe throws an error when the virtualized listbox is scrollable

Open
#4,080 0 comments 0 reactions 1 assignee Claimed by @majornista View on GitHub
accessibility bug ComboBox
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

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.