fix(material/list): add opt-out for radio indicators #26283

zarend · 2022-12-16T16:40:12Z

Add an opt-out for radio indicators for single-selection. Adds both an Input and DI token to specify if radio indicators are hidden. By default, display radio indicators. If both DI token and Input are specified, the Input wins.

PR #25933 added radio toggles for single-selection. Add an opt-out to provide a way to have same appearance as before #25933.

API changes

add @Input hideSingleSelectionIndicator to specify if radio indicators are displayed
add MAT_LIST_CONFIG token to specify default value for hideSingleSelectionIndicator

Add an opt-out for radio indicators for single-selection. Adds both an Input and DI token to specify if radio indicators are hidden. By default, display radio indicators. If both DI token and Input are specified, the Input wins. PR angular#25933 added radio toggles for single-selection. Add an opt-out to provide a way to have same appearance as before angular#25933. API changes - add `@Input hideSingleSelectionIndicator` to specify if radio indicators are displayed - add MAT_LIST_CONFIG token to specify default value for `hideSingleSelectionIndicator`

crisbeto

LGTM

jelbourn

LGTM

jelbourn · 2022-12-19T19:24:10Z

src/material/list/_interactive-list-theme.scss

@@ -19,5 +21,20 @@
    &:focus::before {
      opacity: mdc-ripple.states-opacity($active-base-color, focus);
    }
+
+    &.mdc-list-item--selected {


Are these new styles all still related to us not using MDC's ripple?

I'm not as familiar with ripple, but that's what it looks like to me. Someone more familiar with ripple might know more.

These styles where here all along. After originally adding the radio indicators in #25933, #26074 removed these styles because they were not used anymore. This PR adds them back.

Update the accessibility section on radio indicators for single-selection. Add instructions to always communicate selection with icon indicators. Fulfill documentation needs as follow-up for angular#25933 and angular#26283.

) Update the accessibility section on radio indicators for single-selection. Add instructions to always communicate selection with icon indicators. Fulfill documentation needs as follow-up for #25933 and #26283.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | minor | [`15.0.4` -> `15.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcdk/15.0.4/15.1.0) | | [@angular/material](https://github.com/angular/components) | dependencies | minor | [`15.0.4` -> `15.1.0`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/15.0.4/15.1.0) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v15.1.0`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1510-silk-sandal-2023-01-11) [Compare Source](angular/components@15.0.4...15.1.0) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [e0a74b9c2b](angular/components@e0a74b9) | feat | **menu:** Allow setting cdkMenuTriggerFor null ([#25818](angular/components#25818)) | | [b0f0b5b162](angular/components@b0f0b5b) | fix | **drag-drop:** receiving class not updated in OnPush component ([#26386](angular/components#26386)) | | [836b777526](angular/components@836b777) | fix | **menu:** don't prevent default selection key actions ([#26296](angular/components#26296)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [8554e15383](angular/components@8554e15) | feat | **datepicker:** Support drag and drop to adjust date ranges ([#25548](angular/components#25548)) | | [c370e064d4](angular/components@c370e06) | feat | **tabs:** add a harness filter for tab selected state ([#25806](angular/components#25806)) | | [44657e2624](angular/components@44657e2) | fix | **autocomplete:** apply theme of parent form field to panel ([#25983](angular/components#25983)) | | [9b1f49f6f2](angular/components@9b1f49f) | fix | **chips:** add support for aria-description ([#25935](angular/components#25935)) | | [8b19fd9e29](angular/components@8b19fd9) | fix | **chips:** change div to span ([#26343](angular/components#26343)) | | [dcf2fac042](angular/components@dcf2fac) | fix | **chips:** implement ariaDescription with aria-describedby ([#26105](angular/components#26105)) | | [e536ce0736](angular/components@e536ce0) | fix | **core:** default font family not applied to custom typography levels ([#26394](angular/components#26394)) | | [d02cc6817c](angular/components@d02cc68) | fix | **datepicker:** fix date picker shortcuts ([#25951](angular/components#25951)) | | [4da9e1944a](angular/components@4da9e19) | fix | **datepicker:** Update strategy to handle dragging across month boundaries and/or DateAdapter implementations that do not return difference in days from compareDate ([#26341](angular/components#26341)) | | [25d9217fd1](angular/components@25d9217) | fix | **list:** add opt-out for radio indicators ([#26283](angular/components#26283)) | | [57676e467a](angular/components@57676e4) | fix | **list:** add radio toggles ([#25933](angular/components#25933)) | | [5b57863702](angular/components@5b57863) | fix | **list:** align color scheme between single and multi selection list ([#26074](angular/components#26074)) | | [1819d3027b](angular/components@1819d30) | fix | **tabs:** allow focus on disabled tabs ([#26397](angular/components#26397)) | #### Special Thanks Amy Sorto, David Klingenberg, Joey Perrott, Karl Seamon, Kristiyan Kostadinov, Miles Malerba, Sasidharan SD, Wagner Maciel and Zach Arend  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - 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. --- - [ ] If you want to rebase/retry this PR, check this box --- 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/1723 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2023-01-20T00:03:47Z

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.}

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 Dec 16, 2022

zarend requested review from andrewseguin, crisbeto, devversion and mmalerba as code owners December 16, 2022 16:40

zarend force-pushed the list-opt-out branch from dbab436 to 11334df Compare December 16, 2022 17:53

crisbeto approved these changes Dec 17, 2022

View reviewed changes

mmalerba approved these changes Dec 19, 2022

View reviewed changes

jelbourn approved these changes Dec 19, 2022

View reviewed changes

zarend added the action: merge The PR is ready for merge by the caretaker label Dec 19, 2022

devversion removed their request for review December 20, 2022 10:09

zarend merged commit 25d9217 into angular:main Dec 20, 2022

zarend mentioned this pull request Jan 5, 2023

docs(material/list): update a11y documention on radio indicators #26374

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 20, 2023

zarend deleted the list-opt-out branch January 20, 2023 16:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(material/list): add opt-out for radio indicators #26283

fix(material/list): add opt-out for radio indicators #26283

zarend commented Dec 16, 2022

crisbeto left a comment

jelbourn left a comment

jelbourn Dec 19, 2022

zarend Dec 19, 2022

angular-automatic-lock-bot bot commented Jan 20, 2023

fix(material/list): add opt-out for radio indicators #26283

fix(material/list): add opt-out for radio indicators #26283

Conversation

zarend commented Dec 16, 2022

crisbeto left a comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

jelbourn Dec 19, 2022

Choose a reason for hiding this comment

zarend Dec 19, 2022

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Jan 20, 2023