angular / angular/components

Focus trap focuses the wrong radio button if native radio button group is the first element in modal

Open
#22,878 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/a11y P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

If the first focus-able element in a modal is a group of (native element, **not** Material) radio buttons, and one tabs off the end of the modal (triggering the focus trap and returning the focus to the top of the modal), the first radio button is always focused, even if the selected radio button is one of the later ones.

The expected behavior—found when tabbing to a group of radio buttons in other cases—is for focus to go to the selected radio button.

For now, our workaround is just to ensure there is always some other focus-able element at the top of the modal. A close button works well for this.

I could not find any issues relating to this.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with a modal whose first focusable content is a native radio-button group, then tab off the modal to trigger the focus trap. Trace the modal focus-trap behavior and radio-group focus handling; done means focus returns to the selected radio button rather than the first button.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.