fix(slide-toggle): input element should use switch role (#15073)

Based on the discussion in #14949
and the feedback from a Google a11y expert on what role the underlying
input of the `slide-toggle` should use, we now explicitly specify the
new `switch` role.

This is should improve accessibility because practically the `slide-toggle`
is neither always causing an immediately effective value change
(like a `button`), nor does its value only become effective on form
submission (like a `role="checkbox`)

Read more here: https://www.w3.org/TR/wai-aria-1.1/#switch

Fixes #14949.

Author: devversion

src/lib/slide-toggle/slide-toggle.html

@@ -3,12 +3,14 @@
        [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">
 
     <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"
+           role="switch"
            [id]="inputId"
            [required]="required"
            [tabIndex]="tabIndex"
            [checked]="checked"
            [disabled]="disabled"
            [attr.name]="name"
+           [attr.aria-checked]="checked.toString()"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            (change)="_onChangeEvent($event)"

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -102,22 +102,26 @@ describe('MatSlideToggle without forms', () => {
 
     it('should correctly update the checked property', () => {
       expect(slideToggle.checked).toBeFalsy();
+      expect(inputElement.getAttribute('aria-checked')).toBe('false');
 
       testComponent.slideChecked = true;
       fixture.detectChanges();
 
       expect(inputElement.checked).toBeTruthy();
+      expect(inputElement.getAttribute('aria-checked')).toBe('true');
     });
 
     it('should set the toggle to checked on click', () => {
       expect(slideToggle.checked).toBe(false);
+      expect(inputElement.getAttribute('aria-checked')).toBe('false');
       expect(slideToggleElement.classList).not.toContain('mat-checked');
 
       labelElement.click();
       fixture.detectChanges();
 
       expect(slideToggleElement.classList).toContain('mat-checked');
       expect(slideToggle.checked).toBe(true);
+      expect(inputElement.getAttribute('aria-checked')).toBe('true');
     });
 
     it('should not trigger the click event multiple times', () => {