password visibility toggle example in form field component is not accessible

[mfairchild365]

What is the expected behavior?

1. It must be possible to operate the password visibility toggle button in the form field example by only using a keyboard
2. Roles, states, and properties must be present so that users of screen reader software are aware that the of the toggle functionality

What is the current behavior?

1. It is not possible to operate the password visibility toggle button in the form field example by only using a keyboard
2. Roles, states, and properties are not present so that users of screen reader software are aware that the of the toggle functionality

What are the steps to reproduce?

1. Using either of the following screen readers
   • NVDA 2018.4.1 + Firefox 64
   • VoiceOver for IOS (12.1.3) + Safari
2. Open the form field example
3. Navigate to the passord visibility toggle button in the "Form field with prefix & suffix" example
   • In NVDA you can press the tab key until you reach it
   • In VoiceOver for iOS you can swipe right until you reach it
4. With NVDA observe that the tab key does not focus the button
5. With VoiceOver for iOS observe that the button is skipped
6. Observe that it is not possible to activate the button by pressing space or enter keys
7. Observe that the name, role, and state of the toggle button is not announced by the screen reader.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular Material Example 7.2.2 located at https://material.angular.io/components/
• NVDA 2018.4.1 + FireFox 64
• VoiceOver for IOS (12.1.3) + Safari (12.1.3)

Is there anything else we should know?

Note that this example is also included in the form field overview page.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}