Add aria role and aria-value attributes

Author: Valentin Hervieu

dist/rzslider.js

@@ -309,6 +309,7 @@
           self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
           self.updateSelectionBar();
           self.updateTicksScale();
+          self.updateAriaAttributes();
 
           if (self.range) {
             self.updateCmbLabel();
@@ -322,6 +323,7 @@
           self.updateSelectionBar();
           self.updateTicksScale();
           self.updateCmbLabel();
+          self.updateAriaAttributes();
         }, self.options.interval);
 
         this.scope.$on('rzSliderForceRender', function() {
@@ -614,14 +616,43 @@
       },
 
       /**
-       * Adds accessibility atributes
+       * Adds accessibility attributes
        *
        * Run only once during initialization
        *
        * @returns {undefined}
        */
       addAccessibility: function() {
-        this.sliderElem.attr("role", "slider");
+        this.minH.attr('role', 'slider');
+        this.updateAriaAttributes();
+        if (this.options.keyboardSupport)
+          this.minH.attr('tabindex', '0');
+        if (this.options.vertical)
+          this.minH.attr('aria-orientation', 'vertical');
+
+        if (this.range) {
+          this.maxH.attr('role', 'slider');
+          if (this.options.keyboardSupport)
+            this.maxH.attr('tabindex', '0');
+          if (this.options.vertical)
+            this.maxH.attr('aria-orientation', 'vertical');
+        }
+      },
+
+      /**
+       * Updates aria attributes according to current values
+       */
+      updateAriaAttributes: function() {
+        this.minH.attr('aria-valuenow', this.scope.rzSliderModel);
+        this.minH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderModel));
+        this.minH.attr('aria-valuemin', this.minValue);
+        this.minH.attr('aria-valuemax', this.maxValue);
+        if (this.range) {
+          this.maxH.attr('aria-valuenow', this.scope.rzSliderHigh);
+          this.maxH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderHigh));
+          this.maxH.attr('aria-valuemin', this.minValue);
+          this.maxH.attr('aria-valuemax', this.maxValue);
+        }
       },
 
       /**
@@ -1111,9 +1142,11 @@
         this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
         this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
 
-        this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
-        if (this.range) {
-          this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
+        if (this.options.keyboardSupport) {
+          this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
+          if (this.range) {
+            this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
+          }
         }
       },
 
@@ -1157,7 +1190,9 @@
         }
 
         pointer.addClass('rz-active');
-        pointer[0].focus();
+
+        if (this.options.keyboardSupport)
+          pointer[0].focus();
 
         ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
         ehEnd = angular.bind(this, this.onEnd, ehMove);
@@ -1206,29 +1241,26 @@
       onEnd: function(ehMove, event) {
         var moveEventName = this.getEventNames(event).moveEvent;
 
-        //this.minH.removeClass('rz-active');
-        //this.maxH.removeClass('rz-active');
+        if (!this.options.keyboardSupport) {
+          this.minH.removeClass('rz-active');
+          this.maxH.removeClass('rz-active');
+          this.tracking = '';
+        }
+        this.dragging.active = false;
 
         $document.off(moveEventName, ehMove);
-
         this.scope.$emit('slideEnded');
-        //this.tracking = '';
-
-        this.dragging.active = false;
         this.callOnEnd();
       },
 
       onPointerFocus: function(pointer, ref, event) {
-        //if (this.tracking === ref) return;
         this.tracking = ref;
-        console.info('focused', ref);
         pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
         pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
         pointer.addClass('rz-active');
       },
 
       onPointerBlur: function(pointer, event) {
-        console.info('blured', this.tracking);
         pointer.off('keydown');
         this.tracking = '';
         pointer.removeClass('rz-active');
@@ -1370,6 +1402,7 @@
             switched = true;
             this.scope[this.tracking] = this.scope.rzSliderHigh;
             this.updateHandles(this.tracking, this.maxH.rzsp);
+            this.updateAriaAttributes();
             this.tracking = 'rzSliderHigh';
             this.minH.removeClass('rz-active');
             this.maxH.addClass('rz-active');
@@ -1380,6 +1413,7 @@
             switched = true;
             this.scope[this.tracking] = this.scope.rzSliderModel;
             this.updateHandles(this.tracking, this.minH.rzsp);
+            this.updateAriaAttributes();
             this.tracking = 'rzSliderModel';
             this.maxH.removeClass('rz-active');
             this.minH.addClass('rz-active');
@@ -1392,6 +1426,7 @@
         if (this.scope[this.tracking] !== newValue) {
           this.scope[this.tracking] = newValue;
           this.updateHandles(this.tracking, newOffset);
+          this.updateAriaAttributes();
           this.scope.$apply();
           this.callOnChange();
         }
@@ -1493,7 +1528,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer tabindex=0></span> <span class=rz-pointer tabindex=0></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
+    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
   );
 
 }]);