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 666452411175..2847465f10f6 100644 --- a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts +++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts @@ -17,6 +17,7 @@ describe('MatSlideToggle without forms', () => { SlideToggleWithoutLabel, SlideToggleProjectedLabel, TextBindingComponent, + SlideToggleWithStaticAriaAttributes, ] }); @@ -378,6 +379,15 @@ describe('MatSlideToggle without forms', () => { expect(testComponent.toggleTriggered).toBe(2, 'Expect toggle twice'); expect(testComponent.dragTriggered).toBe(0); })); + + it('should clear static aria attributes from the host node', () => { + const fixture = TestBed.createComponent(SlideToggleWithStaticAriaAttributes); + fixture.detectChanges(); + + const host: HTMLElement = fixture.nativeElement.querySelector('mat-slide-toggle'); + expect(host.hasAttribute('aria-label')).toBe(false); + expect(host.hasAttribute('aria-labelledby')).toBe(false); + }); }); describe('MatSlideToggle with forms', () => { @@ -804,3 +814,10 @@ class SlideToggleProjectedLabel {} class TextBindingComponent { text: string = 'Some text'; } + +@Component({ + template: ` + + ` +}) +class SlideToggleWithStaticAriaAttributes {} diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.ts index d7cfe2773b52..5a3409597e2b 100644 --- a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts +++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.ts @@ -62,6 +62,8 @@ export class MatSlideToggleChange { 'class': 'mat-mdc-slide-toggle', '[id]': 'id', '[attr.tabindex]': 'null', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', '[class.mat-primary]': 'color == "primary"', '[class.mat-accent]': 'color == "accent"', '[class.mat-warn]': 'color == "warn"', diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index 1f15c3410cda..225f512a07c1 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -32,6 +32,7 @@ describe('MatSlideToggle without forms', () => { SlideToggleWithoutLabel, SlideToggleProjectedLabel, TextBindingComponent, + SlideToggleWithStaticAriaAttributes, ], providers: [ {provide: HAMMER_GESTURE_CONFIG, useFactory: () => gestureConfig = new TestGestureConfig()}, @@ -767,6 +768,15 @@ describe('MatSlideToggle without forms', () => { .toContain('mat-slide-toggle-bar-no-side-margin'); }); }); + + it('should clear static aria attributes from the host node', () => { + const fixture = TestBed.createComponent(SlideToggleWithStaticAriaAttributes); + fixture.detectChanges(); + + const host: HTMLElement = fixture.nativeElement.querySelector('mat-slide-toggle'); + expect(host.hasAttribute('aria-label')).toBe(false); + expect(host.hasAttribute('aria-labelledby')).toBe(false); + }); }); describe('MatSlideToggle with forms', () => { @@ -1192,3 +1202,10 @@ class SlideToggleProjectedLabel {} class TextBindingComponent { text: string = 'Some text'; } + +@Component({ + template: ` + + ` +}) +class SlideToggleWithStaticAriaAttributes {} diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts index d9e291408902..d7956dcf86e5 100644 --- a/src/material/slide-toggle/slide-toggle.ts +++ b/src/material/slide-toggle/slide-toggle.ts @@ -87,6 +87,8 @@ const _MatSlideToggleMixinBase: '[id]': 'id', // Needs to be `-1` so it can still receive programmatic focus. '[attr.tabindex]': 'disabled ? null : -1', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', '[class.mat-checked]': 'checked', '[class.mat-disabled]': 'disabled', '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',