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

list-item: default ariaLabel causes list items to be read twice #11582

Closed
NilsAtGoogle opened this issue Jan 8, 2019 · 2 comments · Fixed by #12022
Closed

list-item: default ariaLabel causes list items to be read twice #11582

NilsAtGoogle opened this issue Jan 8, 2019 · 2 comments · Fixed by #12022
Assignees
@Splaktar
Labels
a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. type: bug
Milestone
1.2.1

Comments

@NilsAtGoogle
Copy link

NilsAtGoogle commented Jan 8, 2019 •
edited by jelbourn
Loading

Bug, enhancement request, or proposal:

When a clickable / linkable mdListItem is provided without an aria-label, the directive creates a button/link with an aria-label. Because this element and the original inner contents are siblings, asking a screen reader to read through the document results in both the created link and the content to be read, which is awkward for screen reader users.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://codepen.io/nil_ptr/pen/LMrxOV

Detailed Reproduction Steps:

  1. Have a screen reader to read through the contents

What is the expected behavior?

Link contains the actual contents, or some other solution which prevents the contents from being read twice.

What is the current behavior?

Screen reader reads link's aria label, then reads the sibling DOM

What is the use-case or motivation for changing an existing behavior?

Providing an accurate experience for assistive technology

Which versions of AngularJS, Material, OS, and browsers are affected?

  • AngularJS: >v1.6
  • AngularJS Material: >v1.1
  • OS: any
  • Browsers: Chrome / ChromeVox (not tested with JAWS, NVDA, etc.)

Is there anything else we should know? Stack Traces, Screenshots, etc.
@NilsAtGoogle
Copy link
Author

NilsAtGoogle commented Jan 8, 2019 •
edited by Splaktar
Loading

Note that you can work around this by explicitly providing a better aria-label to the mdListItem and setting aria-hidden="true" on the contents.

@jelbourn jelbourn added a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. labels Jan 8, 2019
@Splaktar Splaktar self-assigned this Jan 8, 2019
@Splaktar Splaktar changed the title mdListItem: [a11y] default ariaLabel causes list items to be read twice list-item: default ariaLabel causes list items to be read twice Jan 8, 2019
@Splaktar Splaktar added this to the 1.1.13 milestone Jan 8, 2019
@Splaktar Splaktar added P3: important Important issues that really should be fixed when possible. type: bug labels Jan 8, 2019
@Splaktar Splaktar added P2: required Issues that must be fixed. and removed P3: important Important issues that really should be fixed when possible. labels Jan 22, 2019
@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, g3: sync Feb 15, 2019
@Splaktar Splaktar modified the milestones: g3: sync, 1.1.23 Apr 30, 2020
@Splaktar Splaktar modified the milestones: 1.1.23, 1.2.1 Jun 8, 2020
Splaktar added a commit that referenced this issue Sep 23, 2020
@Splaktar
fix(list): case where list items are read twice by screen readers
6b2b09c 
- if we create an `aria-label` from the element's text content
  then mark the content as `aria-hidden="true"` so that screen
  readers don't announce/traverse the content twice
- improve Closure types

Fixes #11582
@Splaktar Splaktar added the has: Pull Request A PR has been created to address this issue label Sep 23, 2020
@Splaktar Splaktar mentioned this issue Sep 23, 2020
Merged
3 tasks
@Splaktar
Copy link
Member

Opened PR #12022 to address this.

In the process, I created this updated CodePen.

Splaktar added a commit that referenced this issue Sep 23, 2020
@Splaktar
fix(list): case where list items are read twice by screen readers
5c455d3 
- if we create an `aria-label` from the element's text content
  then mark the content as `aria-hidden="true"` so that screen
  readers don't announce/traverse the content twice
- improve Closure types

Fixes #11582
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 g3: reported The issue was reported by an internal or external product team. 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.1
Development

Successfully merging a pull request may close this issue.

fix(list): case where list items are read twice by screen readers angular/material
3 participants
@jelbourn @Splaktar @NilsAtGoogle