Skip to content

fix(material/list): fix selection-list staying in tab order when disabled #25735

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.

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

Merged
merged 1 commit into from
Oct 12, 2022

Conversation

zarend
Copy link
Contributor

@zarend zarend commented Sep 30, 2022

Remove list options from the tab order when the entire slection list is disabled. Fix accessibility issue where end user can tab to a disabled selection list.

<mat-selection-list disabled>
  <mat-list-option>A</mat-list-option>
  <!-- ^ should have tabindex="-1" since entire list is disabled -->
</mat-selection-list>

Approach is to consider a disabled mat-selection-list with a mat-list-option having tabindex="0" an invalid state. When disabled Input on the seleciton list is set to true, set tabindex to -1 on every list option.

@zarend zarend added Accessibility This issue is related to accessibility (a11y) target: minor This PR is targeted for the next minor release area: material/list labels Sep 30, 2022
@zarend zarend force-pushed the disabled-list branch 2 times, most recently from 55edfbd to 39a2901 Compare September 30, 2022 21:23
@zarend zarend force-pushed the disabled-list branch 3 times, most recently from 09b26ab to b8baf4d Compare October 6, 2022 18:48
@zarend zarend requested a review from mmalerba October 6, 2022 18:50
@zarend
Copy link
Contributor Author

zarend commented Oct 6, 2022

responded to comments, and this is ready for review again 👀

Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Oct 7, 2022
…bled

Remove list options from the tab order when the entire slection list is
disabled. Fix accessibility issue where end user can tab to a disabled selection
list.

```
<mat-selection-list disabled>
  <mat-list-option>A</mat-list-option>
  <!-- ^ should have tabindex="-1" since entire list is disabled -->
</mat-selection-list>
```

Approach is to consider a disabled mat-selection-list with a mat-list-option
having `tabindex="0"` an invalid state. When disabled Input on the seleciton
list is set to true, set tabindex to -1 on every list option.

fixes angular#25730
@zarend zarend merged commit 6ed06a7 into angular:main Oct 12, 2022
@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 Nov 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker area: material/list target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants