@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

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

@@ -55,8 +55,14 @@ export declare type RenderMultipleSelectedItemFn = (optionNode: Record<string, a
 };
 export declare type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 export declare type SelectProps = {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     id?: string;
     autoFocus?: boolean;
+    autoClearSearchValue?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
@@ -92,6 +98,7 @@ export declare type SelectProps = {
     suffix?: React.ReactNode;
     prefix?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     inputProps?: Subtract<InputProps, ExcludeInputType>;
     showClear?: boolean;
     showArrow?: boolean;
@@ -134,7 +141,13 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     static Option: typeof Option;
     static OptGroup: typeof OptionGroup;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
+        autoClearSearchValue: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultValue: PropTypes.Requireable<string | number | object>;
         value: PropTypes.Requireable<string | number | object>;
@@ -175,6 +188,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         showClear: PropTypes.Requireable<boolean>;
         showArrow: PropTypes.Requireable<boolean>;
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
@@ -223,6 +237,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     focus(): void;
     onSelect(option: OptionProps, optionIndex: number, e: any): void;
     onClear(e: React.MouseEvent): void;
+    onClearBtnEnterPress(e: React.KeyboardEvent): void;
     renderEmpty(): JSX.Element;
     renderLoading(): JSX.Element;
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
@@ -235,6 +250,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     onMouseEnter(e: MouseEvent): void;
     onMouseLeave(e: MouseEvent): void;
+    onKeyPress(e: React.KeyboardEvent): void;
     handlePopoverVisibleChange(status: any): void;
     renderSuffix(): JSX.Element;
     renderPrefix(): JSX.Element;

package/lib/es/select/index.js

@@ -49,7 +49,7 @@ const key = 0; // Notes: Use the label of the option as the identifier, that is,
 
 class Select extends BaseComponent {
   constructor(props) {
-    var _context, _context2, _context3, _context4, _context5, _context6;
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8;
 
     super(props);
 
@@ -82,6 +82,8 @@ class Select extends BaseComponent {
     this.onMouseEnter = _bindInstanceProperty(_context4 = this.onMouseEnter).call(_context4, this);
     this.onMouseLeave = _bindInstanceProperty(_context5 = this.onMouseLeave).call(_context5, this);
     this.renderOption = _bindInstanceProperty(_context6 = this.renderOption).call(_context6, this);
+    this.onKeyPress = _bindInstanceProperty(_context7 = this.onKeyPress).call(_context7, this);
+    this.onClearBtnEnterPress = _bindInstanceProperty(_context8 = this.onClearBtnEnterPress).call(_context8, this);
     this.foundation = new SelectFoundation(this.adapter);
     warning('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     warning('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -284,10 +286,10 @@ class Select extends BaseComponent {
         } catch (error) {}
       },
       updateScrollTop: () => {
-        var _context7, _context8;
+        var _context9, _context10;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(_concatInstanceProperty(_context7 = _concatInstanceProperty(_context8 = "#".concat(prefixcls, "-")).call(_context8, this.selectOptionListID, " .")).call(_context7, prefixcls, "-option-selected"));
+        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -315,11 +317,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context9, _context10;
+    var _context11, _context12;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context9 = React.Children.toArray(prevProps.children)).call(_context9, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context10 = React.Children.toArray(this.props.children)).call(_context10, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -415,6 +417,10 @@ class Select extends BaseComponent {
     this.foundation.handleClearClick(e);
   }
 
+  onClearBtnEnterPress(e) {
+    this.foundation.handleClearBtnEnterPress(e);
+  }
+
   renderEmpty() {
     return /*#__PURE__*/React.createElement(Option, {
       empty: true,
@@ -493,10 +499,16 @@ class Select extends BaseComponent {
     }
 
     const customCreateItem = renderCreateItem(option.value, isFocused);
-    return /*#__PURE__*/React.createElement("div", {
-      onClick: e => this.onSelect(option, optionIndex, e),
-      key: new Date().valueOf()
-    }, customCreateItem);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
+      React.createElement("div", {
+        role: "button",
+        "aria-label": "Use the input box to create an optional item",
+        onClick: e => this.onSelect(option, optionIndex, e),
+        key: new Date().valueOf()
+      }, customCreateItem)
+    );
   }
 
   onOptionHover(optionIndex) {
@@ -559,7 +571,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context11;
+    var _context13;
 
     const {
       dropdownMinWidth,
@@ -575,7 +587,8 @@ class Select extends BaseComponent {
       outerBottomSlot,
       innerBottomSlot,
       loading,
-      virtualize
+      virtualize,
+      multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
     const visibileOptions = _filterInstanceProperty(options).call(options, item => item._show);
@@ -596,7 +609,7 @@ class Select extends BaseComponent {
     });
     const isEmpty = !options.length || !_someInstanceProperty(options).call(options, item => item._show);
     return /*#__PURE__*/React.createElement("div", {
-      id: _concatInstanceProperty(_context11 = "".concat(prefixcls, "-")).call(_context11, this.selectOptionListID),
+      id: _concatInstanceProperty(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
@@ -605,6 +618,7 @@ class Select extends BaseComponent {
       },
       className: optionListCls,
       role: "listbox",
+      "aria-multiselectable": multiple,
       onScroll: e => this.foundation.handleListScroll(e)
     }, innerTopSlot, !loading ? listContent : this.renderLoading(), isEmpty && !loading ? this.renderEmpty() : null, innerBottomSlot), outerBottomSlot);
   }
@@ -750,6 +764,10 @@ class Select extends BaseComponent {
   onMouseLeave(e) {
     this.foundation.handleMouseLeave(e);
   }
+
+  onKeyPress(e) {
+    this.foundation.handleKeyPress(e);
+  }
   /* Processing logic when popover visible changes */
 
 
@@ -805,7 +823,8 @@ class Select extends BaseComponent {
   renderPrefix() {
     const {
       prefix,
-      insetLabel
+      insetLabel,
+      insetLabelId
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = cls({
@@ -815,11 +834,14 @@ class Select extends BaseComponent {
       ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: prefixWrapperCls
+      className: prefixWrapperCls,
+      id: insetLabelId
     }, labelNode);
   }
 
   renderSelection() {
+    var _context14;
+
     const {
       disabled,
       multiple,
@@ -888,13 +910,28 @@ class Select extends BaseComponent {
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/React.createElement(Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      "aria-label": "Clear selected value",
+      tabIndex: 0,
       className: cls("".concat(prefixcls, "-clear")),
-      onClick: this.onClear
+      onClick: this.onClear,
+      onKeyPress: this.onClearBtnEnterPress
     }, /*#__PURE__*/React.createElement(IconClear, null)) : arrowContent), /*#__PURE__*/React.createElement(Fragment, {
       key: "suffix"
     }, suffix ? this.renderSuffix() : null)];
     const tabIndex = disabled ? null : 0;
     return /*#__PURE__*/React.createElement("div", _Object$assign({
+      role: "combobox",
+      "aria-disabled": disabled,
+      "aria-expanded": isOpen,
+      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-haspopup": "listbox",
+      "aria-label": "select value",
+      "aria-invalid": this.props['aria-invalid'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby'],
+      "aria-required": this.props['aria-required'],
       className: selectionCls,
       ref: ref => this.triggerRef.current = ref,
       onClick: e => this.foundation.handleClick(e),
@@ -904,7 +941,8 @@ class Select extends BaseComponent {
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       // onFocus={e => this.foundation.handleTriggerFocus(e)}
-      onBlur: e => this.foundation.handleTriggerBlur(e)
+      onBlur: e => this.foundation.handleTriggerBlur(e),
+      onKeyPress: this.onKeyPress
     }, keyboardEventSet), inner);
   }
 
@@ -957,7 +995,13 @@ Select.contextType = ConfigContext;
 Select.Option = Option;
 Select.OptGroup = OptionGroup;
 Select.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   autoFocus: PropTypes.bool,
+  autoClearSearchValue: PropTypes.bool,
   children: PropTypes.node,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
@@ -1002,6 +1046,7 @@ Select.propTypes = {
   suffix: PropTypes.node,
   prefix: PropTypes.node,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   showClear: PropTypes.bool,
   showArrow: PropTypes.bool,
   renderSelectedItem: PropTypes.func,
@@ -1062,6 +1107,7 @@ Select.defaultProps = {
   showClear: false,
   remote: false,
   autoAdjustOverflow: true,
+  autoClearSearchValue: true,
   arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, null) // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here

package/lib/es/select/option.js

@@ -130,28 +130,34 @@ class Option extends PureComponent {
         highlightClassName: "".concat(prefixCls, "-keyword")
       }
     };
-    return /*#__PURE__*/React.createElement("div", {
-      className: optionClassName,
-      onClick: e => {
-        this.onClick(_Object$assign({
-          value,
-          label,
-          children
-        }, rest), e);
-      },
-      onMouseEnter: e => onMouseEnter && onMouseEnter(e),
-      role: "option",
-      style: style
-    }, showTick ? /*#__PURE__*/React.createElement("div", {
-      className: selectedIconClassName
-    }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.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.createElement("div", {
+        className: optionClassName,
+        onClick: e => {
+          this.onClick(_Object$assign({
+            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.createElement("div", {
+        className: selectedIconClassName
+      }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-text")
+      }, this.renderOptionContent({
+        children,
+        config,
+        inputValue,
+        prefixCls
+      })) : children)
+    );
   }
 
 }

package/lib/es/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/es/sideSheet/SideSheetContent.js

@@ -58,6 +58,7 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (mask) {
       return /*#__PURE__*/React.createElement("div", {
+        "aria-hidden": true,
         key: "mask",
         className: "".concat(prefixCls, "-mask"),
         style: maskStyle,
@@ -78,7 +79,8 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "aria-label": 'Sidesheet title'
       }, this.props.title);
     }
 
@@ -96,6 +98,7 @@ export default class SideSheetContent extends React.PureComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-header"),
+      role: 'heading',
       style: _Object$assign({}, headerStyle)
     }, header, closer);
   }
@@ -122,18 +125,21 @@ export default class SideSheetContent extends React.PureComponent {
     const header = this.renderHeader();
     const dialogElement = /*#__PURE__*/React.createElement("div", {
       key: "dialog-element",
-      role: "sidesheet",
+      role: "dialog",
       tabIndex: -1,
       className: _concatInstanceProperty(_context = "".concat(prefixCls, "-inner ")).call(_context, prefixCls, "-inner-wrap"),
       // onMouseDown={this.onDialogMouseDown}
       style: _Object$assign(_Object$assign({}, props.style), style)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: "".concat(prefixCls, "-content"),
+      "aria-label": "Sidesheet content"
     }, header, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-body"),
+      "aria-label": "Sidesheet body",
       style: props.bodyStyle
     }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
+      className: "".concat(prefixCls, "-footer"),
+      "aria-label": "Sidesheet footer"
     }, props.footer) : null));
     return dialogElement;
   }
@@ -155,7 +161,8 @@ export default class SideSheetContent extends React.PureComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,
-      style: wrapperStyle
+      style: wrapperStyle,
+      "aria-label": this.props['aria-label']
     }, this.getMaskElement(), this.getDialogElement());
   }
 

package/lib/es/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/es/sideSheet/index.js

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

package/lib/es/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/es/slider/foundation';
+import SliderFoundation, { SliderAdapter, SliderProps as BasicSliceProps, SliderState } from '@douyinfe/semi-foundation/lib/es/slider/foundation';
 import '@douyinfe/semi-foundation/lib/es/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/es/slider/index.js

@@ -1,10 +1,10 @@
 import _noop from "lodash/noop";
 import _isEqual from "lodash/isEqual";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
@@ -40,7 +40,12 @@ export default class Slider extends BaseComponent {
         vertical,
         range,
         tooltipVisible,
-        tipFormatter
+        tipFormatter,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-valuetext': ariaValueText,
+        getAriaValueText,
+        disabled
       } = this.props;
       const {
         chooseMovePos,
@@ -65,6 +70,19 @@ export default class Slider extends BaseComponent {
       const maxClass = cls(cssClasses.HANDLE, {
         ["".concat(cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
       });
+      const {
+        min,
+        max,
+        currentValue
+      } = this.state;
+      const commonAria = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-disabled': disabled
+      };
+      vertical && _Object$assign(commonAria, {
+        'aria-orientation': 'vertical'
+      });
       const handleContents = !range ? /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
@@ -72,7 +90,7 @@ export default class Slider extends BaseComponent {
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
         ref: this.minHanleEl,
         className: minClass,
@@ -101,15 +119,23 @@ export default class Slider extends BaseComponent {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+        },
+        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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.minHanleEl,
         className: minClass,
         style: {
@@ -137,15 +163,23 @@ export default class Slider extends BaseComponent {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })), /*#__PURE__*/React.createElement(Tooltip, {
+        },
+        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.createElement(Tooltip, {
         content: tipChildren.max,
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
         visible: isInRenderTree && tipVisible.max,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.maxHanleEl,
         className: maxClass,
         style: {
@@ -173,8 +207,16 @@ export default class Slider extends BaseComponent {
         },
         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;
     };
 
@@ -195,11 +237,15 @@ export default class Slider extends BaseComponent {
         top: range ? "".concat(minPercent * 100, "%") : 0
       };
       trackStyle = included ? trackStyle : {};
-      return /*#__PURE__*/React.createElement("div", {
-        className: 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.createElement("div", {
+          className: cssClasses.TRACK,
+          style: trackStyle,
+          onClick: e => this.foundation.handleWrapClick(e)
+        })
+      );
     };
 
     this.renderStepDot = () => {
@@ -222,6 +268,7 @@ export default class Slider extends BaseComponent {
         const markPercent = (Number(mark) - min) / (max - min);
         return activeResult ? /*#__PURE__*/React.createElement("span", {
           key: mark,
+          onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")

package/lib/es/spin/icon.js

@@ -43,7 +43,8 @@ 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-label": "spin"
   }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",
@@ -62,13 +63,11 @@ function Icon() {
     stopColor: "currentColor",
     offset: "100%"
   }))), /*#__PURE__*/React.createElement("g", {
-    id: "Artboard",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "Rectangle",
     fillOpacity: "0.01",
     fill: "#FFFFFF",
     x: "0",
@@ -77,7 +76,6 @@ function Icon() {
     height: "36"
   }), /*#__PURE__*/React.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/es/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",