Trigger + pop-up controls are not in DOM order for VoiceOver navigation

[jasonzhang2022]

Bug, feature request, or proposal:

bug

What is the expected behavior?

User can use VO-down arrow to navigate the drop down list
user can use VO-space to select one value from drop down list

What is the current behavior?

user can't reach the dropdown list using VO command

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

accessibility

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

angular material 2 as of 2018-05-03

Is there anything else we should know?

[jelbourn]

We're working on revamping select and autocomplete this quarter to solve this. See #11083

[Splaktar]

If you manage to select an item in the popup menu, VO-space does select that item and close the popup menu.

However, the VO-Down Arrow combination does not allow entering the popup menu or changing options. Just the up/down arrow keys alone, do allow changing the options.

VO-Shift-Down Arrow should let you start interacting with the component (the popup menu in this case), but it does not currently do anything useful for mat-autocomplete.

When the mat-autocomplete is focused in VoiceOver, it announces that you are on a "Menu pop-up combobox" and suggests that you can type text or display a list of options using VO-Space. However, this does not apply since the menu opens/expands when the mat-autocomplete's input gets focus. VoiceOver does not give the use any indication of how to navigate the options and does not inform the user that the pop-up is expanded/open.

[jelbourn]

Revisited this today. This still stands in the sense that, while the dropdown is reachable by keyboard, it is not reachable through VoiceOver's navigation (not tab navigation). This is because the overlay is attached directly to the document body rather than being immediately after the text input in the DOM.

This affects select, autocomplete, menu, datepicker