input: ngAria adds role 'button' to placeholder label, confusing screen readers

[hintzed]

Bug, enhancement request, or proposal:

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://codepen.io/anon/pen/WJmmXd

Detailed Reproduction Steps:

1. Add an input element with a placeholder attribute.
2. Inspect the generated floating placeholder label in the DOM for aria attributes.
3. (Optional) Use ChromeVox on ChromeOS to iterate through the list of buttons (see shortcuts). Notice how the input field is selected and announced as a clickable button element.

What is the expected behavior?

The placeholder label should not be an interactive UI element in the accessibility tree.

What is the current behavior?

The placeholder label is assigned the aria role "button" and thus considered a button by accessibility tools.

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

Being classified as button in the accessibility tree causes screen readers such as ChromeVox to jump to it and announce it as an interactive element of role button when navigating a page by element category button. This makes navigation an application using accessibility tools like screen readers confusing. It is working fine when just tabbing through the focusable elements, due to having an tabindex=-1, though.

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

• AngularJS: 1.6.9
• AngularJS Material: 1.1.9
• OS: all
• Browsers: all

Is there anything else we should know? Stack Traces, Screenshots, etc.

This issue is caused by ngAria adding role='button' by default to elements with an ngClick directive that aren't natively clickable (see aria.js). It is triggered by the ngClick directive on the label used to display the placeholder text (see input.js).

While one can globally disable this behavior by ngAria by setting bindRoleForClick=false, doing so could likely cause a regression in terms of accessibility in other places.

Assuming that the placeholder label element itself is no particular use to say a screen reader user (assuming the aria-label on the actual input element is set to a meaningful value, perhaps even the placeholder value) and the purpose of the ngClick directive only being to redirect focus to the actual input element, adding aria-hidden="true" to the placeholder label element might be an appropriate solution to resolve this issue.

[Splaktar]

Thank you very much for such a great issue write up! aria-hidden="true" does indeed solve this issue and I haven't seen it cause any issues with non-screen reader interactions.