Skip to content

bug(checkbox): aria-label and aria-labelledby result in duplicate attributes and verbose screen reader experience #19478

Closed
@mfairchild365

Description

@mfairchild365

Reproduction

  1. Use NVDA 2020 and Chrome 81
  2. Navigate to https://angular-kjejjn-2lxw6j.stackblitz.io
  3. Tab to the second example "two labels"
  4. Observe that the output is "clickable Check me! hello Check me! hello check box not checked"
  5. Inspect the rendered DOM and observe that aria-labelledby is on both the <mat-checkbox> and <input type="checkbox>.

Expected Behavior

  • NVDA should only announce the labels once, and should not announce "clickable". For example "Check me! hello check box not checked".
  • This is occurring because of the duplicated attribute on the container. The aria-labelledby attribute should not exist on the containing <mat-checkbox>

Actual Behavior

Very verbose output in NVDA.

Environment

  • Angular: 9.2.4
  • CDK/Material: 9.2.4
  • Browser(s): Chrome 81
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows, with NVDA 2020.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/checkbox

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions