A11y keyboard focus control in the Tooltip Component

[DaveBest99]

Bug, feature request, or proposal:

Bug: Demo does not reveal a Tooltip message.

What is the expected behavior?

A Tooltip message is expected as part of the demo.

What is the current behavior?

Currently there is no Tooltip message.

What are the steps to reproduce?

See below.

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://goo.gl/DlHd6U

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

Create a good user experience.

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

Using screen reader JAWS17 with browsers Firefox, Internet Explorer 11, and Google Chrome, on Windows10.

Is there anything else we should know?

Screen reader user experience follows:

1. Press Tab key to the "Tooltip with custom position" demo component in the "Example" Tab Panel. JAWS says "list box to move to an item press the arrow keys", and the braille display shows "Lbx 0 items".

   • The text label "Show tooltip" is not associated with the Listbox, and thus not spoken when the Listbox receives focus.
   • The Listbox does not automatically open when receiving focus. The user must first press Enter key and then can press arrows to select an option.
   • Upon selecting a Tooltip option (pressing Spacebar or Enter key on a List item), no Tooltip message is displayed. Note, the md-select module uses role=listbox with ARIA attributes. However, the role=tooltip and aria-describedby= attribute is not used.

2. Authors SHOULD ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed.

   • Tab: When a form control receives focus a tooltip appears. The tooltip is hidden when the control loses focus.
   • ESCape: Closes tooltip. Once dismissed, mouse hover will display the tooltip as if the control does not have focus.

Example: Note, the aria-labelledby attribute replaces the associated label element, and the aria-describedby attribute is read after the field type is stated. `

  First Name:      

Your first name is a optional

`

Resources

WAI-ARIA Authoring Practices 1.1 - tooltip (role) http://w3c.github.io/aria-practices#h-tooltip

Tooltip Example http://www.oaa-accessibility.org/examplep/tooltip1/

Using the aria-describedby property to provide a descriptive label for user interface controls https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html

[ecerta]

Alllllll of this.

[angular-automatic-lock-bot[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.}