From 10bd6dae7be45fa450a465f42a82d1b39f47c49a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 19 Jan 2017 06:35:55 +0100
Subject: [PATCH] fix(slide-toggle): consistent naming of aria attributes
 (#2688)

* fix(slide-toggle): consistent naming of aria attributes

* Ensures that the slide-toggle uses consistent attribute naming.
Consistent with the native inputs and other Material components.

* Change back to tabIndex
---
 src/lib/slide-toggle/slide-toggle.spec.ts | 17 +++++++++++++++--
 src/lib/slide-toggle/slide-toggle.ts      |  4 ++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index a1cda1e46435..c554806b1878 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -189,6 +189,17 @@ describe('MdSlideToggle', () => {
       expect(inputElement.id).toMatch(/md-slide-toggle-[0-9]+-input/g);
     });
 
+    it('should forward the tabIndex to the underlying input', () => {
+      fixture.detectChanges();
+
+      expect(inputElement.tabIndex).toBe(0);
+
+      testComponent.slideTabindex = 4;
+      fixture.detectChanges();
+
+      expect(inputElement.tabIndex).toBe(4);
+    });
+
     it('should forward the specified name to the input', () => {
       testComponent.slideName = 'myName';
       fixture.detectChanges();
@@ -570,8 +581,9 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void
                      [id]="slideId"
                      [checked]="slideChecked"
                      [name]="slideName"
-                     [ariaLabel]="slideLabel"
-                     [ariaLabelledby]="slideLabelledBy"
+                     [aria-label]="slideLabel"
+                     [aria-labelledby]="slideLabelledBy"
+                     [tabIndex]="slideTabindex"
                      (change)="onSlideChange($event)"
                      (click)="onSlideClick($event)">
 
@@ -589,6 +601,7 @@ class SlideToggleTestApp {
   slideName: string;
   slideLabel: string;
   slideLabelledBy: string;
+  slideTabindex: number;
   lastEvent: MdSlideToggleChange;
 
   onSlideClick(event: Event) {}
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 41900bcc3000..30495632ab83 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -86,10 +86,10 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   @Input() tabIndex: number = 0;
 
   /** Used to set the aria-label attribute on the underlying input element. */
-  @Input() ariaLabel: string = null;
+  @Input('aria-label') ariaLabel: string = null;
 
   /** Used to set the aria-labelledby attribute on the underlying input element. */
-  @Input() ariaLabelledby: string = null;
+  @Input('aria-labelledby') ariaLabelledby: string = null;
 
   /** Whether the slide-toggle is disabled. */
   @Input()