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`.

Author: crisbeto

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()">
 

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();