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

radio-button: screen reader does not read the labels #11923

Closed
satishsan opened this issue May 29, 2020 · 4 comments · Fixed by #11987
Closed

radio-button: screen reader does not read the labels #11923

satishsan opened this issue May 29, 2020 · 4 comments · Fixed by #11987
Assignees
@Splaktar
Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. type: bug
Milestone
1.2.0

Comments

@satishsan
Copy link

Demo and steps to reproduce the issue

Enable Screen reader

  1. open a web page with radio button group
  2. Navigate to a radio button using keyboard tab key
  3. Observe screen reader does not announce the label of the radio button.

Demo URL (required)*:

Detailed Reproduction Steps

Explain the expected behavior

The Radio buttons are read on first selection of the group

Explain the current behavior

The radio buttons are only read on selecting the buttin

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

Accessibility

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

  • AngularJS: 1.
  • AngularJS Material: 1.
  • OS:
  • Browsers:

Add anything else we should know

Stack Trace

Screenshots
@Splaktar
Copy link
Member

@satishsan Thank you for taking the time to submit this issue, your first ever! However it does not follow our required issue template.

This gives the team the information needed to investigate the bug or prioritize the enhancement.

@Splaktar Splaktar added a11y This issue is related to accessibility needs: more info The issue does not contain enough information for the team to determine if it is a real bug labels May 30, 2020
@Splaktar Splaktar self-assigned this May 30, 2020
@Splaktar Splaktar changed the title Screen reader does not read the label for radio button when first navigating to it radio-button: screen reader does not read the labels May 30, 2020
@Splaktar
Copy link
Member

You mention

Observe screen reader does not announce the label of the radio button.

and

The Radio buttons are read on first selection of the group

So it sounds like you are reporting two issues?

  1. focusing the group does not read all of the radio button labels
  2. focusing individual radio buttons does not read the buttons label (until you actually select it)

Is this accurate?

@satishsan
Copy link
Author

Sorry for the late response that is correct.

@Splaktar Splaktar added P2: required Issues that must be fixed. needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community and removed needs: more info The issue does not contain enough information for the team to determine if it is a real bug labels Jul 14, 2020
@Splaktar Splaktar added this to the 1.2.0 milestone Jul 14, 2020
@kittenish
Copy link

We have split this issue into two to be more accurate.

Please refer to #11974 and #11973. Sorry about the confusion, thanks!

@Splaktar Splaktar modified the milestones: 1.2.0, 1.2.1 Jul 29, 2020
@Splaktar Splaktar added has: Pull Request A PR has been created to address this issue and removed needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Jul 30, 2020
Splaktar added a commit that referenced this issue Jul 30, 2020
@Splaktar
fix(radio-button): when no value selected, first button not announced…
dc90176 
… on focus

- when no value selected, set `aria-activedescendant` to first button's `id`
- properly define labels and `aria-labelledby` in demos
- improve some JSDoc and types
- rename some variables to make them more readable
- remove unused parameters
- improvements to multi-column demo
  - remove unneeded or unused styles and elements
  - use `aria-describedby` to make first column available to screen reader users

Fixes #11973. Fixes #11923. Fixes #11974.
@Splaktar Splaktar mentioned this issue Jul 30, 2020
Merged
3 tasks
Splaktar added a commit that referenced this issue Jul 30, 2020
@Splaktar
fix(radio-button): when no value selected, first button not announced…
9159384 
… on focus

- when no value selected, set `aria-activedescendant` to first button's `id`
- properly define labels and `aria-labelledby` in demos
- improve some JSDoc and types
- rename some variables to make them more readable
- remove unused parameters
- improvements to multi-column demo
  - remove unneeded or unused styles and elements
  - use `aria-describedby` to make first column available to screen reader users

Fixes #11973. Fixes #11923. Fixes #11974.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
a11y This issue is related to accessibility has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. type: bug
Projects
None yet
Milestone
1.2.0
Development

Successfully merging a pull request may close this issue.

fix(radio-button): when no value selected, first button not announced on focus angular/material
3 participants
@Splaktar @kittenish @satishsan