@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/select/option.js

@@ -159,28 +159,34 @@ class Option extends _react.PureComponent {
         highlightClassName: "".concat(prefixCls, "-keyword")
       }
     };
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: optionClassName,
-      onClick: e => {
-        this.onClick((0, _assign.default)({
-          value,
-          label,
-          children
-        }, rest), e);
-      },
-      onMouseEnter: e => onMouseEnter && onMouseEnter(e),
-      role: "option",
-      style: style
-    }, showTick ? /*#__PURE__*/_react.default.createElement("div", {
-      className: selectedIconClassName
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, null)) : null, (0, _isString2.default)(children) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-text")
-    }, this.renderOptionContent({
-      children,
-      config,
-      inputValue,
-      prefixCls
-    })) : children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+      _react.default.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick((0, _assign.default)({
+            value,
+            label,
+            children
+          }, rest), e);
+        },
+        onMouseEnter: e => onMouseEnter && onMouseEnter(e),
+        role: "option",
+        "aria-selected": selected ? "true" : "false",
+        "aria-disabled": disabled ? "true" : "false",
+        style: style
+      }, showTick ? /*#__PURE__*/_react.default.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, null)) : null, (0, _isString2.default)(children) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
   }
 
 }

package/lib/cjs/sideSheet/SideSheetContent.d.ts

@@ -14,6 +14,7 @@ export interface SideSheetContentProps {
     bodyStyle?: CSSProperties;
     className: string;
     footer?: React.ReactNode;
+    'aria-label'?: string;
 }
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
     static propTypes: {

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -81,6 +81,7 @@ class SideSheetContent extends _react.default.PureComponent {
 
     if (mask) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        "aria-hidden": true,
         key: "mask",
         className: "".concat(prefixCls, "-mask"),
         style: maskStyle,
@@ -119,6 +120,8 @@ class SideSheetContent extends _react.default.PureComponent {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-header"),
+      role: 'heading',
+      "aria-level": 1,
       style: (0, _assign.default)({}, headerStyle)
     }, header, closer);
   }
@@ -146,7 +149,7 @@ class SideSheetContent extends _react.default.PureComponent {
 
     const dialogElement = /*#__PURE__*/_react.default.createElement("div", {
       key: "dialog-element",
-      role: "sidesheet",
+      role: "dialog",
       tabIndex: -1,
       className: (0, _concat.default)(_context = "".concat(prefixCls, "-inner ")).call(_context, prefixCls, "-inner-wrap"),
       // onMouseDown={this.onDialogMouseDown}

package/lib/cjs/sideSheet/index.d.ts

@@ -43,6 +43,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         closeOnEsc: PropTypes.Requireable<boolean>;
         footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         keepDOM: PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: SideSheetReactProps;
     private _active;

package/lib/cjs/sideSheet/index.js

@@ -284,7 +284,8 @@ SideSheet.propTypes = {
   afterVisibleChange: _propTypes.default.func,
   closeOnEsc: _propTypes.default.bool,
   footer: _propTypes.default.node,
-  keepDOM: _propTypes.default.bool
+  keepDOM: _propTypes.default.bool,
+  'aria-label': _propTypes.default.string
 };
 SideSheet.defaultProps = {
   visible: false,

package/lib/cjs/slider/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import BaseComponent from '../_base/baseComponent';
-import { SliderAdapter, SliderProps as BasicSliceProps, SliderState } from '@douyinfe/semi-foundation/lib/cjs/slider/foundation';
+import SliderFoundation, { SliderAdapter, SliderProps as BasicSliceProps, SliderState } from '@douyinfe/semi-foundation/lib/cjs/slider/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/slider/slider.css';
 export interface SliderProps extends BasicSliceProps {
     style?: CSSProperties;
@@ -16,6 +16,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private dragging;
     private eventListenerSet;
     private chooseMovePos;
+    foundation: SliderFoundation;
     constructor(props: SliderProps);
     get adapter(): SliderAdapter;
     componentDidMount(): void;

package/lib/cjs/slider/index.js

@@ -10,6 +10,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -18,8 +20,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
@@ -70,7 +70,12 @@ class Slider extends _baseComponent.default {
         vertical,
         range,
         tooltipVisible,
-        tipFormatter
+        tipFormatter,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-valuetext': ariaValueText,
+        getAriaValueText,
+        disabled
       } = this.props;
       const {
         chooseMovePos,
@@ -95,6 +100,19 @@ class Slider extends _baseComponent.default {
       const maxClass = (0, _classnames.default)(_constants.cssClasses.HANDLE, {
         ["".concat(_constants.cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
       });
+      const {
+        min,
+        max,
+        currentValue
+      } = this.state;
+      const commonAria = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-disabled': disabled
+      };
+      vertical && (0, _assign.default)(commonAria, {
+        'aria-orientation': 'vertical'
+      });
       const handleContents = !range ? /*#__PURE__*/_react.default.createElement(_index.default, {
         content: tipChildren.min,
         position: "top",
@@ -102,7 +120,7 @@ class Slider extends _baseComponent.default {
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
         ref: this.minHanleEl,
         className: minClass,
@@ -131,15 +149,23 @@ class Slider extends _baseComponent.default {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue) : ariaValueText
+      }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({
         ref: this.minHanleEl,
         className: minClass,
         style: {
@@ -167,15 +193,23 @@ class Slider extends _baseComponent.default {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })), /*#__PURE__*/_react.default.createElement(_index.default, {
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue[0],
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText,
+        "aria-valuemax": currentValue[1],
+        "aria-valuemin": min
+      }))), /*#__PURE__*/_react.default.createElement(_index.default, {
         content: tipChildren.max,
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
         visible: isInRenderTree && tipVisible.max,
         className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({
         ref: this.maxHanleEl,
         className: maxClass,
         style: {
@@ -203,8 +237,16 @@ class Slider extends _baseComponent.default {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })));
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue[1],
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText,
+        "aria-valuemax": max,
+        "aria-valuemin": currentValue[0]
+      }))));
       return handleContents;
     };
 
@@ -225,11 +267,15 @@ class Slider extends _baseComponent.default {
         top: range ? "".concat(minPercent * 100, "%") : 0
       };
       trackStyle = included ? trackStyle : {};
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: _constants.cssClasses.TRACK,
-        style: trackStyle,
-        onClick: e => this.foundation.handleWrapClick(e)
-      });
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        _react.default.createElement("div", {
+          className: _constants.cssClasses.TRACK,
+          style: trackStyle,
+          onClick: e => this.foundation.handleWrapClick(e)
+        })
+      );
     };
 
     this.renderStepDot = () => {
@@ -252,6 +298,7 @@ class Slider extends _baseComponent.default {
         const markPercent = (Number(mark) - min) / (max - min);
         return activeResult ? /*#__PURE__*/_react.default.createElement("span", {
           key: mark,
+          onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")

package/lib/cjs/spin/icon.js

@@ -58,7 +58,9 @@ function Icon() {
     height: "48",
     viewBox: "0 0 36 36",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true,
+    "data-icon": "spin"
   }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",
@@ -77,13 +79,11 @@ function Icon() {
     stopColor: "currentColor",
     offset: "100%"
   }))), /*#__PURE__*/_react.default.createElement("g", {
-    id: "Artboard",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("rect", {
-    id: "Rectangle",
     fillOpacity: "0.01",
     fill: "#FFFFFF",
     x: "0",
@@ -92,7 +92,6 @@ function Icon() {
     height: "36"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951",
-    id: "Path",
     stroke: "url(#".concat(id, ")"),
     strokeWidth: "4",
     strokeLinecap: "round"

package/lib/cjs/steps/basicStep.d.ts

@@ -16,6 +16,9 @@ export interface BasicStepProps {
     done?: boolean;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 export declare enum stepSizeMapIconSize {
     small = "large",

package/lib/cjs/steps/basicStep.js

@@ -10,14 +10,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.stepSizeMapIconSize = exports.default = void 0;
 
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -30,17 +24,6 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/steps/constants");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
-    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 var stepSizeMapIconSize;
 exports.stepSizeMapIconSize = stepSizeMapIconSize;
 
@@ -65,9 +48,9 @@ const BasicStep = props => {
     icon,
     stepNumber,
     onClick,
-    onChange
-  } = props,
-        restProps = __rest(props, ["prefixCls", "className", "size", "title", "description", "status", "style", "active", "done", "icon", "stepNumber", "onClick", "onChange"]);
+    onChange,
+    onKeyDown
+  } = props;
 
   const renderIcon = () => {
     let inner, progress;
@@ -125,10 +108,10 @@ const BasicStep = props => {
     }, inner) : null;
   };
 
-  const classString = (0, _classnames.default)(prefixCls, className, (0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, status), {
+  const classString = (0, _classnames.default)(prefixCls, (0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, status), {
     ["".concat(prefixCls, "-active")]: active,
     ["".concat(prefixCls, "-done")]: done
-  });
+  }, className);
 
   const handleClick = e => {
     if ((0, _isFunction2.default)(onClick)) {
@@ -138,11 +121,26 @@ const BasicStep = props => {
     onChange();
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, restProps, {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if ((0, _isFunction2.default)(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    tabIndex: 0,
+    "aria-current": "step",
     className: classString,
     style: style,
-    onClick: e => handleClick(e)
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => handleClick(e),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-left")

package/lib/cjs/steps/basicSteps.d.ts

@@ -15,6 +15,7 @@ export interface BasicStepsProps {
     hasLine?: boolean;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: BasicStepsProps): JSX.Element;

package/lib/cjs/steps/basicSteps.js

@@ -91,7 +91,7 @@ const Steps = props => {
       return /*#__PURE__*/(0, _react.cloneElement)(child, (0, _assign.default)({}, childProps));
     });
     return content;
-  }, [children, initial, prefixCls, direction, status, current, size]);
+  }, [children, initial, prefixCls, direction, status, current, size, onChange]);
   const wrapperCls = (0, _classnames.default)(className, {
     ["".concat(prefixCls, "-basic")]: true,
     [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, direction)]: true,
@@ -99,6 +99,7 @@ const Steps = props => {
     ["".concat(prefixCls, "-hasline")]: hasLine
   });
   return /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": props["aria-label"],
     className: wrapperCls,
     style: style
   }, inner);

package/lib/cjs/steps/fillStep.d.ts

@@ -12,6 +12,9 @@ export interface FillStepProps {
     stepNumber?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 declare const FillStep: {
     (props: FillStepProps): JSX.Element;

package/lib/cjs/steps/fillStep.js

@@ -37,7 +37,8 @@ const FillStep = props => {
     onClick,
     icon,
     onChange,
-    stepNumber
+    stepNumber,
+    onKeyDown
   } = props;
 
   const renderIcon = () => {
@@ -99,17 +100,31 @@ const FillStep = props => {
     onChange();
   };
 
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if ((0, _isFunction2.default)(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: (0, _classnames.default)({
-      [className]: Boolean(className),
       [prefixCls]: true,
       [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, status)]: Boolean(status),
       ["".concat(prefixCls, "-clickable")]: onClick
-    }),
+    }, className),
     style: style,
     onClick: e => {
       handleClick(e);
-    }
+    },
+    onKeyDown: handleKeyDown
   }, renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-content")
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/cjs/steps/fillSteps.d.ts

@@ -12,6 +12,7 @@ export interface FillStepsProps {
     style?: React.CSSProperties;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: FillStepsProps): JSX.Element;

package/lib/cjs/steps/fillSteps.js

@@ -100,7 +100,8 @@ const Steps = props => {
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperCls,
-    style: style
+    style: style,
+    "aria-label": props["aria-label"]
   }, /*#__PURE__*/_react.default.createElement(_grid.Row, {
     type: "flex",
     justify: "start"

package/lib/cjs/steps/navStep.d.ts

@@ -10,6 +10,9 @@ export interface NavStepProps {
     prefixCls?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 declare const NavStep: {
     (props: NavStepProps): JSX.Element;

package/lib/cjs/steps/navStep.js

@@ -10,12 +10,6 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -28,17 +22,6 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/steps/constants");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
-    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 const NavStep = props => {
   const {
     prefixCls,
@@ -49,13 +32,12 @@ const NavStep = props => {
     index,
     total,
     onClick,
+    onKeyDown,
     onChange
-  } = props,
-        restProps = __rest(props, ["prefixCls", "className", "title", "style", "active", "index", "total", "onClick", "onChange"]);
-
-  const classString = (0, _classnames.default)(prefixCls, className, {
+  } = props;
+  const classString = (0, _classnames.default)(prefixCls, {
     ["".concat(prefixCls, "-active")]: active
-  });
+  }, className);
 
   const handleClick = e => {
     if ((0, _isFunction2.default)(onClick)) {
@@ -65,11 +47,26 @@ const NavStep = props => {
     onChange();
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, restProps, {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if ((0, _isFunction2.default)(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: classString,
     style: style,
-    onClick: e => handleClick(e)
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => handleClick(e),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-content")

package/lib/cjs/steps/navSteps.d.ts

@@ -10,6 +10,7 @@ export interface NavStepsProps {
     size?: Size;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: NavStepsProps): JSX.Element;

package/lib/cjs/steps/navSteps.js

@@ -72,12 +72,13 @@ const Steps = props => {
       return /*#__PURE__*/(0, _react.cloneElement)(child, (0, _assign.default)({}, childProps));
     });
     return content;
-  }, [children, prefixCls, current, size]);
+  }, [children, prefixCls, current, size, initial, onChange]);
   const wrapperCls = (0, _classnames.default)(className, {
     ["".concat(prefixCls, "-nav")]: true,
     [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, size)]: size !== 'default'
   });
   return /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": props["aria-label"],
     className: wrapperCls,
     style: style
   }, inner);