fix(slide-toggle): label not being read out by screen reader on IE (#…

…14259) Fixes the label of a slide toggle not being read out by NVDA on IE, because the `label` element isn't pointing to the `input`.
angular · Dec 3, 2018 · 5264804 · 5264804
1 parent da3776f
commit 5264804
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
@@ -1,5 +1,4 @@
-<label class="mat-slide-toggle-label" #label>
-
+<label [attr.for]="inputId" class="mat-slide-toggle-label" #label>
   <div #toggleBar class="mat-slide-toggle-bar"
        [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">
 

diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -249,6 +249,12 @@ describe('MatSlideToggle without forms', () => {
       expect(inputElement.hasAttribute('aria-labelledby')).toBeFalsy();
     });
 
+    it('should set the `for` attribute to the id of the input element', () => {
+      expect(labelElement.getAttribute('for')).toBeTruthy();
+      expect(inputElement.getAttribute('id')).toBeTruthy();
+      expect(labelElement.getAttribute('for')).toBe(inputElement.getAttribute('id'));
+    });
+
     it('should emit the new values properly', fakeAsync(() => {
       labelElement.click();
       fixture.detectChanges();