fix(material/list): Selection List element should not be focusable.

[zelliott]

Currently, the MatSelectionList listbox element itself receives focus on keyboard navigation. This does not follow the Listbox Design Pattern recommendation on the 1.1 ARIA practices (https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox). Per their guidance:

When a single-select listbox receives focus:

• If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected.
• If an option is selected before the listbox receives focus, focus is set on the selected option.

This PR changes the keyboard interaction of MatSelectionList to follow the guidance above.

I would prefer to use the "roving tabindex" pattern, but given the list options are content-projected, I ran into issues keeping tabindices updated without ExpressionChangedAfter... errors. Thus, I instead essentially followed the implementation used in MatChipList. The listbox element has tabindex="0", and the option elements have tabindex="-1". When the listbox is focused, it redirects focus to the proper option element.

• When a user attempts to tab out of the selection list, the selection list's tabindex is temporarily set to -1 to allow focus to escape (MatChipList does this as well).
• When the selection list has no options, it is removed from the tab order.
• The [tabIndex] input on MatSelectionList is now unused and should eventually be removed.

[jelbourn]

LGTM

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