Project

accessibility-checker-engine

Description

Accessibility-checker currently has code that requires apps and libraries to set tabindex=0 on scrollable nodes without interactive content. The error message is

Scrollable element <div> with non-interactive content is not tabbable

I suggest to remove it.

Historically, the tabindex=0 was necessary for keyboard users to be able to scroll. But setting a tabindex is no longer as important as it used to be:

• Firefox: scrollable nodes without interactive content have always been tab-navigable, even without a tabindex.
• Chrome recently implemented this too, in Chrome 132.
• The latest Edge supports it too, presumably thanks to Chrome's update.
• Safari on Mac doesn't support it, but we don't really support accessibility on Safari. See https://pages.github.ibm.com/IBMa/able/Test/verify/#macos-support, which essentially says that we don’t support accessibility on MacOS itself (and by corollary, we don’t support Mac OS Safari). At least, we don't support VoiceOver. Plus, Safari's default settings don't let the user tab to anything except inputs.

Additional reasons to remove it include:

• SonarQube complains when you set a tabindex on a non-interactive node, so this accessibility-checker rule puts app developers between a rock and a hard place.
• Likewise with ESLint.
• Some Carbon components (ex: SidePanel, Tearsheet) hardcode tabindex to -1, creating headaches for users running accessibility scans
• Some Carbon components have complicated code involving MutationObserver to toggle tabIndex between 0 and -1, depending on whether interactive content was dynamically added or removed. Besides being a potential CPU drain, it doesn't seem to work. See https://react.carbondesignsystem.com/?path=/story/components-tabs--contained. All the tab panels have tabindex=-1.
• Likewise, you also need a resize listener to tell if a node is really scrollable or not. It may change when users resize their browsers or rotate their mobile devices.

See also carbon-design-system/ibm-products#7043 (comment).