From 51474d0e4fe4f15a2c04b647bb7a126da0234554 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 25 Aug 2021 21:06:36 +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 using flexbox to lay out the select trigger instead.

Fixes #21480.
---
 src/material-experimental/mdc-select/select.scss | 12 +++++++-----
 src/material/select/select.scss                  | 12 +++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index 30b01a8562e4..223b46b789ab 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -25,10 +25,12 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-trigger {
-  display: inline-table;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   .mat-mdc-select-disabled & {
     @include vendor-prefixes.user-select(none);
@@ -37,8 +39,6 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-value {
-  display: table-cell;
-  max-width: 0;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -52,8 +52,10 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-arrow-wrapper {
-  display: table-cell;
-  vertical-align: middle;
+  height: 24px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 
   // When used in a box appearance form-field the arrow should be shifted up 40%.
   .mat-form-field-appearance-fill & {
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index ea69d84327a1..b481935632fc 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -19,10 +19,12 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-trigger {
-  display: inline-table;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   .mat-select-disabled & {
     @include vendor-prefixes.user-select(none);
@@ -31,8 +33,6 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-value {
-  display: table-cell;
-  max-width: 0;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -44,8 +44,10 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 }
 
 .mat-select-arrow-wrapper {
-  display: table-cell;
-  vertical-align: middle;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 
   // When used in a box appearance form-field the arrow should be shifted up 50%.
   .mat-form-field-appearance-fill & {