Add aria role and aria-value attributes

dist/rzslider.js

@@ -51,6 +51,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      keyboardSupport: true,
       scale: 1,
       onStart: null,
       onChange: null,
@@ -310,6 +311,7 @@
           self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
           self.updateSelectionBar();
           self.updateTicksScale();
+          self.updateAriaAttributes();
 
           if (self.range) {
             self.updateCmbLabel();
@@ -323,6 +325,7 @@
           self.updateSelectionBar();
           self.updateTicksScale();
           self.updateCmbLabel();
+          self.updateAriaAttributes();
         }, self.options.interval);
 
         this.scope.$on('rzSliderForceRender', function() {
@@ -614,14 +617,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);
+        }
       },
 
       /**
@@ -1126,9 +1158,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'));
+          }
         }
       },
 
@@ -1172,7 +1206,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);
@@ -1221,29 +1257,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');
@@ -1386,6 +1419,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');
@@ -1394,6 +1428,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');
@@ -1404,6 +1439,7 @@
         if (this.scope[this.tracking] !== newValue) {
           this.scope[this.tracking] = newValue;
           this.updateHandles(this.tracking, newOffset);
+          this.updateAriaAttributes();
           valueChanged = true;
         }
 

src/rzslider.js

@@ -51,6 +51,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      keyboardSupport: true,
       scale: 1,
       onStart: null,
       onChange: null,
@@ -310,6 +311,7 @@
           self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
           self.updateSelectionBar();
           self.updateTicksScale();
+          self.updateAriaAttributes();
 
           if (self.range) {
             self.updateCmbLabel();
@@ -323,6 +325,7 @@
           self.updateSelectionBar();
           self.updateTicksScale();
           self.updateCmbLabel();
+          self.updateAriaAttributes();
         }, self.options.interval);
 
         this.scope.$on('rzSliderForceRender', function() {
@@ -614,14 +617,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);
+        }
       },
 
       /**
@@ -1126,9 +1158,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'));
+          }
         }
       },
 
@@ -1172,7 +1206,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);
@@ -1221,29 +1257,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');
@@ -1386,6 +1419,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');
@@ -1394,6 +1428,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');
@@ -1404,6 +1439,7 @@
         if (this.scope[this.tracking] !== newValue) {
           this.scope[this.tracking] = newValue;
           this.updateHandles(this.tracking, newOffset);
+          this.updateAriaAttributes();
           valueChanged = true;
         }