diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html index c739dc146193..2641eae973a1 100644 --- a/src/demo-app/slider/slider-demo.html +++ b/src/demo-app/slider/slider-demo.html @@ -1,55 +1,60 @@

Default Slider

-Label +Label {{slidey.value}}

Colors

- - - + + +

Slider with Min and Max

- - + + + {{slider2.value}} - +

Disabled Slider

- - + + +

Slider with set value

- +

Slider with step defined

- + {{slider5.value}}

Slider with set tick interval

- - + +

Slider with Thumb Label

- +

Slider with one-way binding

- - + +

Slider with two-way binding

- - + +

Inverted slider

- +

Vertical slider

- + +

Inverted vertical slider

- + + - + diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index de561657883e..116a55687b23 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 bb54d732cfc0..d0860a840626 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"',