feat(slider): support specifying tabindex (#7848)

* Provides a consistent API for developers to specify the tabIndex for the slider
* Disabled sliders are no longer tabbable (for accessibility reasons)

Author: devversion

src/lib/slider/slider.spec.ts

@@ -39,6 +39,8 @@ describe('MatSlider without forms', () => {
         SliderWithValueGreaterThanMax,
         SliderWithChangeHandler,
         SliderWithDirAndInvert,
+        SliderWithTabIndexBinding,
+        SliderWithNativeTabindexAttr,
         VerticalSlider,
       ],
       providers: [
@@ -268,6 +270,10 @@ describe('MatSlider without forms', () => {
     it ('should leave thumb gap', () => {
       expect(trackFillElement.style.transform).toContain('translateX(-7px)');
     });
+
+    it('should disable tabbing to the slider', () => {
+      expect(sliderNativeElement.tabIndex).toBe(-1);
+    });
   });
 
   describe('slider with set min and max', () => {
@@ -1163,6 +1169,33 @@ describe('MatSlider without forms', () => {
       expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('vertical');
     });
   });
+
+  describe('tabindex', () => {
+
+    it('should allow setting the tabIndex through binding', () => {
+      const fixture = TestBed.createComponent(SliderWithTabIndexBinding);
+      fixture.detectChanges();
+
+      const slider = fixture.debugElement.query(By.directive(MatSlider)).componentInstance;
+
+      expect(slider.tabIndex).toBe(0, 'Expected the tabIndex to be set to 0 by default.');
+
+      fixture.componentInstance.tabIndex = 3;
+      fixture.detectChanges();
+
+      expect(slider.tabIndex).toBe(3, 'Expected the tabIndex to have been changed.');
+    });
+
+    it('should detect the native tabindex attribute', () => {
+      const fixture = TestBed.createComponent(SliderWithNativeTabindexAttr);
+      fixture.detectChanges();
+
+      const slider = fixture.debugElement.query(By.directive(MatSlider)).componentInstance;
+
+      expect(slider.tabIndex)
+        .toBe(5, 'Expected the tabIndex to be set to the value of the native attribute.');
+    });
+  });
 });
 
 describe('MatSlider with forms module', () => {
@@ -1465,6 +1498,22 @@ class VerticalSlider {
   invert = false;
 }
 
+@Component({
+  template: `<mat-slider [tabIndex]="tabIndex"></mat-slider>`,
+  styles: [styles],
+})
+class SliderWithTabIndexBinding {
+  tabIndex: number;
+}
+
+@Component({
+  template: `<mat-slider tabindex="5"></mat-slider>`,
+  styles: [styles],
+})
+class SliderWithNativeTabindexAttr {
+  tabIndex: number;
+}
+
 /**
  * Dispatches a click event sequence (consisting of moueseenter, click) from an element.
  * Note: The mouse event truncates the position for the click.

src/lib/slider/slider.ts

@@ -20,6 +20,7 @@ import {
   UP_ARROW,
 } from '@angular/cdk/keycodes';
 import {
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -40,8 +41,10 @@ import {
   CanColor,
   CanDisable,
   HammerInput,
+  HasTabIndex,
   mixinColor,
   mixinDisabled,
+  mixinTabIndex,
 } from '@angular/material/core';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -85,7 +88,8 @@ export class MatSliderChange {
 export class MatSliderBase {
   constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
 }
-export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'accent');
+export const _MatSliderMixinBase =
+  mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent'));
 
 /**
  * Allows users to select from a range of values by moving the slider thumb. It is similar in
@@ -108,7 +112,7 @@ export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'acc
     '(slidestart)': '_onSlideStart($event)',
     'class': 'mat-slider',
     'role': 'slider',
-    'tabindex': '0',
+    '[tabIndex]': 'tabIndex',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuemin]': 'min',
@@ -126,13 +130,13 @@ export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'acc
   },
   templateUrl: 'slider.html',
   styleUrls: ['slider.css'],
-  inputs: ['disabled', 'color'],
+  inputs: ['disabled', 'color', 'tabIndex'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatSlider extends _MatSliderMixinBase
-    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit {
+    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit, HasTabIndex {
   /** Whether the slider is inverted. */
   @Input()
   get invert() { return this._invert; }
@@ -418,8 +422,11 @@ export class MatSlider extends _MatSliderMixinBase
               elementRef: ElementRef,
               private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Directionality) {
+              @Optional() private _dir: Directionality,
+              @Attribute('tabindex') tabIndex: string) {
     super(renderer, elementRef);
+
+    this.tabIndex = parseInt(tabIndex) || 0;
   }
 
   ngOnInit() {