Allow tabIndex to be set explicitly on Handle

README.md

@@ -120,13 +120,15 @@ The following APIs are shared by Slider and Range.
 | ------------ | ------- | ------- | ----------- |
 | defaultValue | number | `0` | Set initial value of slider. |
 | value | number | - | Set current value of slider. |
+| tabIndex | number | `0` | Set the tabIndex of the slider handle. |
 
 ### Range
 
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | defaultValue | `number[]` | `[0, 0]` | Set initial positions of handles. |
 | value | `number[]` | | Set current positions of handles. |
+| tabIndex | number[] | `[0, 0]` | Set the tabIndex of each handle. |
 | count | number | `1` | Determine how many ranges to render, and multiple handles will be rendered (number + 1). |
 | allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |
 | pushable | boolean or number | `false` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |

src/Handle.jsx

@@ -12,7 +12,7 @@ export default class Handle extends React.Component {
 
   render() {
     const {
-      className, vertical, offset, style, disabled, min, max, value, ...restProps,
+      className, vertical, offset, style, disabled, min, max, value, tabIndex, ...restProps,
     } = this.props;
 
     const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
@@ -34,7 +34,7 @@ export default class Handle extends React.Component {
       <div
         ref={node => (this.handle = node)}
         role="slider"
-        tabIndex="0"
+        tabIndex= {tabIndex || 0}
         {...ariaProps}
         {...restProps}
         className={className}
@@ -53,4 +53,5 @@ Handle.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   value: PropTypes.number,
+  tabIndex: PropTypes.number,
 };

src/Range.jsx

@@ -20,12 +20,14 @@ class Range extends React.Component {
     ]),
     allowCross: PropTypes.bool,
     disabled: PropTypes.bool,
+    tabIndex: PropTypes.arrayOf(PropTypes.number),
   };
 
   static defaultProps = {
     count: 1,
     allowCross: true,
     pushable: false,
+    tabIndex: [],
   };
 
   constructor(props) {
@@ -299,6 +301,7 @@ class Range extends React.Component {
       handle: handleGenerator,
       trackStyle,
       handleStyle,
+      tabIndex,
     } = this.props;
 
     const offsets = bounds.map(v => this.calcOffset(v));
@@ -314,6 +317,7 @@ class Range extends React.Component {
       value: v,
       dragging: handle === i,
       index: i,
+      tabIndex: tabIndex[i] || 0,
       min,
       max,
       disabled,

src/Slider.jsx

@@ -12,6 +12,7 @@ class Slider extends React.Component {
     value: PropTypes.number,
     disabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
+    tabIndex: PropTypes.number,
   };
 
   constructor(props) {
@@ -143,6 +144,7 @@ class Slider extends React.Component {
       minimumTrackStyle,
       trackStyle,
       handleStyle,
+      tabIndex,
       min,
       max,
       handle: handleGenerator,
@@ -159,6 +161,7 @@ class Slider extends React.Component {
       min,
       max,
       index: 0,
+      tabIndex,
       style: handleStyle[0] || handleStyle,
       ref: h => this.saveHandle(0, h),
     });

tests/Range.test.js

@@ -31,6 +31,12 @@ describe('Range', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
+  it('should render Range with tabIndex correctly', () => {
+    const wrapper = mount(<Range tabIndex={[1, 2]} />);
+    expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(0).props().tabIndex).toEqual(1);
+    expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(1).props().tabIndex).toEqual(2);
+  });
+
   it('should render Multi-Range with value correctly', () => {
     const wrapper = mount(<Range count={3} value={[0, 25, 50, 75]} />);
     expect(wrapper.state('bounds')[0]).toBe(0);

tests/Slider.test.js

@@ -22,6 +22,11 @@ describe('Slider', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
+  it('should allow tabIndex to be set on Handle via Slider', () => {
+    const wrapper = mount(<Slider tabIndex={1} />);
+    expect(wrapper.find('.rc-slider-handle').at(1).props().tabIndex).toEqual(1);
+  });
+
   it('increases the value when key "up" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);