Skip to content

Commit

Permalink
fix(material/form-field): fix duplicate announcement of form controls
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
zarend committed Jul 6, 2023
1 parent a320042 commit ba86c59
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 19 deletions.
6 changes: 1 addition & 5 deletions src/material/form-field/form-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,13 @@
as part of the label, and we don't want to spend resources on walking through projected content
to set `aria-hidden`. Nor do we want to set `aria-labelledby` on every form control if we could
simply link the label to the control using the label `for` attribute.
*Note*: We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
read if it comes before the control in the DOM.
-->
<label matFormFieldFloatingLabel
[floating]="_shouldLabelFloat()"
[monitorResize]="_hasOutline()"
*ngIf="_hasFloatingLabel()"
[id]="_labelId"
[attr.for]="_control.id"
[attr.aria-owns]="_control.id">
[attr.for]="_control.id">
<ng-content select="mat-label"></ng-content>
<!--
We set the required marker as a separate element, in order to make it easier to target if
Expand Down
14 changes: 0 additions & 14 deletions src/material/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -188,20 +188,6 @@ describe('MatMdcInput without forms', () => {
expect(inputElement.id).toEqual(labelElement.getAttribute('for')!);
}));

it('should add aria-owns to the label for the associated control', fakeAsync(() => {
let fixture = createComponent(MatInputTextTestController);
fixture.detectChanges();

const inputElement: HTMLInputElement = fixture.debugElement.query(
By.css('input'),
)!.nativeElement;
const labelElement: HTMLInputElement = fixture.debugElement.query(
By.css('label'),
)!.nativeElement;

expect(labelElement.getAttribute('aria-owns')).toBe(inputElement.id);
}));

it('should add aria-required reflecting the required state', fakeAsync(() => {
const fixture = createComponent(MatInputWithRequired);
fixture.detectChanges();
Expand Down

0 comments on commit ba86c59

Please sign in to comment.