Mac VoiceOver focus is stuck on initial option in multiple selection

[Zorrow2008]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

When MacOS VoiceOver is enabled and you open up at a multiple selection mat-select form, the black outline (VoiceOver focus) is always stuck to the initial option that opens up. You can tab and arrow key between options and regular focus works fine and VoiceOver even voices things correctly. However the black outline representing the VoiceOver focus is always stuck on the initial option that opens up when expanding the multiple select.

Please provide a link to a minimal reproduction of the bug

https://material.angular.io/components/select/overview#multiple-selection

Please provide the exception or error you saw

Steps to reproduce:
1) Go to https://material.angular.io/components/select/overview#multiple-selection
2) Enable MacOs VoiceOver
3) Click on the multiple selection and tab through options
4) Notice how the black rectangle (voiceover focus) is always set to the initial option that opens up.

Please provide the environment you discovered this bug in

OS: macOS Big Sur Version 11.3.1

Anything else?

No response

[Zorrow2008]

Another issue I found:
When the multi-select has no options selected and a user selects an option inside the multi-select listbox and moves to other options using arrow keys, the VO screen reader announces the selected option even though user is on to the other option(list item).

[zelliott]

My understanding is that VO has poor support for aria-multiselectable listboxes. This issue might be relevant: w3c/aria-practices#1445.

[zarend]

I can reproduce this. It seems like screen reader focus keeps moving back to the trigger for some reason.

[zarend]

Confirming that I can still reproduce on v15.1.0.

macOS 13.1 (22C65); chrome Version 109.0.5414.87 (Official Build) (x86_64)