fix(material/select): empty space read out by VoiceOver on Chrome (#2…

…4741)

We use an empty space to prevent the select from collapsing when it doesn't have a value, but the approach we were using was being read out as a blank space by VoiceOver on Chrome. These changes switch to using `visibility: hidden` so that it isn't read out.

Fixes #24731.

(cherry picked from commit 333f3a4)

src/material-experimental/mdc-select/select.scss

@@ -171,8 +171,9 @@ $scale: 0.75 !default;
   content: ' ';
   white-space: pre;
   width: 1px;
-
-  // Prevents some browsers from rendering the element in high contrast mode.
   display: inline-block;
-  opacity: 0;
+
+  // Prevents some browsers from rendering the element in high contrast mode. Use `visibility`
+  // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter.
+  visibility: hidden;
 }

src/material/select/select.scss

@@ -167,8 +167,9 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
   content: ' ';
   white-space: pre;
   width: 1px;
-
-  // Prevents some browsers from rendering the element in high contrast mode.
   display: inline-block;
-  opacity: 0;
+
+  // Prevents some browsers from rendering the element in high contrast mode. Use `visibility`
+  // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter.
+  visibility: hidden;
 }