Skip to content

Commit 4e72ac6

Browse files
committed
fix(select): wrong option amount being read out by NVDA
Fixes an issue that caused the wrong amount of options to be read out by NVDA. E.g. if the select has 3 options, NVDA reads out "<value> selected, 2 of 4". The issue seems to come from the fact that NVDA considers the trigger as one of the options, potentially because it's clickable.
1 parent 38b365c commit 4e72ac6

File tree

2 files changed

+16
-1
lines changed

2 files changed

+16
-1
lines changed

src/lib/select/select.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
<div class="mat-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
1+
<div
2+
cdk-overlay-origin
3+
class="mat-select-trigger"
4+
aria-hidden="true"
5+
(click)="toggle()"
6+
#origin="cdkOverlayOrigin"
7+
#trigger>
28
<span
39
class="mat-select-placeholder"
410
[class.mat-floating-placeholder]="_selectionModel.hasValue()"

src/lib/select/select.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1729,6 +1729,15 @@ describe('MdSelect', () => {
17291729
expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
17301730
});
17311731

1732+
// Having `aria-hidden` on the trigger avoids issues where
1733+
// screen readers read out the wrong amount of options.
1734+
it('should set aria-hidden on the trigger element', () => {
1735+
const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
1736+
1737+
expect(trigger.getAttribute('aria-hidden'))
1738+
.toBe('true', 'Expected aria-hidden to be true when the select is open.');
1739+
});
1740+
17321741
});
17331742

17341743
describe('for options', () => {

0 commit comments

Comments
 (0)