fix(slider): aria attrs are not announced when tabbing in screen readers

src/components/slider/demoBasicUsage/index.html

@@ -44,23 +44,23 @@ <h3>Rating: {{rating1}}/5 - demo of theming classes</h3>
       <div flex="10" layout layout-align="center center">
         <span class="md-body-1">default</span>
       </div>
-      <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
-      </md-slider>
+      <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5"
+                 aria-label="default"></md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
         <span class="md-body-1">md-warn</span>
       </div>
       <md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5"
-                 aria-label="rating">
+                 aria-label="md-warn">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
         <span class="md-body-1">md-primary</span>
       </div>
       <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5"
-                 aria-label="rating">
+                 aria-label="md-primary">
       </md-slider>
     </div>
 
@@ -69,10 +69,12 @@ <h3>Rating: {{rating1}}/5 - demo of theming classes</h3>
     <h3>Disabled</h3>
     <md-slider-container ng-disabled="isDisabled">
       <md-icon md-svg-icon="device:brightness-low"></md-icon>
-      <md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete ng-readonly="readonly">
+      <md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete ng-readonly="readonly"
+                 id="disabled1-slider">
       </md-slider>
       <md-input-container>
-        <input type="number" ng-model="disabled1" aria-label="green" aria-controls="green-slider">
+        <input type="number" ng-model="disabled1" aria-label="Disabled 1"
+               aria-controls="disabled1-slider">
       </md-input-container>
     </md-slider-container>
     <md-checkbox ng-model="isDisabled">Is disabled</md-checkbox>
@@ -93,20 +95,23 @@ <h3>Invert</h3>
       <div flex="10" layout layout-align="center center">
         <span class="md-body-1">Regular</span>
       </div>
-      <md-slider ng-model="invert" min="0" max="100" aria-label="regular slider"></md-slider>
+      <md-slider ng-model="invert" min="0" max="100" aria-label="regular" id="regular-slider">
+      </md-slider>
 
       <md-input-container>
-        <input type="number" ng-model="invert" aria-label="regular-slider">
+        <input type="number" ng-model="invert" aria-label="regular" aria-controls="regular-slider">
       </md-input-container>
     </md-slider-container>
     <md-slider-container>
       <div flex="10" layout layout-align="center center">
-        <span class="md-body-1">Invert</span>
+        <span class="md-body-1">Inverted</span>
       </div>
-      <md-slider md-invert ng-model="invert" min="0" max="100" aria-label="invertd slider"></md-slider>
+      <md-slider md-invert ng-model="invert" min="0" max="100" aria-label="inverted"
+                 id="inverted-slider"></md-slider>
 
       <md-input-container>
-        <input type="number" ng-model="invert" aria-label="invert-slider">
+        <input type="number" ng-model="invert" aria-label="inverted"
+               aria-controls="inverted-slider">
       </md-input-container>
     </md-slider-container>
 

src/components/slider/demoBasicUsage/script.js

@@ -1,9 +1,8 @@
-angular.module('sliderDemo1', ['ngMaterial'])
+angular.module('sliderDemoBasic', ['ngMaterial'])
   .config(function ($mdIconProvider) {
     $mdIconProvider.iconSet('device', 'img/icons/sets/device-icons.svg', 24);
   })
   .controller('AppCtrl', function ($scope) {
-
     $scope.color = {
       red: Math.floor(Math.random() * 255),
       green: Math.floor(Math.random() * 255),

src/components/slider/demoVertical/index.html

@@ -4,27 +4,27 @@
       <md-input-container>
         <input flex type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
       </md-input-container>
-      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent"
-                 md-vertical></md-slider>
-      </md-slider>
+      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider"
+                 class="md-accent" md-vertical></md-slider>
       <h5>Volume</h5>
     </md-slider-container>
     <md-slider-container flex>
       <md-input-container>
-        <input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
+        <input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider"
+               step="10">
       </md-input-container>
-      <md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary"
-                 md-vertical></md-slider>
-      </md-slider>
+      <md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass"
+                 class="md-primary" md-vertical id="bass-slider"></md-slider>
       <h5>Bass</h5>
     </md-slider-container>
     <div flex layout="column" layout-align="center center">
       <md-slider-container ng-disabled="readonly">
         <md-input-container>
-          <input flex type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
+          <input flex type="number" ng-model="master" aria-label="Master" step="10"
+                 aria-controls="master-slider">
         </md-input-container>
         <md-slider flex ng-model="master" md-discrete aria-label="Master" md-vertical step="10"
-                   ng-readonly="readonly"></md-slider>
+                   ng-readonly="readonly" id="master-slider"></md-slider>
         <h5>Master</h5>
       </md-slider-container>
       <md-checkbox ng-model="readonly">Read only</md-checkbox>

src/components/slider/demoVertical/script.js

@@ -1,9 +1,6 @@
-
-angular.module('sliderDemo2', ['ngMaterial'])
-
+angular.module('sliderDemoVertical', ['ngMaterial'])
 .controller('AppCtrl', function($scope) {
-
   $scope.vol = Math.floor(Math.random() * 100);
-  $scope.bass = Math.floor(Math.random() * 100);
-  $scope.master = Math.floor(Math.random() * 100);
+  $scope.bass = 40;
+  $scope.master = 80;
 });

src/components/slider/slider.js

@@ -213,7 +213,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
 
     if (tAttrs.disabled || tAttrs.ngDisabled) wrapper.attr('tabindex', -1);
 
-    tElement.attr('role', 'slider');
+    wrapper.attr('role', 'slider');
 
     $mdAria.expect(tElement, 'aria-label');
 
@@ -312,13 +312,13 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
     function updateMin(value) {
       min = parseFloat(value);
       ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max);
-      element.attr('aria-valuemin', value);
+      wrapper.attr('aria-valuemin', value);
       updateAll();
     }
     function updateMax(value) {
       max = parseFloat(value);
       ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max);
-      element.attr('aria-valuemax', value);
+      wrapper.attr('aria-valuemax', value);
       updateAll();
     }
     function updateStep(value) {
@@ -496,7 +496,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
 
       var percent = valueToPercent(ngModelCtrl.$viewValue);
       scope.modelValue = ngModelCtrl.$viewValue;
-      element.attr('aria-valuenow', ngModelCtrl.$viewValue);
+      wrapper.attr('aria-valuenow', ngModelCtrl.$viewValue);
       setSliderPercent(percent);
       thumbText.text(ngModelCtrl.$viewValue);
     }

src/components/slider/slider.spec.js

@@ -48,13 +48,13 @@ describe('md-slider', function() {
   it('should not set model below the min', function() {
     var slider = setup('ng-model="value" min="0" max="100"');
     pageScope.$apply('value = -50');
-    expect(slider.attr('aria-valuenow')).toEqual('0');
+    expect(getWrapper(slider).attr('aria-valuenow')).toEqual('0');
   });
 
   it('should not set model above the max', function() {
     var slider = setup('ng-model="value" min="0" max="100"');
     pageScope.$apply('value = 150');
-    expect(slider.attr('aria-valuenow')).toEqual('100');
+    expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100');
   });
 
   it('should set model on press', function() {
@@ -145,19 +145,19 @@ describe('md-slider', function() {
       pageScope.max = 5;
       pageScope.model = 5;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('5');
-      expect(slider.attr('aria-valuemax')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5');
       pageScope.model = 6;
       pageScope.max = 6;
       pageScope.$apply();
     });
 
     it('should have updated max correctly', function () {
-      expect(slider.attr('aria-valuemax')).toEqual('6');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('6');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('6');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
     });
 
   });
@@ -171,19 +171,19 @@ describe('md-slider', function() {
       pageScope.max = 4;
       pageScope.model = 3;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('3');
-      expect(slider.attr('aria-valuemax')).toEqual('4');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4');
       pageScope.model = 6;
       pageScope.max = 7;
       pageScope.$apply();
     });
 
     it('should have updated max correctly', function () {
-      expect(slider.attr('aria-valuemax')).toEqual('7');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('7');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('6');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
     });
 
   });
@@ -197,19 +197,19 @@ describe('md-slider', function() {
       pageScope.max = 4;
       pageScope.model = 2;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('2');
-      expect(slider.attr('aria-valuemax')).toEqual('4');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4');
       pageScope.model = 3;
       pageScope.max = 5;
       pageScope.$apply();
     });
 
     it('should have updated max correctly', function () {
-      expect(slider.attr('aria-valuemax')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('3');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
     });
 
   });
@@ -223,19 +223,19 @@ describe('md-slider', function() {
       pageScope.min = 5;
       pageScope.model = 5;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('5');
-      expect(slider.attr('aria-valuemin')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
       pageScope.model = 2;
       pageScope.min = 2;
       pageScope.$apply();
     });
 
     it('should have updated min correctly', function () {
-      expect(slider.attr('aria-valuemin')).toEqual('2');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('2');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2');
     });
 
   });
@@ -249,19 +249,19 @@ describe('md-slider', function() {
       pageScope.min = 5;
       pageScope.model = 6;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('6');
-      expect(slider.attr('aria-valuemin')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
       pageScope.model = 3;
       pageScope.min = 2;
       pageScope.$apply();
     });
 
     it('should have updated min correctly', function () {
-      expect(slider.attr('aria-valuemin')).toEqual('2');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('3');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
     });
 
   });
@@ -275,19 +275,19 @@ describe('md-slider', function() {
       pageScope.min = 5;
       pageScope.model = 7;
       pageScope.$apply();
-      expect(slider.attr('aria-valuenow')).toEqual('7');
-      expect(slider.attr('aria-valuemin')).toEqual('5');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('7');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
       pageScope.model = 6;
       pageScope.min = 2;
       pageScope.$apply();
     });
 
     it('should have updated min correctly', function () {
-      expect(slider.attr('aria-valuemin')).toEqual('2');
+      expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
     });
 
     it('should have updated value correctly', function () {
-      expect(slider.attr('aria-valuenow')).toEqual('6');
+      expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
     });
 
   });
@@ -346,17 +346,17 @@ describe('md-slider', function() {
 
     pageScope.$apply('model = 102');
 
-    expect(slider.attr('role')).toEqual('slider');
-    expect(slider.attr('aria-valuemin')).toEqual('100');
-    expect(slider.attr('aria-valuemax')).toEqual('104');
-    expect(slider.attr('aria-valuenow')).toEqual('102');
+    expect(wrapper.attr('role')).toEqual('slider');
+    expect(getWrapper(slider).attr('aria-valuemin')).toEqual('100');
+    expect(getWrapper(slider).attr('aria-valuemax')).toEqual('104');
+    expect(getWrapper(slider).attr('aria-valuenow')).toEqual('102');
 
     wrapper.triggerHandler({
       type: 'keydown',
       keyCode: $mdConstant.KEY_CODE.LEFT_ARROW
     });
     $timeout.flush();
-    expect(slider.attr('aria-valuenow')).toEqual('100');
+    expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100');
   });
 
   it('should ignore pressdown events when disabled', function() {