Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(material/radio): set tabindex based on selected state #18081

Merged
merged 1 commit into from
Mar 27, 2022
Merged

fix(material/radio): set tabindex based on selected state #18081

merged 1 commit into from
Mar 27, 2022

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Jan 1, 2020

Currently all radio buttons inside a radio group have a tabindex of 0, unless they're disabled, and we leave it up to the browser to focus the proper button based on its selected state when the user is tabbing. This works for the most part, but it breaks down with something like our focus trap which determines which element to focus based on its tabindex since all buttons have the same tabindex. These changes fix the issue by setting a tabindex of 0 only on the selected radio button.

Fixes #17876.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release labels Jan 1, 2020
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 1, 2020
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from a3b2811 to 40b2cf9 Compare February 22, 2020 13:34
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from 40b2cf9 to ec11e41 Compare June 16, 2020 20:18
@carloscasal
Copy link

+1

@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from ec11e41 to f42033c Compare November 26, 2020 17:45
@crisbeto crisbeto changed the title fix(radio): set tabindex based on selected state fix(material/radio): set tabindex based on selected state Nov 26, 2020
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from f42033c to 4641c53 Compare December 6, 2020 15:56
@crisbeto crisbeto requested a review from mmalerba as a code owner December 6, 2020 15:56
jelbourn
jelbourn approved these changes Dec 7, 2020
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

I think technically only the first radio button should have tabIndex = 0 when none are selected, but the practical difference is very minor. It would only come up if someone is reverse tabbing through the page.

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Dec 7, 2020
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from 4641c53 to c8305b0 Compare June 4, 2021 18:51
@danmt danmt mentioned this pull request Aug 10, 2021
Open
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from c8305b0 to 8fc4a2a Compare August 16, 2021 20:55
@crisbeto crisbeto requested a review from a team as a code owner August 16, 2021 20:55
@devversion devversion requested review from devversion and removed request for devversion and a team August 18, 2021 12:54
@andrewseguin andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 28, 2021
@crisbeto
fix(material/radio): set tabindex based on selected state
c1d9323 
Currently all radio buttons inside a radio group have a `tabindex` of 0,
unless they're disabled, and we leave it up to the browser to focus the
proper button based on its selected state when the user is tabbing.
This works for the most part, but it breaks down with something like
our focus trap which determines which element to focus based on its
`tabindex` since all buttons have the same `tabindex`. These changes
fix the issue by setting a `tabindex` of 0 only on the selected radio button.

Fixes angular#17876.
@crisbeto crisbeto force-pushed the 17876/radio-tabindex branch from 8fc4a2a to c1d9323 Compare March 27, 2022 12:36
@crisbeto crisbeto requested a review from andrewseguin as a code owner March 27, 2022 12:36
@crisbeto crisbeto merged commit 81ff8c8 into angular:master Mar 27, 2022
crisbeto added a commit that referenced this pull request Mar 27, 2022
@crisbeto
fix(material/radio): set tabindex based on selected state (#18081)
e857777 
Currently all radio buttons inside a radio group have a `tabindex` of 0,
unless they're disabled, and we leave it up to the browser to focus the
proper button based on its selected state when the user is tabbing.
This works for the most part, but it breaks down with something like
our focus trap which determines which element to focus based on its
`tabindex` since all buttons have the same `tabindex`. These changes
fix the issue by setting a `tabindex` of 0 only on the selected radio button.

Fixes #17876.

(cherry picked from commit 81ff8c8)
@sync-by-unito sync-by-unito bot mentioned this pull request Mar 31, 2022
Closed
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Mar 31, 2022
Update angularmaterial monorepo to v13.3.2 (#1275)
fb678ba 
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.3.1` -> `13.3.2`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.3.1/13.3.2) |
| [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.3.1` -> `13.3.2`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.3.1/13.3.2) |

---

### Release Notes

<details>
<summary>angular/components</summary>

### [`v13.3.2`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1332-flannel-flamingo-2022-03-30)

[Compare Source](angular/components@13.3.1...13.3.2)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [48968719fc](angular/components@4896871) | fix | **a11y:** live announcer promise never resolved if new announcement comes in ([#&#8203;24700](angular/components#24700)) |
| [e9734a9c66](angular/components@e9734a9) | fix | **testing:** entering negative number values not working with reactive forms ([#&#8203;24656](angular/components#24656)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [c677f11ed8](angular/components@c677f11) | fix | **button-toggle:** ripples not clipping correctly in safari ([#&#8203;12311](angular/components#12311)) |
| [20af3e7c9d](angular/components@20af3e7) | fix | **chips:** ripple not clipped on safari ([#&#8203;21495](angular/components#21495)) |
| [d04e7c9b69](angular/components@d04e7c9) | fix | **core:** unable to override tag selectors inside .mat-typography ([#&#8203;14617](angular/components#14617)) |
| [9490a31641](angular/components@9490a31) | fix | **list:** not working correctly when list item is used as a button ([#&#8203;13617](angular/components#13617)) |
| [b07ae4ccc4](angular/components@b07ae4c) | fix | **menu:** clicks on disabled item closing the menu ([#&#8203;19183](angular/components#19183)) |
| [e85777712a](angular/components@e857777) | fix | **radio:** set tabindex based on selected state ([#&#8203;18081](angular/components#18081)) |
| [7f274dc96f](angular/components@7f274dc) | fix | **snack-bar:** ensure that the snack bar always runs inside the NgZone ([#&#8203;24611](angular/components#24611)) |
| [a5aa87502b](angular/components@a5aa875) | fix | **tabs:** focus wrapping back to selected label when using shift + tab ([#&#8203;14194](angular/components#14194)) |
| [04f4937b75](angular/components@04f4937) | fix | **tabs:** update tab state when active tab is swapped out ([#&#8203;24164](angular/components#24164)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [a704913d2b](angular/components@a704913) | fix | **mdc-button:** extended fab touch target not covering entire button ([#&#8203;24322](angular/components#24322)) |
| [23e7b8e6c1](angular/components@23e7b8e) | fix | **mdc-chips:** make it easier to customize chip typography ([#&#8203;24632](angular/components#24632)) |
| [518022288b](angular/components@5180222) | fix | **mdc-chips:** Mirror aria-describedby to matChipInput ([#&#8203;24551](angular/components#24551)) |
| [9497b02f8b](angular/components@9497b02) | fix | **mdc-slider:** update layout when container resizes ([#&#8203;24648](angular/components#24648)) |
| [e5c025dff4](angular/components@e5c025d) | fix | **mdc-slider:** use passive event listeners ([#&#8203;24675](angular/components#24675)) |

#### Special Thanks

Artur Androsovych, ByzantineFailure, David Gonzalez, Dilyorbek, Kristiyan Kostadinov, Naveen, Paul Gschwendtner, Raí Siqueira, Shivam Sethi, Wagner Maciel and Zach Arend

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1275
Reviewed-by: 6543 <6543@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
forsti0506 pushed a commit to forsti0506/components that referenced this pull request Apr 3, 2022
@crisbeto @forsti0506
fix(material/radio): set tabindex based on selected state (angular#18081
1277c5a 
)

Currently all radio buttons inside a radio group have a `tabindex` of 0,
unless they're disabled, and we leave it up to the browser to focus the
proper button based on its selected state when the user is tabbing.
This works for the most part, but it breaks down with something like
our focus trap which determines which element to focus based on its
`tabindex` since all buttons have the same `tabindex`. These changes
fix the issue by setting a `tabindex` of 0 only on the selected radio button.

Fixes angular#17876.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn jelbourn approved these changes

@mmalerba mmalerba Awaiting requested review from mmalerba

@andrewseguin andrewseguin Awaiting requested review from andrewseguin

Assignees

@jelbourn jelbourn

Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Focus issue for radio group as first element in dialog
5 participants
@crisbeto @carloscasal @jelbourn @googlebot @andrewseguin