fix(slide-toggle): clear static aria attributes from host nodes (#17085)

Follow-up from #16938. Clears the `aria-*` attributes from the host node so that they're not duplicated with the underlying `input`.
angular · Sep 18, 2019 · fb390fb · fb390fb
1 parent 534b9c2
commit fb390fb
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 0 deletions.
diff --git 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: `
+    <mat-slide-toggle aria-label="Slide toggle" aria-labelledby="something"></mat-slide-toggle>
+  `
+})
+class SlideToggleWithStaticAriaAttributes {}
diff --git 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
@@ -30,6 +30,7 @@ describe('MatSlideToggle without forms', () => {
         SlideToggleWithoutLabel,
         SlideToggleProjectedLabel,
         TextBindingComponent,
+        SlideToggleWithStaticAriaAttributes,
       ],
       providers: [
         {
@@ -495,6 +496,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', () => {
@@ -920,3 +930,10 @@ class SlideToggleProjectedLabel {}
 class TextBindingComponent {
   text: string = 'Some text';
 }
+
+@Component({
+  template: `
+    <mat-slide-toggle aria-label="Slide toggle" aria-labelledby="something"></mat-slide-toggle>
+  `
+})
+class SlideToggleWithStaticAriaAttributes {}
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
@@ -86,6 +86,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"',