A11y keyboard focus control in the Select Component

[DaveBest99]

Bug, feature request, or proposal:

Bug:
The List box is not automatically expanded when focus moves to it, and the selected item does not get focus.

What is the expected behavior?

Pressing Tab or Shift+Tab key to move focus to a List box, the List should open with focus on the selected item in the list.

What is the current behavior?

Currently the List box is not automatically opened, and the selected item may not get focus.

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?

To create a consistent and standard experience.

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

Using screen reader JAWS17 with browsers Firefox, IE11, and Chrome.

Is there anything else we should know?

The screen reader user experience is as follows:

1. Press Tab key to move focus to the Select component.
   JAWS says "Favorite food list box to move to an item use the arrow key", and the braille display shows "Favorite food lbx 0 items".
   Focus moves to the List box but it is not automatically expanded.
   When using Firefox pressing Down arrow key moves focus out of the List box and to the next page element, but when using IE11 or Chrome the arrow keys do nothing (focus is not moved).

2. With the focus on the List box press the Enter key.
   Note, the Alt+Down arrow does not open the List box, which is expected.
   Note, pressing Tab or Shift+Tab to the List box should automatically open the List and announce the selected item and the number of List items.
   When using Firefox the List box is expanded and JAWS says "Favorite food list box Steak 1 of 3", and the braille display shows "lbx steak 1 of 3".
   When using IE11 the List box is expanded and JAWS says "Favorite food list box Steak", and the braille display shows "lbx steak" (number of items in the list is not announced or displayed).
   When using Chrome the List box is expanded and JAWS says "Favorite food list box Steak 2 of 4", and the braille display shows "lbx steak 2 of 4" (List item count is wrong).

3. With the List box expanded press Up and Down arrow keys.
   JAWS will announce and display each item "Steak", "Pizza", and "Tacos" as the arrow key moves the List item focus, but only Firefox will announce "Selected" on the item that has been selected. IE11 has no indication as to which list item has been selected, and Chrome does not announce the "selected" but shows it on the braille display.
   Pressing Home will move focus to the top of the list, and pressing End will move the focus to the last item in the list. However, arrow keys do not rotate focus from last to first item or first to last item, which is not required but seems to be the design preference.
   Pressing Escape, Tab, or Shift+Tab key will collapse the List without selecting an item, which is expected. Note, usually Alt+DownArrow opens a List box and Alt+UpArrow will close the List box.
   Pressing Spacebar or Enter key will select the currently focused list item and collapse the list, but the autotext update is not announced by JAWS. The user must press Down arrow to find the updated text "Selected value: tacos-2".
   Note, using Firefox moving focus back to the List box and pressing Enter key will expand the List box with the focus on the selected item "Favorite food Tacos selected 3 of 3", and display "lbx Tacos 3 of 3", as expected.

[crisbeto]

There's a pending PR for this at #3313.

[epelc]

@DaveBest99 can you close this? The PR was merged a while ago.

[jelbourn]

Tracking via #11083

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