From 8f4d8399ed6595a0e7e1821e5b2a40c8d8947f58 Mon Sep 17 00:00:00 2001
From: u237004 <mario.haertwig@sbb.ch>
Date: Mon, 25 Apr 2022 16:46:48 +0200
Subject: [PATCH] fix(material/select): don't announce selected value multiple
 times

Screen readers announce the selected value multiple times. NVDA e.g. reads "Favorite food Pizza Pizza combobox Pizza collapsed".

1. First, the Screen Reader (SR) reads the value of the label (see 1st `aria-labelledby`): "Favorite food"
2. SR reads the content of the combobox: "Pizza"
3. SR reads the value of the combobox (see 2nd `aria-labelledby`): "Pizza"
4. SR reads the content of the combobox again: "Pizza"

To fix this, an `aria-hidden` attribute is added to the element containing the selected value. NVDA e.g. now reads "Favorite food Pizza combobox collapsed"
---
 src/material-experimental/mdc-select/select.html | 2 +-
 src/material/select/select.html                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html
index 3a1c41419414..93199cf891d1 100644
--- a/src/material-experimental/mdc-select/select.html
+++ b/src/material-experimental/mdc-select/select.html
@@ -13,7 +13,7 @@
      (click)="toggle()"
      #fallbackOverlayOrigin="cdkOverlayOrigin"
      #trigger>
-  <div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
+  <div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId" aria-hidden="true">
     <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 class="mat-mdc-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>
diff --git a/src/material/select/select.html b/src/material/select/select.html
index 196aa483ccef..70d461af2c48 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -13,7 +13,7 @@
      (click)="toggle()"
      #origin="cdkOverlayOrigin"
      #trigger>
-  <div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
+  <div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId" aria-hidden="true">
     <span class="mat-select-placeholder mat-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
     <span class="mat-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
       <span class="mat-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>