From 01dcf7ee7dffa4933d207226f9ed668ee07e270d Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 5 Feb 2019 16:21:25 +0100
Subject: [PATCH] fix(slide-toggle): input element should use switch role
 (#15073)

Based on the discussion in https://github.com/angular/material2/issues/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.
---
 src/lib/slide-toggle/slide-toggle.html    | 2 ++
 src/lib/slide-toggle/slide-toggle.spec.ts | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index 6bcd73b860a..b1124d56ab9 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/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)"
diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index af615bb0bcf..6434fdc81dc 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -102,15 +102,18 @@ 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();
@@ -118,6 +121,7 @@ describe('MatSlideToggle without forms', () => {
 
       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', () => {