Skip to content

Commit 1e8f3f6

Browse files
committed
fix(button-toggle): clear static aria attributes from host nodes
Follow-up from #16938. Clears the aria-* attributes from the host node so that they're not duplicated with the underlying input.
1 parent 658896f commit 1e8f3f6

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
@@ -271,6 +271,7 @@ describe('MatButtonToggle without forms', () => {
271271
ButtonToggleWithTabindex,
272272
ButtonToggleWithStaticName,
273273
ButtonToggleWithStaticChecked,
274+
ButtonToggleWithStaticAriaAttributes,
274275
],
275276
});
276277

@@ -756,6 +757,16 @@ describe('MatButtonToggle without forms', () => {
756757
fixture.detectChanges();
757758
expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
758759
});
760+
761+
it('should clear the static aria from the host node', () => {
762+
const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttributes);
763+
fixture.detectChanges();
764+
const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-button-toggle');
765+
766+
expect(hostNode.hasAttribute('aria-label')).toBe(false);
767+
expect(hostNode.hasAttribute('aria-labelledby')).toBe(false);
768+
});
769+
759770
});
760771

761772
describe('with provided aria-labelledby ', () => {
@@ -1073,3 +1084,11 @@ class ButtonToggleWithStaticChecked {
10731084
@ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup;
10741085
@ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
10751086
}
1087+
1088+
1089+
@Component({
1090+
template: `
1091+
<mat-button-toggle aria-label="Toggle me" aria-labelledby="something"></mat-button-toggle>
1092+
`
1093+
})
1094+
class ButtonToggleWithStaticAriaAttributes {}

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

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

0 commit comments

Comments
 (0)