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

Author: devversion

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) {}

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