Add support for ariaControls and fix ariaLabelledby not working

davidchin · Apr 18, 2016 · 38a9dc9 · 38a9dc9
1 parent 1a31253
commit 38a9dc9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -71,6 +71,7 @@ If accepting a single value, pass a number to `value` prop, i.e.:
 Property                | Type                               | Description
 :-----------------------|:-----------------------------------|:----------------------------------
 ariaLabelledby          |string                              |`aria-labelledby` attribute
+ariaControls            |string                              |`aria-controls` attribute
 classNames              |Object.&lt;string&gt;               |CSS class names
 defaultValue            |number &vert; Object.&lt;number&gt; |Default value(s)
 disabled                |boolean                             |Disabled or not

diff --git a/src/InputRange/InputRange.js b/src/InputRange/InputRange.js
@@ -184,6 +184,8 @@ function renderSliders(inputRange) {
 
     const slider = (
       <Slider
+        ariaLabelledby={ inputRange.props.ariaLabelledby }
+        ariaControls={ inputRange.props.ariaControls }
         classNames={ classNames }
         key={ key }
         maxValue={ maxValue }
@@ -575,6 +577,7 @@ export default class InputRange extends React.Component {
  * Accepted propTypes of InputRange
  * @static {Object}
  * @property {Function} ariaLabelledby
+ * @property {Function} ariaControls
  * @property {Function} classNames
  * @property {Function} defaultValue
  * @property {Function} disabled
@@ -588,6 +591,7 @@ export default class InputRange extends React.Component {
  */
 InputRange.propTypes = {
   ariaLabelledby: React.PropTypes.string,
+  ariaControls: React.PropTypes.string,
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
   defaultValue: maxMinValuePropType,
   disabled: React.PropTypes.bool,

diff --git a/src/InputRange/Slider.js b/src/InputRange/Slider.js
@@ -160,6 +160,7 @@ export default class Slider extends React.Component {
 
         <a
           aria-labelledby={ this.props.ariaLabelledby }
+          aria-controls={ this.props.ariaControls }
           aria-valuemax={ this.props.maxValue }
           aria-valuemin={ this.props.minValue }
           aria-valuenow={ this.props.value }
@@ -181,6 +182,7 @@ export default class Slider extends React.Component {
  * Accepted propTypes of Slider
  * @static {Object}
  * @property {Function} ariaLabelledby
+ * @property {Function} ariaControls
  * @property {Function} className
  * @property {Function} maxValue
  * @property {Function} minValue
@@ -192,6 +194,7 @@ export default class Slider extends React.Component {
  */
 Slider.propTypes = {
   ariaLabelledby: React.PropTypes.string,
+  ariaControls: React.PropTypes.string,
   classNames: React.PropTypes.objectOf(React.PropTypes.string),
   maxValue: React.PropTypes.number,
   minValue: React.PropTypes.number,

diff --git a/test/InputRange.spec.js b/test/InputRange.spec.js
@@ -460,4 +460,32 @@ describe('InputRange', () => {
       expect(onChangeComplete).not.toHaveBeenCalled();
     });
   });
+
+  describe('ariaLabelledby', () => {
+    it('should call onChangeComplete if value has changed since the start of interaction', () => {
+      inputRange = renderComponent(
+        <InputRange ariaLabelledby="foobar" maxValue={20} minValue={0} value={values} onChange={onChange} />
+      );
+
+      const slider = ReactDOM.findDOMNode(inputRange.refs.sliderMax);
+      const handle = slider.querySelector('a');
+      const ariaLabelledby = handle.getAttribute('aria-labelledby');
+
+      expect(ariaLabelledby).toEqual('foobar');
+    });
+  });
+
+  describe('ariaControls', () => {
+    it('should call onChangeComplete if value has changed since the start of interaction', () => {
+      inputRange = renderComponent(
+        <InputRange ariaControls="foobar" maxValue={20} minValue={0} value={values} onChange={onChange} />
+      );
+
+      const slider = ReactDOM.findDOMNode(inputRange.refs.sliderMax);
+      const handle = slider.querySelector('a');
+      const ariaControls = handle.getAttribute('aria-controls');
+
+      expect(ariaControls).toEqual('foobar');
+    });
+  });
 });