adobe / adobe/react-spectrum

Firefox now adds tab stops for scrollable elements

Open
#3,633 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

In recent Firefox versions, any overflow: auto element is tabbable by default, and renders a default focus ring. This was fixed for TableView in https://github.com/adobe/react-spectrum/pull/3520 but it affects other components as well. For example in DatePicker:

Screen Shot 2022-10-07 at 4 26 53 PM

## 🤔 Expected Behavior

Elements with scrolling shouldn't necessarily be tabbable.

## 😯 Current Behavior

Some elements are now tabbable that shouldn't be.

## 💁 Possible Solution

Go through all the components with scrolling in Firefox and verify that there aren't extra tab stops. Add `tabIndex={-1}` to override and verify that this doesn't cause other issues (e.g. with screen readers?).

## 🧢 Your Company/Team

RSP

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.