@douyinfe/semi-ui 2.15.1 → 2.16.0

package/lib/es/slider/index.js

@@ -50,7 +50,9 @@ export default class Slider extends BaseComponent {
       const {
         chooseMovePos,
         isDrag,
-        isInRenderTree
+        isInRenderTree,
+        firstDotFocusVisible,
+        secondDotFocusVisible
       } = this.state;
       const stylePos = vertical ? 'top' : 'left';
       const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
@@ -76,7 +78,7 @@ export default class Slider extends BaseComponent {
         currentValue
       } = this.state;
       const commonAria = {
-        'aria-label': ariaLabel,
+        'aria-label': ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : disabled ? 'Disabled Slider' : undefined,
         'aria-labelledby': ariaLabelledby,
         'aria-disabled': disabled
       };
@@ -88,7 +90,7 @@ export default class Slider extends BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
@@ -120,20 +122,28 @@ export default class Slider extends BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'min');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'min');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'min');
+        },
         role: "slider",
-        tabIndex: 0
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue, 0) : ariaValueText,
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
         "aria-valuenow": currentValue,
         "aria-valuemax": max,
-        "aria-valuemin": min,
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue) : ariaValueText
+        "aria-valuemin": min
       }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
-        visible: isInRenderTree && tipVisible.min,
+        visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.minHanleEl,
@@ -164,12 +174,20 @@ export default class Slider extends BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'min');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'min');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'min');
+        },
         role: "slider",
-        tabIndex: 0
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0], 0) : ariaValueText,
         "aria-valuenow": currentValue[0],
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText,
         "aria-valuemax": currentValue[1],
         "aria-valuemin": min
       }))), /*#__PURE__*/React.createElement(Tooltip, {
@@ -177,7 +195,7 @@ export default class Slider extends BaseComponent {
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
-        visible: isInRenderTree && tipVisible.max,
+        visible: isInRenderTree && (tipVisible.max || secondDotFocusVisible),
         className: "".concat(cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.maxHanleEl,
@@ -208,12 +226,20 @@ export default class Slider extends BaseComponent {
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
         },
-        onFocus: e => this.foundation.onFocus(e, 'min'),
+        onKeyDown: e => {
+          this.foundation.handleKeyDown(e, 'max');
+        },
+        onFocus: e => {
+          this.foundation.onFocus(e, 'max');
+        },
+        onBlur: e => {
+          this.foundation.onBlur(e, 'max');
+        },
         role: "slider",
-        tabIndex: 0
+        tabIndex: disabled ? -1 : 0
       }, commonAria, {
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1], 1) : ariaValueText,
         "aria-valuenow": currentValue[1],
-        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText,
         "aria-valuemax": max,
         "aria-valuemin": currentValue[0]
       }))));
@@ -314,6 +340,13 @@ export default class Slider extends BaseComponent {
       return labelContent;
     };
 
+    this._getAriaValueText = (value, index) => {
+      const {
+        getAriaValueText
+      } = this.props;
+      return getAriaValueText ? getAriaValueText(value, index) : value;
+    };
+
     let {
       value
     } = this.props;
@@ -334,14 +367,14 @@ export default class Slider extends BaseComponent {
       isDrag: false,
       clickValue: 0,
       showBoundary: false,
-      isInRenderTree: true
+      isInRenderTree: true,
+      firstDotFocusVisible: false,
+      secondDotFocusVisible: false
     };
     this.sliderEl = /*#__PURE__*/React.createRef();
     this.minHanleEl = /*#__PURE__*/React.createRef();
     this.maxHanleEl = /*#__PURE__*/React.createRef();
-    this.dragging = [false, false]; // this.chooseMovePos = 'min';
-    // this.isDrag = false;
-
+    this.dragging = [false, false];
     this.foundation = new SliderFoundation(this.adapter);
     this.eventListenerSet = new _Set();
   }
@@ -408,8 +441,7 @@ export default class Slider extends BaseComponent {
         return flag;
       },
       getOverallVars: () => ({
-        dragging: this.dragging,
-        chooseMovePos: this.chooseMovePos
+        dragging: this.dragging
       }),
       updateDisabled: disabled => {
         this.setState({
@@ -443,9 +475,6 @@ export default class Slider extends BaseComponent {
       getMinHandleEl: () => this.minHanleEl,
       getMaxHandleEl: () => this.maxHanleEl,
       onHandleDown: e => {
-        e.stopPropagation();
-        e.preventDefault();
-
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
 
         this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
@@ -568,37 +597,55 @@ export default class Slider extends BaseComponent {
   }
 
   render() {
+    var _context5;
+
+    const {
+      disabled,
+      currentValue,
+      min,
+      max
+    } = this.state;
+    const {
+      vertical,
+      verticalReverse,
+      style,
+      railStyle,
+      range,
+      className
+    } = this.props;
     const wrapperClass = cls("".concat(prefixCls, "-wrapper"), {
-      ["".concat(prefixCls, "-disabled")]: this.state.disabled,
-      ["".concat(cssClasses.VERTICAL, "-wrapper")]: this.props.vertical,
-      ["".concat(prefixCls, "-reverse")]: this.props.vertical && this.props.verticalReverse
-    }, this.props.className);
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(cssClasses.VERTICAL, "-wrapper")]: vertical,
+      ["".concat(prefixCls, "-reverse")]: vertical && verticalReverse
+    }, className);
     const boundaryClass = cls("".concat(prefixCls, "-boundary"), {
       ["".concat(prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
     });
     const sliderCls = cls({
-      ["".concat(prefixCls)]: !this.props.vertical,
-      [cssClasses.VERTICAL]: this.props.vertical
+      ["".concat(prefixCls)]: !vertical,
+      [cssClasses.VERTICAL]: vertical
     });
+    const ariaLabel = range ? _concatInstanceProperty(_context5 = "Range: ".concat(this._getAriaValueText(currentValue[0], 0), " to ")).call(_context5, this._getAriaValueText(currentValue[1], 1)) : undefined;
     const slider = /*#__PURE__*/React.createElement("div", {
       className: wrapperClass,
-      style: this.props.style,
+      style: style,
       ref: this.sliderEl,
+      "aria-label": ariaLabel,
       onMouseEnter: () => this.foundation.handleWrapperEnter(),
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-rail"),
       onClick: this.foundation.handleWrapClick,
-      style: this.props.railStyle
+      style: railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/React.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/React.createElement("div", {
       className: boundaryClass
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-boundary-min")
-    }, this.state.min), /*#__PURE__*/React.createElement("span", {
+    }, min), /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-boundary-max")
-    }, this.state.max)));
+    }, max)));
 
-    if (!this.props.vertical) {
+    if (!vertical) {
       return /*#__PURE__*/React.createElement("div", {
         className: sliderCls
       }, slider);
@@ -651,7 +698,8 @@ Slider.propTypes = {
   className: PropTypes.string,
   showBoundary: PropTypes.bool,
   railStyle: PropTypes.object,
-  verticalReverse: PropTypes.bool
+  verticalReverse: PropTypes.bool,
+  getAriaValueText: PropTypes.func
 };
 Slider.defaultProps = {
   // allowClear: false,

package/lib/es/transfer/index.d.ts

@@ -63,6 +63,11 @@ export interface ResolvedDataItem extends DataItem {
     };
     _optionKey?: string | number;
 }
+export interface DraggableResolvedDataItem {
+    key?: string | number;
+    index?: number;
+    item?: ResolvedDataItem;
+}
 export declare type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
 interface HeaderConfig {
     totalContent: string;

package/lib/es/transfer/index.js

@@ -419,16 +419,8 @@ class Transfer extends BaseComponent {
       type,
       showPath
     } = this.props;
-    let newItem = item;
 
-    if (draggable) {
-      newItem = _Object$assign(_Object$assign({}, item), {
-        key: item._optionKey
-      });
-      delete newItem._optionKey;
-    }
-
-    const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
+    const onRemove = () => this.foundation.handleSelectOrRemove(item);
 
     const rightItemCls = cls({
       ["".concat(prefixcls, "-item")]: true,
@@ -456,7 +448,7 @@ class Transfer extends BaseComponent {
       React.createElement("div", {
         role: "listitem",
         className: rightItemCls,
-        key: newItem.key
+        key: item.key
       }, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixcls, "-right-item-text")
       }, label), /*#__PURE__*/React.createElement(IconClose, {
@@ -483,7 +475,7 @@ class Transfer extends BaseComponent {
 
   renderRightSortableList(selectedData) {
     // when choose some items && draggable is true
-    const SortableItem = SortableElement(item => this.renderRightItem(item));
+    const SortableItem = SortableElement(props => this.renderRightItem(props.item));
     const SortableList = SortableContainer(_ref => {
       let {
         items
@@ -494,14 +486,12 @@ class Transfer extends BaseComponent {
         "aria-label": "Selected list"
       }, _mapInstanceProperty(items).call(items, (item, index) =>
       /*#__PURE__*/
-      // sortableElement will take over the property 'key', so use another '_optionKey' to pass
       // @ts-ignore skip SortableItem type check
-      React.createElement(SortableItem, _Object$assign({
+      React.createElement(SortableItem, {
         key: item.label,
-        index: index
-      }, item, {
-        _optionKey: item.key
-      })))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        index: index,
+        item: item
+      }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
       ;
     }, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.15.1",
+    "version": "2.16.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,18 +15,18 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.15.1",
-        "@douyinfe/semi-foundation": "2.15.1",
-        "@douyinfe/semi-icons": "2.15.1",
+        "@douyinfe/semi-animation-react": "2.16.0",
+        "@douyinfe/semi-foundation": "2.16.0",
+        "@douyinfe/semi-icons": "2.16.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.15.1",
-        "@types/react-window": "^1.8.2",
+        "@douyinfe/semi-theme-default": "2.16.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
         "date-fns": "^2.9.0",
         "date-fns-tz": "^1.0.10",
         "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
         "react-resizable": "^1.8.0",
         "react-sortable-hoc": "^2.0.0",
         "react-window": "^1.8.2",
@@ -35,9 +35,6 @@
         "utility-types": "^3.10.0"
     },
     "peerDependencies": {
-        "@types/react": ">=16.0.0",
-        "@types/react-dom": ">=16.0.0",
-        "prop-types": "15.7.2",
         "react": ">=16.0.0",
         "react-dom": ">=16.0.0"
     },
@@ -69,15 +66,18 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "c17dbc08573d010f8ecfe60834412acd9e7ca154",
+    "gitHead": "71f3e6a9ae6f7794c993617dd3d94f565539ac49",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.15.1",
+        "@douyinfe/semi-scss-compile": "2.16.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
+        "@types/react": ">=16.0.0",
+        "@types/react-dom": ">=16.0.0",
+        "@types/react-window": "^1.8.2",
         "babel-loader": "^8.2.2",
         "babel-plugin-lodash": "^3.3.4",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",

package/select/_story/select.stories.tsx

@@ -81,7 +81,7 @@ function CustomRender(props) {
             name: '夏可漫',
             email: 'xiakeman@example.com',
             avatar:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
         },
         {
             name: '申悦',

package/slider/_story/slider.stories.js

@@ -113,7 +113,8 @@ export const HorizontalSlider = () => (
     <div style={divStyle}>
       <div>marks</div>
       <Slider
-        marks={{ 20: '20c', 40: '40c' }}
+        marks={{ 20: '20°C', 40: '40°C' }}
+        getAriaValueText={(value) => `${value}°C`}
         defaultValue={[0, 100]}
         range={true}
         onChange={value => {
@@ -124,7 +125,8 @@ export const HorizontalSlider = () => (
     <div style={divStyle}>
       <div>inclued</div>
       <Slider
-        marks={{ 20: '20c', 40: '40c' }}
+        marks={{ 20: '20°C', 40: '40°C' }}
+        getAriaValueText={(value) => `${value}°C`}
         included={false}
         defaultValue={[0, 100]}
         range={true}

package/slider/index.tsx

@@ -51,6 +51,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         showBoundary: PropTypes.bool,
         railStyle: PropTypes.object,
         verticalReverse: PropTypes.bool,
+        getAriaValueText: PropTypes.func,
     } as any;
 
     static defaultProps: Partial<SliderProps> = {
@@ -77,7 +78,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl: React.RefObject<HTMLDivElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
-    private chooseMovePos: 'min' | 'max';
     foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
@@ -98,14 +98,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             isDrag: false,
             clickValue: 0,
             showBoundary: false,
-            isInRenderTree: true
+            isInRenderTree: true,
+            firstDotFocusVisible: false,
+            secondDotFocusVisible: false,
         };
         this.sliderEl = React.createRef();
         this.minHanleEl = React.createRef();
         this.maxHanleEl = React.createRef();
         this.dragging = [false, false];
-        // this.chooseMovePos = 'min';
-        // this.isDrag = false;
         this.foundation = new SliderFoundation(this.adapter);
         this.eventListenerSet = new Set();
     }
@@ -165,7 +165,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             },
             getOverallVars: () => ({
                 dragging: this.dragging,
-                chooseMovePos: this.chooseMovePos,
             }),
             updateDisabled: (disabled: boolean) => {
                 this.setState({ disabled });
@@ -189,8 +188,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             getMinHandleEl: () => this.minHanleEl,
             getMaxHandleEl: () => this.maxHanleEl,
             onHandleDown: (e: React.MouseEvent) => {
-                e.stopPropagation();
-                e.preventDefault();
                 this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);
                 this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
@@ -287,7 +284,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
 
     renderHandle = () => {
         const { vertical, range, tooltipVisible, tipFormatter, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValueText, getAriaValueText, disabled } = this.props;
-        const { chooseMovePos, isDrag, isInRenderTree } = this.state;
+        const { chooseMovePos, isDrag, isInRenderTree, firstDotFocusVisible, secondDotFocusVisible } = this.state;
         const stylePos = vertical ? 'top' : 'left';
         const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
         const minPercent = percentInfo.min;
@@ -307,7 +304,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         const { min, max, currentValue } = this.state;
 
         const commonAria = {
-            'aria-label': ariaLabel,
+            'aria-label': ariaLabel ?? (disabled ? 'Disabled Slider' : undefined),
             'aria-labelledby': ariaLabelledby,
             'aria-disabled': disabled
         };
@@ -319,7 +316,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 position="top"
                 trigger="custom"
                 rePosKey={minPercent}
-                visible={isInRenderTree && tipVisible.min}
+                visible={isInRenderTree && (tipVisible.min || firstDotFocusVisible)}
                 className={`${cssClasses.HANDLE}-tooltip`}
             >
                 <span
@@ -352,24 +349,32 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     onTouchEnd={e => {
                         this.foundation.onHandleUp(e);
                     }}
-                    onFocus={e => this.foundation.onFocus(e, 'min')}
+                    onKeyDown={(e)=>{
+                        this.foundation.handleKeyDown(e, 'min');
+                    }}
+                    onFocus={e => {
+                        this.foundation.onFocus(e, 'min');
+                    }}
+                    onBlur={(e) => { 
+                        this.foundation.onBlur(e, 'min');
+                    }}
                     role="slider"
-                    tabIndex={0}
+                    aria-valuetext={getAriaValueText ? getAriaValueText(currentValue as number, 0) : ariaValueText}
+                    tabIndex={disabled ? -1 : 0}
                     {...commonAria}
                     aria-valuenow={currentValue as number}
                     aria-valuemax={max}
                     aria-valuemin={min}
-                    aria-valuetext={getAriaValueText ? getAriaValueText(currentValue as number) : ariaValueText}
                 />
             </Tooltip>
         ) : (
             <React.Fragment>
-                <Tooltip
+                <Tooltip    
                     content={tipChildren.min}
                     position="top"
                     trigger="custom"
                     rePosKey={minPercent}
-                    visible={isInRenderTree && tipVisible.min}
+                    visible={isInRenderTree && (tipVisible.min || firstDotFocusVisible)}
                     className={`${cssClasses.HANDLE}-tooltip`}
                 >
                     <span
@@ -401,12 +406,20 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
-                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        onKeyDown={(e)=>{
+                            this.foundation.handleKeyDown(e, 'min');
+                        }}
+                        onFocus={e => {
+                            this.foundation.onFocus(e, 'min');
+                        }}
+                        onBlur={(e) => { 
+                            this.foundation.onBlur(e, 'min');
+                        }}
                         role="slider"
-                        tabIndex={0}
+                        tabIndex={disabled ? -1 : 0}
                         {...commonAria}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[0], 0) : ariaValueText}
                         aria-valuenow={currentValue[0]}
-                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText}
                         aria-valuemax={currentValue[1]}
                         aria-valuemin={min}
                     />
@@ -416,7 +429,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     position="top"
                     trigger="custom"
                     rePosKey={maxPercent}
-                    visible={isInRenderTree && tipVisible.max}
+                    visible={isInRenderTree && (tipVisible.max || secondDotFocusVisible)}
                     className={`${cssClasses.HANDLE}-tooltip`}
                 >
                     <span
@@ -448,12 +461,20 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
-                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        onKeyDown={e =>{
+                            this.foundation.handleKeyDown(e, 'max');
+                        }}
+                        onFocus={e =>  {
+                            this.foundation.onFocus(e, 'max');
+                        }}
+                        onBlur={(e) => {
+                            this.foundation.onBlur(e, 'max');
+                        }}
                         role="slider"
-                        tabIndex={0}
+                        tabIndex={disabled ? -1 : 0}
                         {...commonAria}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[1], 1) : ariaValueText}
                         aria-valuenow={currentValue[1]}
-                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText}
                         aria-valuemax={max}
                         aria-valuemin={currentValue[0]}
                     />
@@ -538,29 +559,38 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         return labelContent;
     };
 
+    _getAriaValueText = (value: number, index?: number) => {
+        const { getAriaValueText } = this.props;
+        return getAriaValueText ? getAriaValueText(value, index) : value;
+    }
+
 
     render() {
+        const { disabled, currentValue, min, max  } = this.state;
+        const { vertical, verticalReverse, style, railStyle, range, className } = this.props;
         const wrapperClass = cls(
             `${prefixCls}-wrapper`,
             {
-                [`${prefixCls}-disabled`]: this.state.disabled,
-                [`${cssClasses.VERTICAL}-wrapper`]: this.props.vertical,
-                [`${prefixCls}-reverse`]: this.props.vertical && this.props.verticalReverse
+                [`${prefixCls}-disabled`]: disabled,
+                [`${cssClasses.VERTICAL}-wrapper`]: vertical,
+                [`${prefixCls}-reverse`]: vertical && verticalReverse
             },
-            this.props.className
+            className
         );
         const boundaryClass = cls(`${prefixCls}-boundary`, {
             [`${prefixCls}-boundary-show`]: this.props.showBoundary && this.state.showBoundary,
         });
         const sliderCls = cls({
-            [`${prefixCls}`]: !this.props.vertical,
-            [cssClasses.VERTICAL]: this.props.vertical,
+            [`${prefixCls}`]: !vertical,
+            [cssClasses.VERTICAL]: vertical,
         });
+        const ariaLabel = range ? `Range: ${this._getAriaValueText(currentValue[0], 0)} to ${this._getAriaValueText(currentValue[1], 1)}` : undefined;
         const slider = (
             <div
                 className={wrapperClass}
-                style={this.props.style}
+                style={style}
                 ref={this.sliderEl}
+                aria-label={ariaLabel}
                 onMouseEnter={() => this.foundation.handleWrapperEnter()}
                 onMouseLeave={() => this.foundation.handleWrapperLeave()}
             >
@@ -568,7 +598,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     <div
                         className={`${prefixCls}-rail`}
                         onClick={this.foundation.handleWrapClick}
-                        style={this.props.railStyle}
+                        style={railStyle}
                     />
                 }
                 {this.renderTrack()}
@@ -576,12 +606,12 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 <div>{this.renderHandle()}</div>
                 {this.renderLabel()}
                 <div className={boundaryClass}>
-                    <span className={`${prefixCls}-boundary-min`}>{this.state.min}</span>
-                    <span className={`${prefixCls}-boundary-max`}>{this.state.max}</span>
+                    <span className={`${prefixCls}-boundary-min`}>{min}</span>
+                    <span className={`${prefixCls}-boundary-max`}>{max}</span>
                 </div>
             </div>
         );
-        if (!this.props.vertical) {
+        if (!vertical) {
             return <div className={sliderCls}>{slider}</div>;
         }
         return slider;