From 44a46ca6004fa125be6cda2a1cce152f4079873b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 28 Jan 2021 18:11:21 +0100
Subject: [PATCH] fix(material/select): VoiceOver reading out blank space

We have some inline elements inside `mat-select` which may collapse if their text bindings are
empty. To work around it we replace the content with a blank space. The problem is that
VoiceOver seems to read out this text.

These changes fix the issue by keeping the height of the elements using CSS instead.

Fixes #21725.
---
 src/material-experimental/mdc-select/select.html | 4 ++--
 src/material-experimental/mdc-select/select.scss | 9 +++++++++
 src/material/select/select.html                  | 4 ++--
 src/material/select/select.scss                  | 9 +++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html
index ec8d4f773f4f..5cec29e80193 100644
--- a/src/material-experimental/mdc-select/select.html
+++ b/src/material-experimental/mdc-select/select.html
@@ -14,9 +14,9 @@
      #fallbackOverlayOrigin="cdkOverlayOrigin"
      #trigger>
   <div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
-    <span class="mat-mdc-select-placeholder" *ngSwitchCase="true">{{placeholder || '\u00A0'}}</span>
+    <span class="mat-mdc-select-placeholder mat-mdc-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
     <span class="mat-mdc-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
-      <span *ngSwitchDefault>{{triggerValue || '\u00A0'}}</span>
+      <span class="mat-mdc-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>
       <ng-content select="mat-select-trigger" *ngSwitchCase="true"></ng-content>
     </span>
   </div>
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index f414c74951ff..2b222c1bbf58 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -144,3 +144,12 @@ $scale: 0.75 !default;
     }
   }
 }
+
+// Used to prevent inline elements from collapsing if their text bindings
+// become empty. This is preferrable to inserting a blank space, because the
+// space can be read out by screen readers (see #21725).
+.mat-mdc-select-min-line:empty::before {
+  content: ' ';
+  white-space: pre;
+  width: 1px;
+}
diff --git a/src/material/select/select.html b/src/material/select/select.html
index a0c66b30ac8d..196aa483ccef 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -14,9 +14,9 @@
      #origin="cdkOverlayOrigin"
      #trigger>
   <div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
-    <span class="mat-select-placeholder" *ngSwitchCase="true">{{placeholder || '\u00A0'}}</span>
+    <span class="mat-select-placeholder mat-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
     <span class="mat-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
-      <span *ngSwitchDefault>{{triggerValue || '\u00A0'}}</span>
+      <span class="mat-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>
       <ng-content select="mat-select-trigger" *ngSwitchCase="true"></ng-content>
     </span>
   </div>
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index d5cd1f6e937b..453580221133 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -147,3 +147,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
     display: block;
   }
 }
+
+// Used to prevent inline elements from collapsing if their text bindings
+// become empty. This is preferrable to inserting a blank space, because the
+// space can be read out by screen readers (see #21725).
+.mat-select-min-line:empty::before {
+  content: ' ';
+  white-space: pre;
+  width: 1px;
+}