Merge pull request #125 from atlidohop/feat/accessibility-aria-label-support

Accessibility: Support aria-labels

Author: mpowaga

README.md

@@ -145,6 +145,16 @@ Callback called only after moving a handle has ended or when a new value is set
 
 Callback called when the the slider is clicked (handle or bars). Receives the value at the clicked position as argument.
 
+##### ariaLabel {oneOfType([string, arrayOf(string)])}
+
+aria-label for screen-readers to apply to the handles.
+Use an array for more than one handle.
+The length of the array must match the number of handles in the value array.
+
+##### ariaValuetext {string}
+
+aria-valuetext for screen-readers
+
 ### Methods
 
 ##### getValue

index.html

@@ -131,25 +131,33 @@
         }
     }));
 
-    ReactDOM.render(Demo({defaultValue: 0, orientation: 'horizontal'}), document.getElementById('horizontal-1'));
+    ReactDOM.render(Demo({
+        defaultValue: 0,
+        orientation: 'horizontal',
+        ariaLabel: 'This is a single handle',
+    }), document.getElementById('horizontal-1'));
 
     ReactDOM.render(Demo({
         defaultValue: [0, 100],
         orientation: 'horizontal',
-        withBars: true
+        withBars: true,
+        ariaLabel: ['Lower handle', 'Upper handle'],
+        ariaValuetext: 'Some arbitrary value',
     }), document.getElementById('horizontal-2'));
 
     ReactDOM.render(Demo({
         defaultValue: [0, 50, 100],
         orientation: 'horizontal',
-        withBars: true
+        withBars: true,
+        ariaLabel: ['Leftmost handle', 'Middle handle', 'Rightmost handle'],
     }), document.getElementById('horizontal-3'));
 
     ReactDOM.render(Demo({
         defaultValue: [0, 50, 100],
         orientation: 'vertical',
         withBars: true,
-        invert: true
+        invert: true,
+        ariaLabel: ['Lowest handle', 'Middle handle', 'Top handle'],
     }), document.getElementById('vertical'));
 </script>
 </body>

react-slider.js

@@ -42,6 +42,10 @@
     return x != null && x.length === 1 ? x[0] : x;
   }
 
+  var isArray = Array.isArray || function(x) {
+    return Object.prototype.toString.call(x) === '[object Array]';
+  };
+
   // undoEnsureArray(ensureArray(x)) === x
 
   var ReactSlider = createReactClass({
@@ -749,6 +753,8 @@
             "aria-valuenow": this.state.value[i],
             "aria-valuemin": this.props.min,
             "aria-valuemax": this.props.max,
+            "aria-label": isArray(this.props.ariaLabel) ? this.props.ariaLabel[i] : this.props.ariaLabel,
+            "aria-valuetext": this.props.ariaValuetext,
           },
           child
         )