From ba898fcc707ca6c1777e08e63e71d19e775abb6f Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 5 Jan 2021 11:07:55 +0200
Subject: [PATCH] fix(material/select): NVDA reading out table when opening
 select on Chrome

The `mat-select` trigger element has an `aria-owns` pointing to the overlay and
`display: inline-table` in its CSS. The combination of these two causes Chrome to infer
the element as a `table` which results in NVDA reading out "table" any time a select is
opened.

These changes resolve the issue by setting the element to `role="presentation"`. I've
tested out the change against NVDA and VoiceOver and it doesn't seem to affect
the accessibility of the select, apart from the "table" not being read out anymore.

Fixes #21480.
---
 src/material-experimental/mdc-select/select.html    | 6 +++++-
 src/material-experimental/mdc-select/select.spec.ts | 5 +++++
 src/material/select/select.html                     | 6 +++++-
 src/material/select/select.spec.ts                  | 5 +++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html
index ec8d4f773f4f..29036098017e 100644
--- a/src/material-experimental/mdc-select/select.html
+++ b/src/material-experimental/mdc-select/select.html
@@ -1,14 +1,18 @@
 <!--
- Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
+ Note 1: 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
+
+ Note 2: we set `role="presentation"`, because the trigger has some CSS that sets it to
+ `display: inline-table` which causes it to be read out as a table by NVDA on Chrome (see #21480).
 -->
 <div cdk-overlay-origin
      [attr.aria-owns]="panelOpen ? id + '-panel' : null"
+     role="presentation"
      class="mat-mdc-select-trigger"
      (click)="toggle()"
      #fallbackOverlayOrigin="cdkOverlayOrigin"
diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts
index 5763e2328b43..1e666efef446 100644
--- a/src/material-experimental/mdc-select/select.spec.ts
+++ b/src/material-experimental/mdc-select/select.spec.ts
@@ -175,6 +175,11 @@ describe('MDC-based MatSelect', () => {
           expect(ariaOwns).toBe(document.querySelector('.mat-mdc-select-panel')!.id);
         }));
 
+        it('should set the trigger as `role="presentation"`', fakeAsync(() => {
+          const trigger = select.querySelector('.mat-mdc-select-trigger')!;
+          expect(trigger.getAttribute('role')).toBe('presentation');
+        }));
+
         it('should set aria-expanded based on the select open state', fakeAsync(() => {
           expect(select.getAttribute('aria-expanded')).toBe('false');
 
diff --git a/src/material/select/select.html b/src/material/select/select.html
index a0c66b30ac8d..da62220368cf 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -1,14 +1,18 @@
 <!--
- Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.
+ Note 1: 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
+
+ Note 2: we set `role="presentation"`, because the trigger has some CSS that sets it to
+ `display: inline-table` which causes it to be read out as a table by NVDA on Chrome (see #21480).
 -->
 <div cdk-overlay-origin
      [attr.aria-owns]="panelOpen ? id + '-panel' : null"
+     role="presentation"
      class="mat-select-trigger"
      (click)="toggle()"
      #origin="cdkOverlayOrigin"
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index 73ca9fd7b3c5..3692491c8ad5 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -178,6 +178,11 @@ describe('MatSelect', () => {
           expect(ariaOwns).toBe(document.querySelector('.mat-select-panel')!.id);
         }));
 
+        it('should set the trigger as `role="presentation"`', fakeAsync(() => {
+          const trigger = select.querySelector('.mat-select-trigger')!;
+          expect(trigger.getAttribute('role')).toBe('presentation');
+        }));
+
         it('should set aria-expanded based on the select open state', fakeAsync(() => {
           expect(select.getAttribute('aria-expanded')).toBe('false');