adobe / adobe/react-spectrum

Checkbox focus ring disappears when toggling the checkbox via SPACE with NVDA enabled

Open
#2,196 1 comment 1 reaction 0 assignees View on GitHub
accessibility bug Checkbox
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

The focus ring disappears from the checkbox if the user toggles selection via space when NVDA is enabled. This happens for our React Spectrum Checkbox and for the example in the react aria docs (https://react-spectrum.adobe.com/react-aria/useCheckbox.html#styling). Perhaps is a `useFocusRing`/`useFocusVisible` issue?

## 🤔 Expected Behavior

Focus ring shouldn't disappear from the checkbox when toggling selection

## 😯 Current Behavior

Focus ring disappears from the checkbox when toggling selection when NVDA is enabled

## 💁 Possible Solution

Still digging, might be something in `useFocusRing`/`useFocusVisible`

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3.12
| Browser |. Chrome
| Operating System |. Windows 11

## 🧢 Your Company/Team

RSP

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the React Spectrum Checkbox and the React Aria useCheckbox example in Chrome on Windows with NVDA enabled. Then inspect the useFocusRing and useFocusVisible entry points; done means the checkbox focus ring remains visible after toggling with SPACE.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.