@@ -20,6 +20,7 @@ import {
20
20
UP_ARROW ,
21
21
} from '@angular/cdk/keycodes' ;
22
22
import {
23
+ Attribute ,
23
24
ChangeDetectionStrategy ,
24
25
ChangeDetectorRef ,
25
26
Component ,
@@ -40,8 +41,10 @@ import {
40
41
CanColor ,
41
42
CanDisable ,
42
43
HammerInput ,
44
+ HasTabIndex ,
43
45
mixinColor ,
44
46
mixinDisabled ,
47
+ mixinTabIndex ,
45
48
} from '@angular/material/core' ;
46
49
import { Subscription } from 'rxjs/Subscription' ;
47
50
@@ -85,7 +88,8 @@ export class MatSliderChange {
85
88
export class MatSliderBase {
86
89
constructor ( public _renderer : Renderer2 , public _elementRef : ElementRef ) { }
87
90
}
88
- export const _MatSliderMixinBase = mixinColor ( mixinDisabled ( MatSliderBase ) , 'accent' ) ;
91
+ export const _MatSliderMixinBase =
92
+ mixinTabIndex ( mixinColor ( mixinDisabled ( MatSliderBase ) , 'accent' ) ) ;
89
93
90
94
/**
91
95
* 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
108
112
'(slidestart)' : '_onSlideStart($event)' ,
109
113
'class' : 'mat-slider' ,
110
114
'role' : 'slider' ,
111
- 'tabindex ' : '0 ' ,
115
+ '[tabIndex] ' : 'tabIndex ' ,
112
116
'[attr.aria-disabled]' : 'disabled' ,
113
117
'[attr.aria-valuemax]' : 'max' ,
114
118
'[attr.aria-valuemin]' : 'min' ,
@@ -126,13 +130,13 @@ export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'acc
126
130
} ,
127
131
templateUrl : 'slider.html' ,
128
132
styleUrls : [ 'slider.css' ] ,
129
- inputs : [ 'disabled' , 'color' ] ,
133
+ inputs : [ 'disabled' , 'color' , 'tabIndex' ] ,
130
134
encapsulation : ViewEncapsulation . None ,
131
135
preserveWhitespaces : false ,
132
136
changeDetection : ChangeDetectionStrategy . OnPush ,
133
137
} )
134
138
export class MatSlider extends _MatSliderMixinBase
135
- implements ControlValueAccessor , OnDestroy , CanDisable , CanColor , OnInit {
139
+ implements ControlValueAccessor , OnDestroy , CanDisable , CanColor , OnInit , HasTabIndex {
136
140
/** Whether the slider is inverted. */
137
141
@Input ( )
138
142
get invert ( ) { return this . _invert ; }
@@ -418,8 +422,11 @@ export class MatSlider extends _MatSliderMixinBase
418
422
elementRef : ElementRef ,
419
423
private _focusMonitor : FocusMonitor ,
420
424
private _changeDetectorRef : ChangeDetectorRef ,
421
- @Optional ( ) private _dir : Directionality ) {
425
+ @Optional ( ) private _dir : Directionality ,
426
+ @Attribute ( 'tabindex' ) tabIndex : string ) {
422
427
super ( renderer , elementRef ) ;
428
+
429
+ this . tabIndex = parseInt ( tabIndex ) || 0 ;
423
430
}
424
431
425
432
ngOnInit ( ) {
0 commit comments