Skip to content

Commit bc44d03

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 653457e commit bc44d03

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

Diff for: src/material/select/select.html

+1-1
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" [attr.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)