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

[NilsAtGoogle]

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]

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.