Skip to content

Commit 8f4d839

Browse files
committed
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"
1 parent 567be4f commit 8f4d839

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
(click)="toggle()"
1414
#fallbackOverlayOrigin="cdkOverlayOrigin"
1515
#trigger>
16-
<div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
16+
<div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId" aria-hidden="true">
1717
<span class="mat-mdc-select-placeholder mat-mdc-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
1818
<span class="mat-mdc-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
1919
<span class="mat-mdc-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>

src/material/select/select.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
(click)="toggle()"
1414
#origin="cdkOverlayOrigin"
1515
#trigger>
16-
<div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
16+
<div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId" aria-hidden="true">
1717
<span class="mat-select-placeholder mat-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
1818
<span class="mat-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
1919
<span class="mat-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>

0 commit comments

Comments
 (0)