bug(MatSelect): With VoiceOver + Safari, VoiceOver doesn't read MatSelect options.

[lynnkim-prev]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Safari + VO does not read options in mat-select. It seems to work fine in Chrome, but Safari+VO seems to have the issue.

Reproduction

Steps to reproduce:

1. Access https://material.angular.io/components/select/overview in Safari
2. Turn on voiceover
3. Navigate to with tab key
4. Open options panel with enter/space key
5. Navigate options with arrow down, arrow up key

Expected Behavior

Voiceover read options
example) https://material.angular.io/components/select/overview in Chrome

chrome.reading2.mov

Actual Behavior

Voiceover does not read options

safari.not.reading.options.mov

Environment

• Angular: v11, v12, v13
• CDK/Material: Material
• Browser(s): Safari
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[zarend]

Confirmed that I can reproduce.

Safari Version 15.4 (17613.1.17.1.13)
MacOS 12.3.1 (21E258)

[zarend]

Action item to address this issue is to confirm that we're following WAI ARIA best practices for combobox and listbox. Some of the ARIA we have for select does not look quite right to me. There's likely an issue with how we add an extra aria description to read the value of a select option. That seems suspicious to me. IIRC we added that to work around an issue with NVDA and I suspect that work-around is either not necessary or incorrect.

[zarend]

Confirming that I can still reproduce this on 15.1.0.

macos 13.1 (22C65); Chrome Version 109.0.5414.87 (Official Build) (x86_64)

[zarend]

Hello,

Thank you for reporting this issue. I spent more time testing this with VoiceOver + Safari. What seems to be happening is that VoiceOver does not move focus to the options when the select opence. Once I navigate to the options, VoiceOver will correctly read each option.

-Zach

[joachimbutz]

Starting from the same observation as #24390 (comment) I tried to move focus to the options panel programmatically, which (surprisingly) worked in my case.

<mat-select
      ...
      #mySelect
      (openedChange)="voiceOverWorkaround($event)"
    >

voiceOverWorkaround($event: boolean) {
    let selectPanelAriaLabelledby = this.mySelect?._getPanelAriaLabelledby();
    let selectPanelElements = this.document.querySelectorAll(
      `[role="listbox"][aria-labelledby="${selectPanelAriaLabelledby}"]`,
    );
    let selectPanel = selectPanelElements.item(0);
    let selectPanelHtml = selectPanel as HTMLElement;
    selectPanelHtml.focus();
  }