From 3bed1393857ccbd0d9e5dc4c70b8487740ad6d77 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 10 Jan 2021 10:55:01 +0200 Subject: [PATCH] fix(material/slide-toggle): clear name from host node 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`. --- .../mdc-slide-toggle/slide-toggle.spec.ts | 6 ++++++ src/material-experimental/mdc-slide-toggle/slide-toggle.ts | 1 + src/material/slide-toggle/slide-toggle.spec.ts | 6 ++++++ src/material/slide-toggle/slide-toggle.ts | 1 + 4 files changed, 14 insertions(+) diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts index 3000d9473687..576c64a5bab4 100644 --- a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts +++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts @@ -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', () => { diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.ts index 24a6c632b1ae..ee18a8d3c1fb 100644 --- a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts +++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.ts @@ -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"', diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index fd6e137bed9f..230d60e80341 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -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', () => { diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts index 426a9a26ada0..7a8994419d82 100644 --- a/src/material/slide-toggle/slide-toggle.ts +++ b/src/material/slide-toggle/slide-toggle.ts @@ -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"',