A11y keyboard focus control in the Chips Component

[DaveBest99]

Bug, feature request, or proposal:

Bug: Unable to select a Chip item.

What is the expected behavior?

Pressing Spacebar or Enter key should select a List Item, and Tab or Shift+Tab should move focus away from the Listbox element.

What is the current behavior?

Currently a keyboard user cannot move focus from the Listbox element.

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 keyboard 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 Chip demo component in the Tab Panel.
   JAWS says "list box none selected 1 of 4", and the braille display shows "lbx none 1 of 4".
   Although keyboard navigation keys perform as expected (Arrow keys rotate focus through the list of items; Home and End keys move focus to top and bottom of list), the Tab and Shift+Tab keys do not move focus away from the Listbox. Also, pressing Escape or Alt+UpArrow key to close the Listbox, does not allow the Tab and shift+Tab to move the focus. This is consider to be a WCAG Keyboard Trap.
   The md-chip-list has role=listbox with tabindex=0, and the md-chip module has role=option with tabindex=-1, which should be okay, so not sure what may be the problem.

2. Press Spacebar or Enter key on a Listbox Item.
   JAWS announces "selected" (I.E. "Primary selected") as the user presses the Arrow keys, but moving the focus away from the Listbox and then back, the first item always "none" gets focus and is announced as "selected".

According to the "Overview" explanation:
Users can move through the chips using the arrow keys and select/deselect them with the space. Chips also gain focus when clicked, ensuring keyboard navigation
starts at the appropriate chip.

Note, a chip may contain a photo, short title, and brief information, but the demo does not illustrate this type of Chip, and does not allow for Deletion.

[DaveBest99]

I don't believe updates have been made yet. When using Firefox and JAWS screen reader focus will not move from the ListBox with Tab and Shift+tab. When using Internet Explorer and Jaws screen reader the Tab key moves focus to the next page element, but the Shift+tab does not move the focus from the ListBox. The Escape key does not close the ListBox, and The Spacebar or Enter key does not select the current ListBox item. In the example there is only one ListBox. What example page were you testing? Did you test keyboard only with no assistive technology running? Angular Material - Component Chips https://material.angular.io/components/component/chips David From: Sabith Pocker [mailto:[email protected]] Sent: May 7, 2017 03:55 PM To: angular/material2 Cc: David Best; Author Subject: Re: [angular/material2] A11y keyboard focus control in the Chips Component (#3706) I am able to use Tab and Shift+Tab to navigate between chips, Also Enter selects the chip. Is this already fixed? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3706 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/AVPBNpc0UNSswWMBwbGpBAGx0Qs7zG0yks5r3iF6gaJpZM4MkTSV> . <https://github.com/notifications/beacon/AVPBNm6VTgrvKr77F_InfnWTY0rJU7Plks5r3iF6gaJpZM4MkTSV.gif>

[tinayuangao]

This is duplicate of #4593.
#4605 fixes this.

[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.}