Skip to content

Commit ba86c59

Browse files
committed
fix(material/form-field): fix duplicate announcement of form controls
Fix duplicate screen reader announcement of form controls. Remove the aria-owns from the form label. Commit 4191b4d added aria-owns on the label to work around issue in JAWS and NVDA. That commit is from 2017, and it appears the JAWS and NVDA issues have been fixed.
1 parent a320042 commit ba86c59

File tree

2 files changed

+1
-19
lines changed

2 files changed

+1
-19
lines changed

src/material/form-field/form-field.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,13 @@
1010
as part of the label, and we don't want to spend resources on walking through projected content
1111
to set `aria-hidden`. Nor do we want to set `aria-labelledby` on every form control if we could
1212
simply link the label to the control using the label `for` attribute.
13-
14-
*Note*: We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
15-
read if it comes before the control in the DOM.
1613
-->
1714
<label matFormFieldFloatingLabel
1815
[floating]="_shouldLabelFloat()"
1916
[monitorResize]="_hasOutline()"
2017
*ngIf="_hasFloatingLabel()"
2118
[id]="_labelId"
22-
[attr.for]="_control.id"
23-
[attr.aria-owns]="_control.id">
19+
[attr.for]="_control.id">
2420
<ng-content select="mat-label"></ng-content>
2521
<!--
2622
We set the required marker as a separate element, in order to make it easier to target if

src/material/input/input.spec.ts

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -188,20 +188,6 @@ describe('MatMdcInput without forms', () => {
188188
expect(inputElement.id).toEqual(labelElement.getAttribute('for')!);
189189
}));
190190

191-
it('should add aria-owns to the label for the associated control', fakeAsync(() => {
192-
let fixture = createComponent(MatInputTextTestController);
193-
fixture.detectChanges();
194-
195-
const inputElement: HTMLInputElement = fixture.debugElement.query(
196-
By.css('input'),
197-
)!.nativeElement;
198-
const labelElement: HTMLInputElement = fixture.debugElement.query(
199-
By.css('label'),
200-
)!.nativeElement;
201-
202-
expect(labelElement.getAttribute('aria-owns')).toBe(inputElement.id);
203-
}));
204-
205191
it('should add aria-required reflecting the required state', fakeAsync(() => {
206192
const fixture = createComponent(MatInputWithRequired);
207193
fixture.detectChanges();

0 commit comments

Comments
 (0)