fix(material/radio): not checked on first click if partially visible #19505

crisbeto · 2020-06-02T04:58:40Z

Currently the native input inside the radio button is collapsed down to 1px by 1px and moved to the bottom of the element which causes browsers to scroll the window down, rather than change the value, on the first click when the input is partially hidden. These changes fix the issue by having the input cover the entire button and hiding it with opacity. From my testing, using opacity versus cdk-visually-hidden doesn't make a difference for screen readers.

Fixes #19397.

crisbeto · 2020-06-02T05:00:32Z

src/material/radio/radio.html

@@ -5,7 +5,7 @@
  <div class="mat-radio-container">
    <div class="mat-radio-outer-circle"></div>
    <div class="mat-radio-inner-circle"></div>
-    <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+    <input #input class="mat-radio-input" type="radio"


@jelbourn I don't remember why we ended up with cdk-visually-hidden in the first place, but from my testing, screen readers treat it exactly the same as when the input is opacity: 0. Given that we have the same issue in the other input-based components (slide toggle and checkbox), would it make sense to stop using it on native inputs?

AFAIK we can't rely on just opacity: 0. I looked through my notes with Google a11y folks and had this from 2018:

Accessibility tree visibility of elements with `opacity: 0` across screen readers? - Cannot rely on this. - Possibly could set to .001 - Probably JAWS also, potentially in IE only

Which I interpret as JAWS treating opacity: 0 as fully hidden.

I know that IE used to have some security restrictions if an input[type="file"] has opacity: 0. I wonder whether that's not related to your notes.

jelbourn

What does the MDC radio do here?

jelbourn · 2020-06-04T23:16:14Z

src/material/radio/radio.html

@@ -5,7 +5,7 @@
  <div class="mat-radio-container">
    <div class="mat-radio-outer-circle"></div>
    <div class="mat-radio-inner-circle"></div>
-    <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+    <input #input class="mat-radio-input" type="radio"


AFAIK we can't rely on just opacity: 0. I looked through my notes with Google a11y folks and had this from 2018:

Accessibility tree visibility of elements with `opacity: 0` across screen readers? - Cannot rely on this. - Possibly could set to .001 - Probably JAWS also, potentially in IE only

Which I interpret as JAWS treating opacity: 0 as fully hidden.

crisbeto · 2020-06-05T05:50:19Z

MDC does the same for their radio button: opacity: 0 + position: absolute. I was testing it with NVDA and it worked fine.

jelbourn

I wish I could test JAWS, but that machine is in the office. Since MDC does it, though, I guess it doesn't really matter.

LGTM

Currently the native `input` inside the radio button is collapsed down to 1px by 1px and moved to the bottom of the element which causes browsers to scroll the window down, rather than change the value, on the first click when the input is partially hidden. These changes fix the issue by having the input cover the entire button and hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden` doesn't make a difference for screen readers. Fixes angular#19397.

…19505) Currently the native `input` inside the radio button is collapsed down to 1px by 1px and moved to the bottom of the element which causes browsers to scroll the window down, rather than change the value, on the first click when the input is partially hidden. These changes fix the issue by having the input cover the entire button and hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden` doesn't make a difference for screen readers. Fixes #19397. (cherry picked from commit f80403c)

Fixes a regression caused by angular#19505 where clicking directly on the `input` element will prevent the click from reaching custom `click` listeners outside the radio button.

Fixes a regression caused by #19505 where clicking directly on the `input` element will prevent the click from reaching custom `click` listeners outside the radio button. (cherry picked from commit e0b76ed)

Fixes a regression caused by #19505 where clicking directly on the `input` element will prevent the click from reaching custom `click` listeners outside the radio button.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.3/13.2.4) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.3/13.2.4) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v13.2.4`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1324-plastic-mug-2022-02-23) [Compare Source](angular/components@13.2.3...13.2.4) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [74bae85bc5](angular/components@74bae85) | fix | **drag-drop:** incorrectly sorting element inside dialog with blocked scrolling ([#14806](angular/components#14806)) | | [81898ca5f6](angular/components@81898ca) | fix | **drag-drop:** stop pointer events on placeholder ([#24404](angular/components#24404)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [6b76469b4a](angular/components@6b76469) | fix | **autocomplete:** closing immediately when input is focused programmatically ([#21081](angular/components#21081)) | | [3ea76419c8](angular/components@3ea7641) | fix | **autocomplete:** use narrow value for aria-haspopup ([#15361](angular/components#15361)) | | [9a12eabf6b](angular/components@9a12eab) | fix | **button-toggle:** unable to override elevation and high contrast styling applied incorrectly ([#14722](angular/components#14722)) | | [cbd4b0ce4f](angular/components@cbd4b0c) | fix | **checkbox:** clear static aria attributes from host nodes ([#17092](angular/components#17092)) | | [f6eaa7c1cf](angular/components@f6eaa7c) | fix | **form-field:** use correct color for form fields in high contrast mode ([#24422](angular/components#24422)) | | [39d7834797](angular/components@39d7834) | fix | **radio:** clicks not propagating to wrapper elements ([#24459](angular/components#24459)) | | [5988b8f77b](angular/components@5988b8f) | fix | **radio:** not checked on first click if partially visible ([#19505](angular/components#19505)) | | [33716f124b](angular/components@33716f1) | fix | **select:** arrow highlighted state not updating in Safari ([#15281](angular/components#15281)) | | [fc204e4f4d](angular/components@fc204e4) | fix | **sidenav:** prevent focus from entering hidden sidenav if child element has a visibility | | [5e41a0ad09](angular/components@5e41a0a) | fix | **tabs:** use buttons for paginator also tab-header and mdc ([#24338](angular/components#24338)) | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [4198f5b5dc](angular/components@4198f5b) | fix | **mdc-dialog:** align change detection with non-MDC version ([#24451](angular/components#24451)) | | [45836f924d](angular/components@45836f9) | fix | **mdc-list:** fix typo in action-list css class ([#24448](angular/components#24448)) | | [7ca02495cd](angular/components@7ca0249) | fix | **mdc-list:** use body-1 rather than subtitle-1 typography for list items ([#24417](angular/components#24417)) | | [c9a15476e8](angular/components@c9a1547) | fix | **mdc-select:** target correct element with typography ([#24258](angular/components#24258)) | | [bd3f39fb15](angular/components@bd3f39f) | perf | **mdc-table:** reduce bundle size ([#24309](angular/components#24309)) | #### Special Thanks Alireza Ebrahimkhani, Arthur Ming, Jeri Peier, Kristiyan Kostadinov, Miles Malerba, Paul Gschwendtner and renovate\[bot]  </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. --- - [ ] 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/1188 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 · 2022-03-21T00:04:09Z

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

crisbeto added 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 labels Jun 2, 2020

crisbeto requested review from devversion and jelbourn as code owners June 2, 2020 04:58

crisbeto assigned jelbourn Jun 2, 2020

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 2, 2020

crisbeto commented Jun 2, 2020

View reviewed changes

jelbourn reviewed Jun 4, 2020

View reviewed changes

jelbourn approved these changes Jun 9, 2020

View reviewed changes

jelbourn added lgtm action: merge The PR is ready for merge by the caretaker labels Jun 9, 2020

mmalerba removed the lgtm label Jul 31, 2020

crisbeto force-pushed the 19397/radio-partially-visible branch from 1159022 to ff1564e Compare November 20, 2020 20:47

crisbeto changed the title ~~fix(radio): not checked on first click if partially visible~~ fix(material/radio): not checked on first click if partially visible Nov 20, 2020

devversion removed their request for review August 18, 2021 12:58

andrewseguin removed the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 28, 2021

andrewseguin merged commit f80403c into angular:master Feb 18, 2022

crisbeto mentioned this pull request Feb 21, 2022

fix(material/radio): clicks not propagating to wrapper elements #24459

Merged

This was referenced Feb 25, 2022

build(deps): bump @angular/cdk from 12.2.4 to 13.2.4 numbersprotocol/capture-lite#1311

Closed

build(deps): bump @angular/material from 12.2.4 to 13.2.4 numbersprotocol/capture-lite#1330

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(material/radio): not checked on first click if partially visible #19505

fix(material/radio): not checked on first click if partially visible #19505

crisbeto commented Jun 2, 2020

crisbeto Jun 2, 2020

jelbourn Jun 4, 2020

crisbeto Jun 5, 2020

jelbourn left a comment

jelbourn Jun 4, 2020

crisbeto commented Jun 5, 2020

jelbourn left a comment

angular-automatic-lock-bot bot commented Mar 21, 2022

fix(material/radio): not checked on first click if partially visible #19505

fix(material/radio): not checked on first click if partially visible #19505

Conversation

crisbeto commented Jun 2, 2020

crisbeto Jun 2, 2020

Choose a reason for hiding this comment

jelbourn Jun 4, 2020

Choose a reason for hiding this comment

crisbeto Jun 5, 2020

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

jelbourn Jun 4, 2020

Choose a reason for hiding this comment

crisbeto commented Jun 5, 2020

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Mar 21, 2022