Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

radio-button: VoiceOver doesn't announce labels properly #11973

Closed
#11987
Closed
radio-button: VoiceOver doesn't announce labels properly#11973
#11987
Assignees
Splaktar
Labels
P2: requiredIssues that must be fixed.a11yThis issue is related to accessibilityg3: reportedThe issue was reported by an internal or external product team.has: Pull RequestA PR has been created to address this issuetype: bug
Milestone
1.2.0

Description

@kittenish
kittenish
opened on Jul 22, 2020

Bug

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*: https://codepen.io/jiaruigao/pen/VweGJrp?editable=true%3Dhttps%3A%2F%2Fmaterial.angularjs.org%2FHEAD%2Fdemo%2FradioButton

Detailed Reproduction Steps

  1. Enable VoiceOver
  2. Do not pre-select any radio button within a radio group
  3. Navigate to a radio group using keyboard tab key
  4. Observe the first radio button is focused
  5. Observe VoiceOver announces all buttons at once without any gap.

Explain the expected behavior

In step 4, VoiceOver should only announce the focused button.

Explain the current behavior

In step 4, VoiceOver announces all buttons at once.
Screen Shot 2020-07-22 at 2 58 04 PM

Discuss the use-case or motivation for changing the existing behavior

It's a bit confusing for VoiceOver to announce all buttons when only one is focused.
In WAI-ARIA example, when follow similar steps, we could see VoiceOver only announces the first radio button when entering a radio group and nothing is selected.
Screen Shot 2020-07-22 at 2 56 41 PM

List the affected versions of AngularJS, Material, OS, and browsers

  • AngularJS: 1.8.0
  • AngularJS Material: 1.1.24
  • OS: Mac OS Version 10.15.3
  • Browsers: Chrome 81.0.4044.113

Activity

  1. Splaktar
    added
    a11yThis issue is related to accessibility
    g3: prThis PR was posted by an internal or external product team.
    on Jul 29, 2020
  2. Splaktar
    self-assigned this
    on Jul 29, 2020

  3. Splaktar commented on Jul 29, 2020

    @Splaktar
    Splaktar
    on Jul 29, 2020
    Contributor

    We actually use the aria-activedescendant approach from the second WAI ARIA example: Radio Group Example Using aria-activedescendant.

    I can reproduce this issue in master.

  4. Splaktar
    added
    P2: requiredIssues that must be fixed.
    type: bug
    on Jul 29, 2020
  5. Splaktar
    added this to the 1.2.0 milestone on Jul 29, 2020
  6. Splaktar
    added
    g3: reportedThe issue was reported by an internal or external product team.
    and removed
    g3: prThis PR was posted by an internal or external product team.
    on Jul 29, 2020

  7. Splaktar commented on Jul 30, 2020

    @Splaktar
    Splaktar
    on Jul 30, 2020
    Contributor

    This was caused by aria-activedescendant not being set at all on the md-radio-group when no radio button was checked/selected, which isn't a valid state. It needs to be set to the first radio button's id.

  8. Splaktar
    added
    has: Pull RequestA PR has been created to address this issue
    on Jul 30, 2020
  9. Splaktar
    added a commit that references this issue on Jul 30, 2020

    fix(radio-button): when no value selected, first button not announced…

    dc90176
  10. Splaktar
    closed this as completedin #11987on Jul 30, 2020
  11. Splaktar
    added a commit that references this issue on Jul 30, 2020

    fix(radio-button): when no value selected, first button not announced…

    9159384
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2: requiredIssues that must be fixed.a11yThis issue is related to accessibilityg3: reportedThe issue was reported by an internal or external product team.has: Pull RequestA PR has been created to address this issuetype: bug

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions