Skip to content

Commit 5db1df0

Browse files
authored
fix(material/slide-toggle): clear name from host node (#15505)
Along the same lines as #15422 and #15368. Clears the static `name` attribute from the slide toggle's host node in order to prevent both the underlying input and the host from showing up in `document.getElementsByName` or `By.name`.
1 parent f91b98f commit 5db1df0

File tree

4 files changed

+14
-0
lines changed

4 files changed

+14
-0
lines changed

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -755,6 +755,12 @@ describe('MDC-based MatSlideToggle with forms', () => {
755755
expect(slideToggleEl.classList).toContain('ng-invalid');
756756
expect(slideToggleEl.classList).not.toContain('ng-valid');
757757
}));
758+
759+
it('should clear static name attribute from the slide toggle host node', () => {
760+
const hostNode = fixture.nativeElement.querySelector('.mat-mdc-slide-toggle');
761+
expect(buttonElement.getAttribute('name')).toBeTruthy();
762+
expect(hostNode.hasAttribute('name')).toBe(false);
763+
});
758764
});
759765

760766
describe('with model and change event', () => {

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export class MatSlideToggleChange {
6969
// Needs to be removed since it causes some a11y issues (see #21266).
7070
'[attr.tabindex]': 'null',
7171
'[attr.aria-label]': 'null',
72+
'[attr.name]': 'null',
7273
'[attr.aria-labelledby]': 'null',
7374
'[class.mat-primary]': 'color === "primary"',
7475
'[class.mat-accent]': 'color !== "primary" && color !== "warn"',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -872,6 +872,12 @@ describe('MatSlideToggle with forms', () => {
872872
expect(slideToggleEl.classList).toContain('ng-invalid');
873873
expect(slideToggleEl.classList).not.toContain('ng-valid');
874874
}));
875+
876+
it('should clear static name attribute from the slide toggle host node', () => {
877+
const hostNode = fixture.nativeElement.querySelector('.mat-slide-toggle');
878+
expect(inputElement.getAttribute('name')).toBeTruthy();
879+
expect(hostNode.hasAttribute('name')).toBe(false);
880+
});
875881
});
876882

877883
describe('with model and change event', () => {

src/material/slide-toggle/slide-toggle.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ const _MatSlideToggleBase = mixinTabIndex(
8787
'[attr.tabindex]': 'null',
8888
'[attr.aria-label]': 'null',
8989
'[attr.aria-labelledby]': 'null',
90+
'[attr.name]': 'null',
9091
'[class.mat-checked]': 'checked',
9192
'[class.mat-disabled]': 'disabled',
9293
'[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',

0 commit comments

Comments
 (0)