fix(material/checkbox): fix ARIA semantics and use native DOM properties #26710

zarend · 2023-02-28T19:09:39Z

For the checkbox component, fix semantics so that a11y produces a state of "mixed" when both the checked and indeterminate Inputs to mat-checkbox are both true.

Also, remove the use of aria-checked in favor of the native DOM properties for checked and indeterminate. Conform to ARIA in HTML W3C input checkbox specification.

Fix a11y bug where checkbox renders the indeterminate visual state but accessibility tree has a state of "checked". Aligns with native checkbox, which produces the mixed state when indeterminate property is true, regardless of the value of the checked property.

Some accessibility checkers produce an error when native checkbox has aria-checked on it. Remove aria-checked to fix errors.

Does not make visual changes.

Fix #26709

zarend · 2023-02-28T19:13:47Z

Note to reviewers, I confirmed that native checkbox always presents the indeterminate state when indeterminate DOM property is set to true. The aria state always matches the visual state, and native checkbox has the same behavior with indeterminate "true", checked "true" and indeterminate "true", checked "false". This looks to be on spec with HTML to me, and I confirmed that Chrome, Firefox and Safari all handle it the same way.

Visual and a11y tree state of native checkbox

inputElement.checked	inputElement.indeterminate	visual state	a11y tree state
true	true	indeterminate	"mixed"
true	false	checked	"checked"
false	true	indeterminate	"mixed"
false	false	unchecked	"unchecked"

github-actions · 2023-02-28T19:16:17Z

Deployed dev-app for b5bf2c0 to: https://ng-dev-previews-comp--pr-angular-components-26710-u4vxqxse.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

src/material/checkbox/checkbox.ts

For the checkbox component, fix semantics so that a11y produces a state of "mixed" when both the `checked` and `indeterminate` Inputs to mat-checkbox are both true. Also, remove the use of aria-checked in favor of the native DOM properties for checked and indeterminate. Conform to [ARIA in HTML W3C input checkbox specification](https://www.w3.org/TR/html-aria/#el-input-checkbox). Fix a11y bug where checkbox renders the indeterminate visual state but accessibility tree has a state of "checked". Aligns with native checkbox, which produces the mixed state when indeterminate property is true, regardless of the value of the checked property. Some accessibility checkers produce an error when native checkbox has aria-checked on it. Remove aria-checked to fix errors. Does not make visual changes. Fix angular#26709

mmalerba

LGTM

…ies (#26710) For the checkbox component, fix semantics so that a11y produces a state of "mixed" when both the `checked` and `indeterminate` Inputs to mat-checkbox are both true. Also, remove the use of aria-checked in favor of the native DOM properties for checked and indeterminate. Conform to [ARIA in HTML W3C input checkbox specification](https://www.w3.org/TR/html-aria/#el-input-checkbox). Fix a11y bug where checkbox renders the indeterminate visual state but accessibility tree has a state of "checked". Aligns with native checkbox, which produces the mixed state when indeterminate property is true, regardless of the value of the checked property. Some accessibility checkers produce an error when native checkbox has aria-checked on it. Remove aria-checked to fix errors. Does not make visual changes. Fix #26709 (cherry picked from commit 5c5617d)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`15.2.1` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcdk/15.2.1/15.2.5) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`15.2.1` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/15.2.1/15.2.5) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v15.2.5`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1525-metal-plumber-2023-03-29) [Compare Source](angular/components@15.2.4...15.2.5) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [4ec3abd723](angular/components@4ec3abd) | fix | **overlay:** don't close if scroll is coming from inside overlay ([#26840](angular/components#26840)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [600d40eb24](angular/components@600d40e) | fix | **datepicker:** remove div as a child of button ([#26838](angular/components#26838)) | #### Special Thanks Kristiyan Kostadinov and Wagner Maciel  ### [`v15.2.4`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1524-brimstone-bank-2023-03-23) [Compare Source](angular/components@15.2.3...15.2.4) ##### material | Commit | Type | Description | | -- | -- | -- | | [580fbf500](angular/components@580fbf5) | fix | **core:** apply strong focus styles to selected option ([#26811](angular/components#26811)) | | [1ba5ade41](angular/components@1ba5ade) | fix | **datepicker:** date range input not marked as required when using reactive forms ([#26749](angular/components#26749)) | | [acc7d8148](angular/components@acc7d81) | fix | **tooltip:** only expand hover area on side closest to trigger ([#26786](angular/components#26786)) | #### Special Thanks Kristiyan Kostadinov, Wagner Maciel and Zach Arend  ### [`v15.2.3`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1523-aluminum-statue-2023-03-16) [Compare Source](angular/components@15.2.2...15.2.3) ##### material | Commit | Type | Description | | -- | -- | -- | | [7dfcf8ff3](angular/components@7dfcf8f) | fix | **checkbox:** fix ARIA semantics and use native DOM properties ([#26710](angular/components#26710)) | | [40d38889c](angular/components@40d3888) | fix | **chips:** chip label appearing above sticky columns ([#26794](angular/components#26794)) | | [b846d1e05](angular/components@b846d1e) | fix | **chips:** don't prevent default mousedown action ([#26765](angular/components#26765)) | | [501d73e5b](angular/components@501d73e) | fix | **chips:** styling not cleared on basic chips in listbox and grid ([#26771](angular/components#26771)) | | [06ed54c25](angular/components@06ed54c) | fix | **tabs:** update MatTab \_scrollToLabel function to always display a label from its start ([#26736](angular/components#26736)) ([#26737](angular/components#26737)) | #### Special Thanks Boyi Li, Kristiyan Kostadinov, Paul Gschwendtner and Zach Arend  ### [`v15.2.2`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1522-topaz-toast-2023-03-08) [Compare Source](angular/components@15.2.1...15.2.2) ##### material | Commit | Type | Description | | -- | -- | -- | | [e7612c747](angular/components@e7612c7) | fix | **chips:** unable to shift + tab out of a chip set ([#26727](angular/components#26727)) | | [1bf2fc2e1](angular/components@1bf2fc2) | fix | **core:** mat-option sets aria-selected="false" ([#26673](angular/components#26673)) | | [9473b1688](angular/components@9473b16) | fix | **datepicker:** resolve server-side rendering error ([#26742](angular/components#26742)) | | [99dac0835](angular/components@99dac08) | fix | **paginator:** opt-out of single-selection indicator ([#26746](angular/components#26746)) | | [ec824f1f7](angular/components@ec824f1) | fix | **snack-bar:** live region not working when modal is open ([#26725](angular/components#26725)) | ##### cdk-experimental | Commit | Type | Description | | -- | -- | -- | | [e1c8fe85b](angular/components@e1c8fe8) | fix | **scrolling:** throw error rather than string ([#26736](angular/components#26736)) | #### Special Thanks Kristiyan Kostadinov, RuoJia123 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/1813 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-04-14T00:08:37Z

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: patch This PR is targeted for the next patch release area: material/checkbox dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Feb 28, 2023

zarend requested review from andrewseguin, devversion and mmalerba as code owners February 28, 2023 19:09

mmalerba reviewed Feb 28, 2023

View reviewed changes

src/material/checkbox/checkbox.ts Outdated Show resolved Hide resolved

zarend force-pushed the checkbox-aria-checked branch from 4dbceb2 to b5bf2c0 Compare February 28, 2023 22:48

zarend requested a review from josephperrott as a code owner February 28, 2023 22:48

zarend requested a review from mmalerba February 28, 2023 22:49

mmalerba approved these changes Mar 2, 2023

View reviewed changes

mmalerba added the action: merge The PR is ready for merge by the caretaker label Mar 2, 2023

angular-robot bot merged commit 5c5617d into angular:main Mar 14, 2023

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(material/checkbox): fix ARIA semantics and use native DOM properties #26710

fix(material/checkbox): fix ARIA semantics and use native DOM properties #26710

Uh oh!

zarend commented Feb 28, 2023

Uh oh!

zarend commented Feb 28, 2023

Uh oh!

github-actions bot commented Feb 28, 2023 •

edited

Loading

Uh oh!

Uh oh!

mmalerba left a comment

Uh oh!

angular-automatic-lock-bot bot commented Apr 14, 2023

Uh oh!

Uh oh!

fix(material/checkbox): fix ARIA semantics and use native DOM properties #26710

fix(material/checkbox): fix ARIA semantics and use native DOM properties #26710

Uh oh!

Conversation

zarend commented Feb 28, 2023

Uh oh!

zarend commented Feb 28, 2023

Uh oh!

github-actions bot commented Feb 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Apr 14, 2023

Uh oh!

Uh oh!

github-actions bot commented Feb 28, 2023 •

edited

Loading