fix(slider): add aria-orientation (#4602)

Author: mmalerba

src/demo-app/slider/slider-demo.html

@@ -1,55 +1,60 @@
 <h1>Default Slider</h1>
-Label <md-slider #slidey></md-slider>
+Label <md-slider #slidey aria-label="Basic slider"></md-slider>
 {{slidey.value}}
 
 <h1>Colors</h1>
-<md-slider color="primary" value="50" thumbLabel></md-slider>
-<md-slider color="accent" value="50" thumbLabel></md-slider>
-<md-slider color="warn" value="50" thumbLabel></md-slider>
+<md-slider color="primary" value="50" thumbLabel aria-label="Primary color slider"></md-slider>
+<md-slider color="accent" value="50" thumbLabel aria-label="Accent color slider"></md-slider>
+<md-slider color="warn" value="50" thumbLabel aria-label="Warn color slider"></md-slider>
 
 <h1>Slider with Min and Max</h1>
-<input [(ngModel)]="min">
-<md-slider [min]="min" [max]="max" tickInterval="5" #slider2></md-slider>
+<input [(ngModel)]="min" type="number">
+<md-slider [min]="min" [max]="max" tickInterval="5" #slider2 aria-label="Min & max slider">
+</md-slider>
 {{slider2.value}}
-<input [(ngModel)]="max">
+<input [(ngModel)]="max" type="number">
 
 <h1>Disabled Slider</h1>
-<md-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1"></md-slider>
-<input [(ngModel)]="disabledValue">
+<md-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
+</md-slider>
+<input [(ngModel)]="disabledValue" type="number">
 
 <h1>Slider with set value</h1>
-<md-slider value="43"></md-slider>
+<md-slider value="43" aria-label="Initial value slider"></md-slider>
 
 <h1>Slider with step defined</h1>
-<md-slider min="1" max="100" step="20" #slider5></md-slider>
+<md-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></md-slider>
 {{slider5.value}}
 
 <h1>Slider with set tick interval</h1>
-<md-slider tickInterval="auto"></md-slider>
-<md-slider tickInterval="9"></md-slider>
+<md-slider tickInterval="auto" aria-label="Slider with auto ticks"></md-slider>
+<md-slider tickInterval="9" aria-label="Slider with ticks"></md-slider>
 
 <h1>Slider with Thumb Label</h1>
-<md-slider thumbLabel></md-slider>
+<md-slider thumbLabel aria-label="Slider with thumb label"></md-slider>
 
 <h1>Slider with one-way binding</h1>
-<md-slider [value]="val" step="40"></md-slider>
-<input [(ngModel)]="val">
+<md-slider [value]="val" step="40" aria-label="Slider with value binding"></md-slider>
+<input [(ngModel)]="val" type="number">
 
 <h1>Slider with two-way binding</h1>
-<md-slider [(ngModel)]="demo" step="40"></md-slider>
-<input [(ngModel)]="demo">
+<md-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></md-slider>
+<input [(ngModel)]="demo" type="number">
 
 <h1>Inverted slider</h1>
-<md-slider invert value="50" tickInterval="5"></md-slider>
+<md-slider invert value="50" tickInterval="5" aria-label="Inverted slider"></md-slider>
 
 <h1>Vertical slider</h1>
-<md-slider vertical thumbLabel tickInterval="auto" value="50"></md-slider>
+<md-slider vertical thumbLabel tickInterval="auto" value="50" aria-label="Vertical slider">
+</md-slider>
 
 <h1>Inverted vertical slider</h1>
-<md-slider vertical invert thumbLabel tickInterval="auto" value="50"></md-slider>
+<md-slider vertical invert thumbLabel tickInterval="auto" value="50"
+           aria-label="Inverted vertical slider">
+</md-slider>
 
 <md-tab-group>
   <md-tab label="One">
-    <md-slider min="1" max="5" value="3"></md-slider>
+    <md-slider min="1" max="5" value="3" aria-label="Slider in a tab"></md-slider>
   </md-tab>
 </md-tab-group>

src/lib/slider/slider.spec.ts

@@ -154,6 +154,10 @@ describe('MdSlider', () => {
       // Some browsers use '0' and some use '0px', so leave off the closing paren.
       expect(trackFillElement.style.transform).toContain('translateX(0');
     });
+
+    it('should have aria-orientation horizontal', () => {
+      expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('horizontal');
+    });
   });
 
   describe('disabled slider', () => {
@@ -1156,6 +1160,10 @@ describe('MdSlider', () => {
 
       expect(trackFillElement.style.transform).toContain('scaleY(0.39)');
     });
+
+    it('should have aria-orientation vertical', () => {
+      expect(sliderNativeElement.getAttribute('aria-orientation')).toEqual('vertical');
+    });
   });
 });
 

src/lib/slider/slider.ts

@@ -91,6 +91,7 @@ export const _MdSliderMixinBase = mixinDisabled(MdSliderBase);
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuemin]': 'min',
     '[attr.aria-valuenow]': 'value',
+    '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
     '[class.mat-primary]': 'color == "primary"',
     '[class.mat-accent]': 'color != "primary" && color != "warn"',
     '[class.mat-warn]': 'color == "warn"',