diff --git a/README.md b/README.md index b11e9999..63faf558 100644 --- a/README.md +++ b/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 diff --git a/index.html b/index.html index ddfa1438..fd1311fb 100644 --- a/index.html +++ b/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')); diff --git a/react-slider.js b/react-slider.js index cfc7d39f..22f40c5d 100644 --- a/react-slider.js +++ b/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 )