Bug reportOct 17, 2026· 0:25· 11 views
React Aria Select: clicking the label focuses the button but the focus ring never appears
0:25 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumaccessibility/focus-management
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Navigate to the React Aria Select documentation page.
- 2.Click directly on the 'Favorite Animal' label element.
- 3.Observe the visual outline and focus state of the Select trigger button.
- 4.Press Tab to compare behavior (Control: focusing the button via keyboard renders the purple focus ring).
- 5.Click the 'Favorite Animal' label again while the button is focused.
Expected
Clicking the label should focus the select control and display the appropriate visible focus indicator (`data-focus-visible="true"` or equivalent focus ring styling) for user feedback.
Actual
Clicking the label focuses the button programmatically (keyboard arrows work to open the menu), but fails to display the focus ring (`data-focus-visible = false`). Clicking the label while focused actively dismisses the focus ring.
Evidence
visualAt 7.0s and 9.0s, following the label click at 5.8s, the Select trigger button displays no outline, with state overlay showing 'data-focused = false' and 'data-focus-visible = false <- missing'.
visualAt 11.3s - 13.0s, pressing ArrowDown immediately opens the dropdown menu ('Aardvark', 'Cat', etc.), confirming the trigger button had received DOM focus despite lacking the focus ring.
visualControl case at 17.0s - 19.0s: Pressing Tab focuses the button with a visible purple ring, and overlay confirms 'data-focus-visible = true <- ring shows'.
visualAt 21.0s - 23.0s, clicking the label again immediately removes the focus ring and resets 'data-focus-visible = false'.
Issue markdown (copy-paste ready)
### Summary Clicking a Select component's `<label>` places keyboard focus onto the trigger button, but does not display a visible focus ring or mark the focus visible state. ### Steps to Reproduce 1. Go to the React Aria `Select` documentation page (`/Select`). 2. Click the 'Favorite Animal' `<label>` element above the select button at [5.8s]. 3. Notice no focus ring appears around the button. 4. Press `ArrowDown` at [11.3s] to confirm the select button holds programmatic focus. 5. Press `Tab` at [16.8s] (control case) and observe that keyboard navigation properly renders the purple focus ring and sets `data-focus-visible="true"`. 6. Click the 'Favorite Animal' label again at [20.4s]. ### Expected Result Clicking the label should indicate focus on the associated input control with a visible focus ring or clear focused state. ### Actual Result The button receives underlying focus (allowing immediate keyboard interaction), but `data-focus-visible` remains `false` and no ring is rendered. Clicking the label while the button is focused actively strips the focus ring. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →