fix(material/select): NVDA reading out table when opening select on C…

…hrome

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

@@ -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 & {

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 & {