Skip to content

Commit

Permalink
fix(material/slide-toggle): clear name from host node (#15505)
Browse files Browse the repository at this point in the history
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`.

(cherry picked from commit 5db1df0)
  • Loading branch information
crisbeto committed Mar 9, 2022
1 parent 597d78a commit 911d6b7
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,12 @@ describe('MDC-based MatSlideToggle with forms', () => {
expect(slideToggleEl.classList).toContain('ng-invalid');
expect(slideToggleEl.classList).not.toContain('ng-valid');
}));

it('should clear static name attribute from the slide toggle host node', () => {
const hostNode = fixture.nativeElement.querySelector('.mat-mdc-slide-toggle');
expect(buttonElement.getAttribute('name')).toBeTruthy();
expect(hostNode.hasAttribute('name')).toBe(false);
});
});

describe('with model and change event', () => {
Expand Down
1 change: 1 addition & 0 deletions src/material-experimental/mdc-slide-toggle/slide-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export class MatSlideToggleChange {
// Needs to be removed since it causes some a11y issues (see #21266).
'[attr.tabindex]': 'null',
'[attr.aria-label]': 'null',
'[attr.name]': 'null',
'[attr.aria-labelledby]': 'null',
'[class.mat-primary]': 'color === "primary"',
'[class.mat-accent]': 'color !== "primary" && color !== "warn"',
Expand Down
6 changes: 6 additions & 0 deletions src/material/slide-toggle/slide-toggle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -872,6 +872,12 @@ describe('MatSlideToggle with forms', () => {
expect(slideToggleEl.classList).toContain('ng-invalid');
expect(slideToggleEl.classList).not.toContain('ng-valid');
}));

it('should clear static name attribute from the slide toggle host node', () => {
const hostNode = fixture.nativeElement.querySelector('.mat-slide-toggle');
expect(inputElement.getAttribute('name')).toBeTruthy();
expect(hostNode.hasAttribute('name')).toBe(false);
});
});

describe('with model and change event', () => {
Expand Down
1 change: 1 addition & 0 deletions src/material/slide-toggle/slide-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ const _MatSlideToggleBase = mixinTabIndex(
'[attr.tabindex]': 'null',
'[attr.aria-label]': 'null',
'[attr.aria-labelledby]': 'null',
'[attr.name]': 'null',
'[class.mat-checked]': 'checked',
'[class.mat-disabled]': 'disabled',
'[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
Expand Down

0 comments on commit 911d6b7

Please sign in to comment.