@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/form/label.js

@@ -40,7 +40,8 @@ class Label extends _react.PureComponent {
       align,
       style,
       className,
-      extra
+      extra,
+      id
     } = this.props;
     const labelCls = (0, _classnames.default)(className, {
       ["".concat(prefixCls, "-field-label")]: true,
@@ -64,7 +65,8 @@ class Label extends _react.PureComponent {
     return /*#__PURE__*/_react.default.createElement("label", {
       className: labelCls,
       htmlFor: name,
-      style: labelStyle
+      style: labelStyle,
+      id: id
     }, extra ? contentWithExtra : textContent);
   }
 
@@ -78,6 +80,7 @@ Label.defaultProps = {
   className: ''
 };
 Label.propTypes = {
+  id: _propTypes.default.string,
   children: _propTypes.default.node,
   required: _propTypes.default.bool,
   text: _propTypes.default.node,

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

@@ -9,6 +9,12 @@ export declare type InputSize = 'small' | 'large' | 'default';
 export declare type InputMode = 'password';
 export declare type ValidateStatus = "default" | "error" | "warning" | "success";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    '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'];
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -24,6 +30,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     hideSuffix?: boolean;
     placeholder?: React.ReactText;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     size?: InputSize;
     className?: string;
     style?: React.CSSProperties;
@@ -54,6 +61,12 @@ export interface InputState {
 }
 declare class Input extends BaseComponent<InputProps, InputState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         addonBefore: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         addonAfter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -82,6 +95,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
         onEnterPress: PropTypes.Requireable<(...args: any[]) => any>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
         getValueLength: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -147,6 +161,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
     componentDidUpdate(prevProps: InputProps): void;
     handleClear: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -154,6 +169,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     handleClickEye: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleModeEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
     handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
     renderPrepend(): JSX.Element;

package/lib/cjs/input/index.js

@@ -68,6 +68,10 @@ class Input extends _baseComponent.default {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
@@ -100,6 +104,10 @@ class Input extends _baseComponent.default {
       this.foundation.handleMouseUp(e);
     };
 
+    this.handleModeEnterPress = e => {
+      this.foundation.handleModeEnterPress(e);
+    };
+
     this.handleClickPrefixOrSuffix = e => {
       this.foundation.handleClickPrefixOrSuffix(e);
     };
@@ -234,8 +242,12 @@ class Input extends _baseComponent.default {
 
     if (allowClear) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear input value",
         className: clearCls,
-        onMouseDown: this.handleClear
+        onMouseDown: this.handleClear,
+        onKeyPress: this.handleClearEnterPress
       }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
     }
 
@@ -256,13 +268,18 @@ class Input extends _baseComponent.default {
     const modeCls = (0, _classnames.default)("".concat(prefixCls, "-modebtn"));
     const modeIcon = eyeClosed ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeClosedSolid, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, null);
     const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+    const ariaLabel = eyeClosed ? 'Show password' : 'Hidden password';
 
     if (showModeBtn) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
         className: modeCls,
         onClick: this.handleClickEye,
         onMouseDown: this.handleMouseDown,
-        onMouseUp: this.handleMouseUp
+        onMouseUp: this.handleMouseUp,
+        onKeyPress: this.handleModeEnterPress
       }, modeIcon);
     }
 
@@ -272,7 +289,8 @@ class Input extends _baseComponent.default {
   renderPrefix() {
     const {
       prefix,
-      insetLabel
+      insetLabel,
+      insetLabelId
     } = this.props;
     const labelNode = prefix || insetLabel;
 
@@ -285,11 +303,13 @@ class Input extends _baseComponent.default {
       ["".concat(prefixCls, "-inset-label")]: insetLabel,
       ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
       ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
-    });
+    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixWrapperCls,
       onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix
+      onClick: this.handleClickPrefixOrSuffix,
+      id: insetLabelId
     }, labelNode);
   }
 
@@ -321,7 +341,8 @@ class Input extends _baseComponent.default {
       ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
       ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix),
       ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
-    });
+    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: suffixWrapperCls,
       onMouseDown: this.handlePreventMouseDown,
@@ -424,21 +445,35 @@ class Input extends _baseComponent.default {
       inputProps.minLength = stateMinLength;
     }
 
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapperCls,
-      style: style,
-      onMouseEnter: e => this.handleMouseOver(e),
-      onMouseLeave: e => this.handleMouseLeave(e),
-      onClick: e => this.handleClick(e)
-    }, this.renderPrepend(), this.renderPrefix(), /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, inputProps, {
-      ref: ref
-    })), this.renderClearBtn(), this.renderSuffix(suffixAllowClear), this.renderModeBtn(), this.renderAppend());
+    if (validateStatus === 'error') {
+      inputProps['aria-invalid'] = "true";
+    }
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: wrapperCls,
+        style: style,
+        onMouseEnter: e => this.handleMouseOver(e),
+        onMouseLeave: e => this.handleMouseLeave(e),
+        onClick: e => this.handleClick(e)
+      }, this.renderPrepend(), this.renderPrefix(), /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, inputProps, {
+        ref: ref
+      })), this.renderClearBtn(), this.renderSuffix(suffixAllowClear), this.renderModeBtn(), this.renderAppend())
+    );
   }
 
 }
 
 exports.Input = Input;
 Input.propTypes = {
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   addonBefore: _propTypes.default.node,
   addonAfter: _propTypes.default.node,
   prefix: _propTypes.default.node,
@@ -467,6 +502,7 @@ Input.propTypes = {
   onKeyPress: _propTypes.default.func,
   onEnterPress: _propTypes.default.func,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   inputStyle: _propTypes.default.object,
   getValueLength: _propTypes.default.func
 };

package/lib/cjs/input/inputGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
+import { LabelProps } from '../form/label';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
 export declare type InputSize = 'small' | 'large' | 'default';
 export interface InputGroupProps {
@@ -10,7 +11,7 @@ export interface InputGroupProps {
     style?: Record<string, any>;
     onBlur?: (e: React.FocusEvent<HTMLSpanElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLSpanElement>) => void;
-    label?: Record<string, any>;
+    label?: LabelProps;
     labelPosition?: string;
     disabled?: boolean;
 }

package/lib/cjs/input/inputGroup.js

@@ -77,9 +77,16 @@ class inputGroup extends _baseComponent.default {
       [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, size)]: size !== 'default'
     }); // const labelCls = cls(label.className, '');
 
+    const defaultName = 'input-group';
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "group",
+      "aria-label": "Input group",
+      "aria-disabled": this.props.disabled,
       className: groupWrapperCls
-    }, label && label.text ? /*#__PURE__*/_react.default.createElement(_label.default, (0, _assign.default)({}, label)) : null, /*#__PURE__*/_react.default.createElement("span", {
+    }, label && label.text ? /*#__PURE__*/_react.default.createElement(_label.default, (0, _assign.default)({
+      name: defaultName
+    }, label)) : null, /*#__PURE__*/_react.default.createElement("span", {
+      id: label && label.name || defaultName,
       className: groupCls,
       style: this.props.style,
       onFocus: this.props.onFocus,
@@ -135,6 +142,9 @@ class inputGroup extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("span", {
+      role: "group",
+      "aria-label": "Input group",
+      "aria-disabled": this.props.disabled,
       className: groupCls,
       style: style,
       onFocus: this.props.onFocus,

package/lib/cjs/input/textarea.js

@@ -63,6 +63,10 @@ class TextArea extends _baseComponent.default {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.setRef = node => {
       this.libRef.current = node;
       const {
@@ -188,8 +192,12 @@ class TextArea extends _baseComponent.default {
 
     if (showClear) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear textarea value",
         className: clearCls,
-        onClick: this.handleClear
+        onClick: this.handleClear,
+        onKeyPress: this.handleClearEnterPress
       }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
     }
 
@@ -215,6 +223,9 @@ class TextArea extends _baseComponent.default {
         ["".concat(prefixCls, "-textarea-counter-exceed")]: current > total
       });
       counter = /*#__PURE__*/_react.default.createElement("div", {
+        "aria-label": "Textarea value length counter",
+        "aria-valuemax": maxCount,
+        "aria-valuenow": current,
         className: countCls
       }, current, total ? '/' : null, total);
     } else {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/cjs/inputNumber/inputNumber.css';
@@ -16,6 +16,7 @@ export interface InputNumberProps extends InputProps {
     hideButtons?: boolean;
     innerButtons?: boolean;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     keepFocus?: boolean;
     max?: number;
     min?: number;
@@ -47,6 +48,12 @@ export interface InputNumberState {
 }
 declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         autofocus: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
         defaultValue: PropTypes.Requireable<string | number>;
@@ -56,6 +63,7 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
         hideButtons: PropTypes.Requireable<boolean>;
         innerButtons: PropTypes.Requireable<boolean>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         keepFocus: PropTypes.Requireable<boolean>;
         max: PropTypes.Requireable<number>;
         min: PropTypes.Requireable<number>;
@@ -85,20 +93,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/cjs/inputNumber/index.js

@@ -140,6 +140,8 @@ class InputNumber extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: suffixChildrenCls
       }, /*#__PURE__*/_react.default.createElement("span", {
+        role: "button",
+        tabIndex: -1,
         className: upClassName,
         onMouseDown: notAllowedUp ? _noop2.default : this.handleUpClick,
         onMouseUp: this.handleMouseUp,
@@ -147,6 +149,8 @@ class InputNumber extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronUp, {
         size: "extra-small"
       })), /*#__PURE__*/_react.default.createElement("span", {
+        role: "button",
+        tabIndex: -1,
         className: downClassName,
         onMouseDown: notAllowedDown ? _noop2.default : this.handleDownClick,
         onMouseUp: this.handleMouseUp,
@@ -363,7 +367,11 @@ class InputNumber extends _baseComponent.default {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
@@ -438,12 +446,29 @@ class InputNumber extends _baseComponent.default {
           rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus"]);
 
     const {
-      value
+      value,
+      number
     } = this.state;
     const inputNumberCls = (0, _classnames.default)(className, "".concat(prefixCls, "-number"), {
       [(0, _concat.default)(_context = "".concat(prefixCls, "-number-size-")).call(_context, size)]: size
     });
     const buttons = this.renderButtons();
+    const ariaProps = {
+      'aria-disabled': disabled,
+      step
+    };
+
+    if (number) {
+      ariaProps['aria-valuenow'] = number;
+    }
+
+    if (max !== Infinity) {
+      ariaProps['aria-valuemax'] = max;
+    }
+
+    if (min !== -Infinity) {
+      ariaProps['aria-valuemin'] = min;
+    }
 
     const input = /*#__PURE__*/_react.default.createElement("div", {
       className: inputNumberCls,
@@ -451,7 +476,9 @@ class InputNumber extends _baseComponent.default {
       onMouseMove: e => this.handleInputMouseMove(e),
       onMouseEnter: e => this.handleInputMouseEnter(e),
       onMouseLeave: e => this.handleInputMouseLeave(e)
-    }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _assign.default)({}, rest, {
+    }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _assign.default)({
+      role: "spinbutton"
+    }, ariaProps, rest, {
       size: size,
       disabled: disabled,
       ref: this.setInputRef,
@@ -470,6 +497,12 @@ class InputNumber extends _baseComponent.default {
 
 exports.InputNumber = InputNumber;
 InputNumber.propTypes = {
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   autofocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -479,6 +512,7 @@ InputNumber.propTypes = {
   hideButtons: _propTypes.default.bool,
   innerButtons: _propTypes.default.bool,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   keepFocus: _propTypes.default.bool,
   max: _propTypes.default.number,
   min: _propTypes.default.number,

package/lib/cjs/layout/Sider.d.ts

@@ -14,6 +14,8 @@ export interface SiderProps {
     className?: string;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'role'?: React.AriaRole;
 }
 declare class Sider extends React.PureComponent<SiderProps> {
     static propTypes: {
@@ -22,6 +24,8 @@ declare class Sider extends React.PureComponent<SiderProps> {
         className: PropTypes.Requireable<string>;
         breakpoint: PropTypes.Requireable<string[]>;
         onBreakpoint: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         prefixCls: string;

package/lib/cjs/layout/Sider.js

@@ -137,6 +137,7 @@ class Sider extends _react.default.PureComponent {
     });
     return /*#__PURE__*/_react.default.createElement("aside", (0, _assign.default)({
       className: classString,
+      "aria-label": this.props['aria-label'],
       style: style
     }, (0, _getDataAttr.default)(others)), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-sider-children")
@@ -150,7 +151,9 @@ Sider.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   breakpoint: _propTypes.default.arrayOf(_propTypes.default.oneOf(bpt)),
-  onBreakpoint: _propTypes.default.func
+  onBreakpoint: _propTypes.default.func,
+  'aria-label': _propTypes.default.string,
+  role: _propTypes.default.string
 };
 Sider.defaultProps = {
   prefixCls: _constants.cssClasses.PREFIX

package/lib/cjs/layout/index.js

@@ -58,6 +58,8 @@ function generator(type) {
   return BasicComponent => class Adapter extends _react.default.PureComponent {
     render() {
       return /*#__PURE__*/_react.default.createElement(BasicComponent, (0, _assign.default)({
+        role: this.props.role,
+        "aria-label": this.props['aria-label'],
         type: typeName,
         tagName: tagName
       }, this.props));

package/lib/cjs/list/item.js

@@ -110,7 +110,6 @@ class ListItem extends _react.PureComponent {
     }
 
     let content = /*#__PURE__*/_react.default.createElement("li", {
-      role: "list-item",
       className: itemCls,
       style: style,
       onClick: handleClick,

package/lib/cjs/modal/Modal.js

@@ -114,6 +114,7 @@ class Modal extends _baseComponent.default {
           return null;
         } else {
           return /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+            "aria-label": "cancel",
             onClick: this.handleCancel,
             loading: cancelLoading,
             type: "tertiary"
@@ -124,6 +125,7 @@ class Modal extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Modal"
       }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("div", null, getCancelButton(locale), /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+        "aria-label": "confirm",
         type: okType,
         theme: "solid",
         loading: confirmLoading,

package/lib/cjs/modal/ModalContent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
-import { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation';
+import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation';
 export default class ModalContent extends BaseComponent<ModalContentProps, ModalContentState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
@@ -19,6 +19,8 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
     };
     dialogId: string;
     private timeoutId;
+    modalDialogRef: React.MutableRefObject<HTMLDivElement>;
+    foundation: ModalContentFoundation;
     constructor(props: ModalContentProps);
     get adapter(): ModalContentAdapter;
     componentDidMount(): void;