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"',