Skip to content

Commit 639f8c0

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 4778f49 commit 639f8c0

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
@@ -250,6 +250,7 @@ describe('MatButtonToggle without forms', () => {
250250
RepeatedButtonTogglesWithPreselectedValue,
251251
ButtonToggleWithTabindex,
252252
ButtonToggleWithStaticName,
253+
ButtonToggleWithStaticAriaAttributes,
253254
],
254255
});
255256

@@ -735,6 +736,16 @@ describe('MatButtonToggle without forms', () => {
735736
fixture.detectChanges();
736737
expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
737738
});
739+
740+
it('should clear the static aria from the host node', () => {
741+
const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttributes);
742+
fixture.detectChanges();
743+
const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-button-toggle');
744+
745+
expect(hostNode.hasAttribute('aria-label')).toBe(false);
746+
expect(hostNode.hasAttribute('aria-labelledby')).toBe(false);
747+
});
748+
738749
});
739750

740751
describe('with provided aria-labelledby ', () => {
@@ -1006,3 +1017,11 @@ class ButtonToggleWithTabindex {}
10061017
template: `<mat-button-toggle name="custom-name"></mat-button-toggle>`
10071018
})
10081019
class ButtonToggleWithStaticName {}
1020+
1021+
1022+
@Component({
1023+
template: `
1024+
<mat-button-toggle aria-label="Toggle me" aria-labelledby="something"></mat-button-toggle>
1025+
`
1026+
})
1027+
class ButtonToggleWithStaticAriaAttributes { }

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,8 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
391391
// Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`,
392392
// but can still receive focus from things like cdkFocusInitial.
393393
'[attr.tabindex]': '-1',
394+
'[attr.aria-label]': 'null',
395+
'[attr.aria-labelledby]': 'null',
394396
'[attr.id]': 'id',
395397
'[attr.name]': 'null',
396398
'(focus)': 'focus()',

0 commit comments

Comments
 (0)