wip

Author: jelbourn

Diff for: src/material-experimental/mdc-select/select.html

@@ -1,4 +1,14 @@
+<!--
+ Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
+ While aria-owns is not required for the ARIA 1.2 `role="combobox"` interaction pattern,
+ it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
+ element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents
+ VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
+ Using `aria-owns` re-parents the select overlay so that it works again.
+ See https://github.com/angular/components/issues/20694
+-->
 <div cdk-overlay-origin
+     [attr.aria-owns]="panelOpen ? id + '-panel' : null"
      class="mat-mdc-select-trigger"
      (click)="toggle()"
      #fallbackOverlayOrigin="cdkOverlayOrigin"

Diff for: src/material-experimental/mdc-select/select.spec.ts

@@ -196,16 +196,17 @@ describe('MDC-based MatSelect', () => {
           expect(ariaControls).toBe(document.querySelector('.mat-mdc-select-panel')!.id);
         }));
 
-        it('should point the aria-owns attribute to the listbox', fakeAsync(() => {
-          expect(select.hasAttribute('aria-owns')).toBe(false);
+        it('should point the aria-owns attribute to the listbox on the trigger', fakeAsync(() => {
+          const trigger = select.querySelector('.mat-mdc-select-trigger')!;
+          expect(trigger.hasAttribute('aria-owns')).toBe(false);
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
           flush();
 
-          const ariaControls = select.getAttribute('aria-owns');
-          expect(ariaControls).toBeTruthy();
-          expect(ariaControls).toBe(document.querySelector('.mat-mdc-select-panel')!.id);
+          const ariaOwns = trigger.getAttribute('aria-owns');
+          expect(ariaOwns).toBeTruthy();
+          expect(ariaOwns).toBe(document.querySelector('.mat-mdc-select-panel')!.id);
         }));
 
         it('should set aria-expanded based on the select open state', fakeAsync(() => {

Diff for: src/material-experimental/mdc-select/select.ts

@@ -62,13 +62,6 @@ export class MatSelectTrigger {}
     'class': 'mat-mdc-select',
     '[attr.id]': 'id',
     '[attr.tabindex]': 'tabIndex',
-    // While aria-owns is not required for the `role="combobox"` interaction pattern,
-    // it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
-    // element (e.g. a dialog). Without `aria-owns`, the `aria-modal` on a dialog would prevent
-    // VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
-    // Using `aria-owns` re-parents the select overlay so that it works again.
-    // See https://github.com/angular/components/issues/20694
-    '[attr.aria-owns]': 'panelOpen ? id + "-panel" : null',
     '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
     '[attr.aria-expanded]': 'panelOpen',
     '[attr.aria-label]': 'ariaLabel || null',

Diff for: src/material/select/select.html

@@ -1,4 +1,14 @@
+<!--
+ Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
+ While aria-owns is not required for the ARIA 1.2 `role="combobox"` interaction pattern,
+ it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
+ element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents
+ VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
+ Using `aria-owns` re-parents the select overlay so that it works again.
+ See https://github.com/angular/components/issues/20694
+-->
 <div cdk-overlay-origin
+     [attr.aria-owns]="panelOpen ? id + '-panel' : null"
      class="mat-select-trigger"
      (click)="toggle()"
      #origin="cdkOverlayOrigin"

Diff for: src/material/select/select.spec.ts

@@ -165,16 +165,17 @@ describe('MatSelect', () => {
           expect(ariaControls).toBe(document.querySelector('.mat-select-panel')!.id);
         }));
 
-        it('should point the aria-controls attribute to the listbox', fakeAsync(() => {
-          expect(select.hasAttribute('aria-owns')).toBe(false);
+        it('should point the aria-owns attribute to the listbox on the trigger', fakeAsync(() => {
+          const trigger = select.querySelector('.mat-select-trigger')!;
+          expect(trigger.hasAttribute('aria-owns')).toBe(false);
 
           fixture.componentInstance.select.open();
           fixture.detectChanges();
           flush();
 
-          const ariaControls = select.getAttribute('aria-owns');
-          expect(ariaControls).toBeTruthy();
-          expect(ariaControls).toBe(document.querySelector('.mat-select-panel')!.id);
+          const ariaOwns = trigger.getAttribute('aria-owns');
+          expect(ariaOwns).toBeTruthy();
+          expect(ariaOwns).toBe(document.querySelector('.mat-select-panel')!.id);
         }));
 
         it('should set aria-expanded based on the select open state', fakeAsync(() => {

Diff for: src/material/select/select.ts

@@ -1111,13 +1111,6 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
     'class': 'mat-select',
     '[attr.id]': 'id',
     '[attr.tabindex]': 'tabIndex',
-    // While aria-owns is not required for the `role="combobox"` interaction pattern,
-    // it fixes an issue with VoiceOver when the select appears inside of an `aria-model="true"`
-    // element (e.g. a dialog). Without `aria-owns`, the `aria-modal` on a dialog would prevent
-    // VoiceOver from "seeing" the select's listbox overlay for aria-activedescendant.
-    // Using `aria-owns` re-parents the select overlay so that it works again.
-    // See https://github.com/angular/components/issues/20694
-    '[attr.aria-owns]': 'panelOpen ? id + "-panel" : null',
     '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
     '[attr.aria-expanded]': 'panelOpen',
     '[attr.aria-label]': 'ariaLabel || null',