support aria

examples/handle.js

@@ -21,7 +21,7 @@ const handle = (props) => {
       placement="top"
       key={index}
     >
-      <Handle {...restProps} />
+      <Handle value={value} {...restProps} />
     </Tooltip>
   );
 };

src/Handle.jsx

@@ -4,15 +4,23 @@ import PropTypes from 'prop-types';
 export default class Handle extends React.Component {
   render() {
     const {
-      className, vertical, offset, handleStyle, ...restProps,
+      className, vertical, offset, handleStyle, disabled, min, max, value, ...restProps,
     } = this.props;
-    const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
 
-    const elStyle = {
-      ...style,
-      ...handleStyle,
-    };
-    return <div {...restProps} className={className} style={elStyle} />;
+    const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
+    const elStyle = { ...style, ...handleStyle };
+    return (
+      <div
+        role="slider"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-disabled={disabled}
+        {...restProps}
+        className={className}
+        style={elStyle}
+      />
+    );
   }
 }
 
@@ -21,4 +29,8 @@ Handle.propTypes = {
   vertical: PropTypes.bool,
   offset: PropTypes.number,
   handleStyle: PropTypes.object,
+  disabled: PropTypes.bool,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
 };

src/Range.jsx

@@ -282,6 +282,8 @@ class Range extends React.Component {
       vertical,
       included,
       disabled,
+      min,
+      max,
       handle: handleGenerator,
     } = this.props;
 
@@ -298,6 +300,8 @@ class Range extends React.Component {
       value: v,
       dragging: handle === i,
       index: i,
+      min,
+      max,
       disabled,
       ref: h => this.saveHandle(i, h),
     }));

src/Slider.jsx

@@ -112,6 +112,8 @@ class Slider extends React.Component {
       disabled,
       minimumTrackStyle,
       handleStyle,
+      min,
+      max,
       handle: handleGenerator,
     } = this.props;
     const { value, dragging } = this.state;
@@ -123,6 +125,8 @@ class Slider extends React.Component {
       value,
       dragging,
       disabled,
+      min,
+      max,
       handleStyle,
       ref: h => this.saveHandle(0, h),
     });

src/common/createSlider.jsx

@@ -46,7 +46,6 @@ export default function createSlider(Component) {
       marks: {},
       handle({ index, ...restProps }) {
         delete restProps.dragging;
-        delete restProps.value;
         return <Handle {...restProps} key={index} />;
       },
       onBeforeChange: noop,

src/createSliderWithTooltip.jsx

@@ -35,6 +35,7 @@ export default function createSliderWithTooltip(Component) {
         >
           <Handle
             {...restProps}
+            value={value}
             onMouseEnter={() => this.handleTooltipVisibleChange(index, true)}
             onMouseLeave={() => this.handleTooltipVisibleChange(index, false)}
           />

tests/__snapshots__/Range.test.js.snap

@@ -15,16 +15,36 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
   <div
     class="rc-slider-step" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-1"
+    role="slider"
     style="left:0%;" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-2"
+    role="slider"
     style="left:0%;" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-3"
+    role="slider"
     style="left:0%;" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-4"
+    role="slider"
     style="left:0%;" />
   <div
     class="rc-slider-mark" />
@@ -42,10 +62,20 @@ exports[`Range should render Range with correct DOM structure 1`] = `
   <div
     class="rc-slider-step" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-1"
+    role="slider"
     style="left:0%;" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle rc-slider-handle-2"
+    role="slider"
     style="left:0%;" />
   <div
     class="rc-slider-mark" />

tests/__snapshots__/Slider.test.js.snap

@@ -9,7 +9,12 @@ exports[`Slider should render Slider with correct DOM structure 1`] = `
   <div
     class="rc-slider-step" />
   <div
+    aria-disabled="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
     class="rc-slider-handle"
+    role="slider"
     style="left:0%;" />
   <div
     class="rc-slider-mark" />