Skip to content

Commit 783d1ee

Browse files
crisbetoannieyw
authored andcommitted
fix(button-toggle): clear static aria attributes from host nodes (#17086)
Follow-up from #16938. Clears the aria-* attributes from the host node so that they're not duplicated with the underlying input. (cherry picked from commit b9756b9)
1 parent 4d98bd1 commit 783d1ee

File tree

2 files changed

+21
-0
lines changed

2 files changed

+21
-0
lines changed

src/material/button-toggle/button-toggle.spec.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ describe('MatButtonToggle without forms', () => {
270270
ButtonToggleWithTabindex,
271271
ButtonToggleWithStaticName,
272272
ButtonToggleWithStaticChecked,
273+
ButtonToggleWithStaticAriaAttributes,
273274
],
274275
});
275276

@@ -751,6 +752,16 @@ describe('MatButtonToggle without forms', () => {
751752
fixture.detectChanges();
752753
expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
753754
});
755+
756+
it('should clear the static aria from the host node', () => {
757+
const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttributes);
758+
fixture.detectChanges();
759+
const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-button-toggle');
760+
761+
expect(hostNode.hasAttribute('aria-label')).toBe(false);
762+
expect(hostNode.hasAttribute('aria-labelledby')).toBe(false);
763+
});
764+
754765
});
755766

756767
describe('with provided aria-labelledby ', () => {
@@ -1068,3 +1079,11 @@ class ButtonToggleWithStaticChecked {
10681079
@ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup;
10691080
@ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
10701081
}
1082+
1083+
1084+
@Component({
1085+
template: `
1086+
<mat-button-toggle aria-label="Toggle me" aria-labelledby="something"></mat-button-toggle>
1087+
`
1088+
})
1089+
class ButtonToggleWithStaticAriaAttributes {}

src/material/button-toggle/button-toggle.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,8 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
402402
// Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`,
403403
// but can still receive focus from things like cdkFocusInitial.
404404
'[attr.tabindex]': '-1',
405+
'[attr.aria-label]': 'null',
406+
'[attr.aria-labelledby]': 'null',
405407
'[attr.id]': 'id',
406408
'[attr.name]': 'null',
407409
'(focus)': 'focus()',

0 commit comments

Comments
 (0)