From 0b5b6247f691110a6e3e9c16e53f355776ea3e39 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Thu, 18 May 2017 17:06:20 -0700
Subject: [PATCH] fix(slider): add aria-orientation (#4602)

---
 src/demo-app/slider/slider-demo.html | 49 +++++++++++++++-------------
 src/lib/slider/slider.spec.ts        |  8 +++++
 src/lib/slider/slider.ts             |  1 +
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index c739dc14619..2641eae973a 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/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>
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index de561657883..116a55687b2 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/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');
+    });
   });
 });
 
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index bb54d732cfc..d0860a84062 100644
--- a/src/lib/slider/slider.ts
+++ b/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"',