@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/radio/radio.js

@@ -26,6 +26,8 @@ var _radioFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/radio/constants");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 require("@douyinfe/semi-foundation/lib/cjs/radio/radio.css");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
@@ -69,6 +71,12 @@ class Radio extends _baseComponent.default {
     };
     this.foundation = new _radioFoundation.default(this.adapter);
     this.radioEntity = null;
+    this.addonId = (0, _uuid.getUuidShort)({
+      prefix: 'addon'
+    });
+    this.extraId = (0, _uuid.getUuidShort)({
+      prefix: 'extra'
+    });
   }
 
   get adapter() {
@@ -165,9 +173,11 @@ class Radio extends _baseComponent.default {
 
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
       className: addonCls,
-      style: addonStyle
+      style: addonStyle,
+      id: this.addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-extra")
+      className: "".concat(prefix, "-extra"),
+      id: this.extraId
     }, extra) : null);
 
     return /*#__PURE__*/_react.default.createElement("label", {
@@ -183,7 +193,9 @@ class Radio extends _baseComponent.default {
       onChange: this.onChange,
       ref: ref => {
         this.radioEntity = ref;
-      }
+      },
+      addonId: children && this.addonId,
+      extraId: extra && this.extraId
     })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());
@@ -209,8 +221,8 @@ Radio.propTypes = {
   extra: _propTypes.default.node,
   addonStyle: _propTypes.default.object,
   addonClassName: _propTypes.default.string,
-  type: _propTypes.default.oneOf([_constants.strings.TYPE_DEFAULT, _constants.strings.TYPE_BUTTON, _constants.strings.TYPE_CARD, _constants.strings.TYPE_PURECARD]) // Button style type
-
+  type: _propTypes.default.oneOf([_constants.strings.TYPE_DEFAULT, _constants.strings.TYPE_BUTTON, _constants.strings.TYPE_CARD, _constants.strings.TYPE_PURECARD]),
+  'aria-label': _propTypes.default.string
 };
 Radio.defaultProps = {
   autoFocus: false,

package/lib/cjs/radio/radioGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/radio/constants';
-import { RadioGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation';
+import RadioGroupFoundation, { RadioGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { ArrayElement } from '../_base/base';
@@ -30,6 +30,13 @@ export declare type RadioGroupProps = {
     type?: RadioType;
     buttonSize?: RadioGroupButtonSize;
     prefixCls?: string;
+    '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'];
+    id?: string;
 };
 export interface RadioGroupState {
     value?: any;
@@ -50,8 +57,16 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         style: PropTypes.Requireable<object>;
         direction: PropTypes.Requireable<"horizontal" | "vertical">;
         mode: PropTypes.Requireable<"" | "advanced">;
+        'aria-label': PropTypes.Requireable<string>;
+        '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>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<RadioGroupProps>;
+    foundation: RadioGroupFoundation;
     constructor(props: RadioGroupProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: RadioGroupProps): void;

package/lib/cjs/radio/radioGroup.js

@@ -91,7 +91,8 @@ class RadioGroup extends _baseComponent.default {
       style,
       direction,
       type,
-      buttonSize
+      buttonSize,
+      id
     } = this.props;
     const isButtonRadio = type === _constants.strings.TYPE_BUTTON;
     const isPureCardRadio = type === _constants.strings.TYPE_PURECARD;
@@ -140,7 +141,14 @@ class RadioGroup extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixClsDisplay,
-      style: style
+      style: style,
+      id: id,
+      "aria-label": this.props['aria-label'],
+      "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']
     }, /*#__PURE__*/_react.default.createElement(_context6.default.Provider, {
       value: {
         radioGroup: {
@@ -175,7 +183,14 @@ RadioGroup.propTypes = {
   className: _propTypes.default.string,
   style: _propTypes.default.object,
   direction: _propTypes.default.oneOf(_constants.strings.DIRECTION_SET),
-  mode: _propTypes.default.oneOf(_constants.strings.MODE)
+  mode: _propTypes.default.oneOf(_constants.strings.MODE),
+  'aria-label': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
+  id: _propTypes.default.string
 };
 RadioGroup.defaultProps = {
   disabled: false,

package/lib/cjs/radio/radioInner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
+import RadioInnerFoundation, { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type RadioInnerMode = 'advanced' | '';
 export interface RadioInnerProps extends BaseProps {
@@ -14,6 +14,9 @@ export interface RadioInnerProps extends BaseProps {
     prefixCls?: string;
     ref?: React.MutableRefObject<RadioInner> | ((instance: RadioInner) => void);
     isPureCardRadioGroup?: boolean;
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 interface RadioInnerState {
     checked?: boolean;
@@ -26,12 +29,14 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
         isButtonRadio: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         mode: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;
         isButtonRadio: boolean;
     };
     inputEntity: HTMLInputElement;
+    foundation: RadioInnerFoundation;
     constructor(props: RadioInnerProps);
     get adapter(): RadioInnerAdapter;
     componentDidMount(): void;

package/lib/cjs/radio/radioInner.js

@@ -90,7 +90,10 @@ class RadioInner extends _baseComponent.default {
       autoFocus,
       name,
       isButtonRadio,
-      isPureCardRadioGroup
+      isPureCardRadioGroup,
+      addonId,
+      extraId,
+      'aria-label': ariaLabel
     } = this.props;
     const {
       checked
@@ -111,12 +114,16 @@ class RadioInner extends _baseComponent.default {
       ref: ref => {
         this.inputEntity = ref;
       },
+      // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: autoFocus,
       type: mode === 'advanced' ? 'checkbox' : 'radio',
       checked: Boolean(checked),
       disabled: disabled,
       onChange: this.onChange,
-      name: name
+      name: name,
+      "aria-label": ariaLabel,
+      "aria-labelledby": addonId,
+      "aria-describedby": extraId
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: inner
     }, checked ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRadio, null) : null));
@@ -130,7 +137,8 @@ RadioInner.propTypes = {
   disabled: _propTypes.default.bool,
   isButtonRadio: _propTypes.default.bool,
   onChange: _propTypes.default.func,
-  mode: _propTypes.default.oneOf(['advanced', ''])
+  mode: _propTypes.default.oneOf(['advanced', '']),
+  'aria-label': _propTypes.default.string
 };
 RadioInner.defaultProps = {
   onChange: _noop2.default,

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

@@ -7,6 +7,12 @@ import RatingFoundation, { RatingAdapter } from '@douyinfe/semi-foundation/lib/c
 import '@douyinfe/semi-foundation/lib/cjs/rating/rating.css';
 export { RatingItemProps } from './item';
 export interface RatingProps {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-required'?: boolean;
     disabled?: boolean;
     value?: number;
     defaultValue?: number;
@@ -27,6 +33,7 @@ export interface RatingProps {
     autoFocus?: boolean;
     size?: 'small' | 'default' | number;
     tooltips?: string[];
+    id?: string;
 }
 export interface RatingState {
     value: number;
@@ -37,6 +44,12 @@ export interface RatingState {
 export default class Rating extends BaseComponent<RatingProps, RatingState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<number>;
         defaultValue: PropTypes.Requireable<number>;
@@ -56,6 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         autoFocus: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<number | "default" | "small">;
         tooltips: PropTypes.Requireable<string[]>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         defaultValue: number;

package/lib/cjs/rating/index.js

@@ -218,7 +218,8 @@ class Rating extends _baseComponent.default {
       character,
       tabIndex,
       size,
-      tooltips
+      tooltips,
+      id
     } = this.props;
     const {
       value,
@@ -261,6 +262,9 @@ class Rating extends _baseComponent.default {
       ["".concat(prefixCls, "-disabled")]: disabled
     }, className);
     return /*#__PURE__*/_react.default.createElement("ul", {
+      "aria-label": this.props['aria-label'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby'],
       className: listCls,
       style: style,
       onMouseLeave: disabled ? null : this.onMouseLeave,
@@ -269,7 +273,7 @@ class Rating extends _baseComponent.default {
       onBlur: disabled ? null : this.onBlur,
       onKeyDown: disabled ? null : this.onKeyDown,
       ref: this.saveRate,
-      role: "radiogroup"
+      id: id
     }, itemList);
   }
 
@@ -278,6 +282,12 @@ class Rating extends _baseComponent.default {
 exports.default = Rating;
 Rating.contextType = _context4.default;
 Rating.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   value: _propTypes.default.number,
   defaultValue: _propTypes.default.number,
@@ -296,7 +306,8 @@ Rating.propTypes = {
   onKeyDown: _propTypes.default.func,
   autoFocus: _propTypes.default.bool,
   size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number]),
-  tooltips: _propTypes.default.arrayOf(_propTypes.default.string)
+  tooltips: _propTypes.default.arrayOf(_propTypes.default.string),
+  id: _propTypes.default.string
 };
 Rating.defaultProps = {
   defaultValue: 0,

package/lib/cjs/rating/item.d.ts

@@ -15,6 +15,7 @@ export interface RatingItemProps {
     disabled: boolean;
     count: number;
     size: number | ArrayElement<typeof strings.SIZE_SET>;
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
 }
 export default class Item extends PureComponent<RatingItemProps> {
     static propTypes: {
@@ -29,6 +30,7 @@ export default class Item extends PureComponent<RatingItemProps> {
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         size: PropTypes.Requireable<number | "default" | "small">;
+        'aria-describedby': PropTypes.Requireable<string>;
     };
     onHover: React.MouseEventHandler;
     onClick: React.MouseEventHandler;

package/lib/cjs/rating/item.js

@@ -114,6 +114,10 @@ class Item extends _react.PureComponent {
       "aria-checked": value > index ? 'true' : 'false',
       "aria-posinset": index + 1,
       "aria-setsize": count,
+      "aria-disabled": disabled,
+      "aria-label": "Rating ".concat(index + (isHalf ? 0.5 : 1)),
+      "aria-labelledby": this.props['aria-describedby'],
+      "aria-describedby": this.props['aria-describedby'],
       tabIndex: 0,
       className: "".concat(prefixCls, "-wrapper")
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -140,5 +144,6 @@ Item.propTypes = {
   focused: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   count: _propTypes.default.number,
-  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number])
+  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(_constants.strings.SIZE_SET), _propTypes.default.number]),
+  'aria-describedby': _propTypes.default.string
 };

package/lib/cjs/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/cjs/select/index.js

@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _context12 = _interopRequireDefault(require("../configProvider/context"));
+var _context15 = _interopRequireDefault(require("../configProvider/context"));
 
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
 
@@ -110,7 +110,7 @@ const key = 0; // Notes: Use the label of the option as the identifier, that is,
 
 class Select extends _baseComponent.default {
   constructor(props) {
-    var _context, _context2, _context3, _context4, _context5, _context6;
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8;
 
     super(props);
 
@@ -143,6 +143,8 @@ class Select extends _baseComponent.default {
     this.onMouseEnter = (0, _bind.default)(_context4 = this.onMouseEnter).call(_context4, this);
     this.onMouseLeave = (0, _bind.default)(_context5 = this.onMouseLeave).call(_context5, this);
     this.renderOption = (0, _bind.default)(_context6 = this.renderOption).call(_context6, this);
+    this.onKeyPress = (0, _bind.default)(_context7 = this.onKeyPress).call(_context7, this);
+    this.onClearBtnEnterPress = (0, _bind.default)(_context8 = this.onClearBtnEnterPress).call(_context8, this);
     this.foundation = new _foundation.default(this.adapter);
     (0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
     (0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
@@ -346,10 +348,10 @@ class Select extends _baseComponent.default {
         } catch (error) {}
       },
       updateScrollTop: () => {
-        var _context7, _context8;
+        var _context9, _context10;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector((0, _concat.default)(_context7 = (0, _concat.default)(_context8 = "#".concat(prefixcls, "-")).call(_context8, this.selectOptionListID, " .")).call(_context7, prefixcls, "-option-selected"));
+        let destNode = document.querySelector((0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
 
         if ((0, _isArray.default)(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -377,10 +379,10 @@ class Select extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context9, _context10;
+    var _context11, _context12;
 
-    const prevChildrenKeys = (0, _map2.default)(_context9 = _react.default.Children.toArray(prevProps.children)).call(_context9, child => child.key);
-    const nowChildrenKeys = (0, _map2.default)(_context10 = _react.default.Children.toArray(this.props.children)).call(_context10, child => child.key);
+    const prevChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const nowChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(this.props.children)).call(_context12, child => child.key);
     let isOptionsChanged = false;
 
     if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
@@ -471,6 +473,10 @@ class Select extends _baseComponent.default {
     this.foundation.handleClearClick(e);
   }
 
+  onClearBtnEnterPress(e) {
+    this.foundation.handleClearBtnEnterPress(e);
+  }
+
   renderEmpty() {
     return /*#__PURE__*/_react.default.createElement(_option.default, {
       empty: true,
@@ -550,10 +556,16 @@ class Select extends _baseComponent.default {
     }
 
     const customCreateItem = renderCreateItem(option.value, isFocused);
-    return /*#__PURE__*/_react.default.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.default.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) {
@@ -615,7 +627,7 @@ class Select extends _baseComponent.default {
   }
 
   renderOptions(children) {
-    var _context11;
+    var _context13;
 
     const {
       dropdownMinWidth,
@@ -631,7 +643,8 @@ class Select extends _baseComponent.default {
       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 = (0, _filter.default)(options).call(options, item => item._show);
@@ -650,7 +663,7 @@ class Select extends _baseComponent.default {
     });
     const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
     return /*#__PURE__*/_react.default.createElement("div", {
-      id: (0, _concat.default)(_context11 = "".concat(prefixcls, "-")).call(_context11, this.selectOptionListID),
+      id: (0, _concat.default)(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
@@ -659,6 +672,7 @@ class Select extends _baseComponent.default {
       },
       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);
   }
@@ -803,6 +817,10 @@ class Select extends _baseComponent.default {
   onMouseLeave(e) {
     this.foundation.handleMouseLeave(e);
   }
+
+  onKeyPress(e) {
+    this.foundation.handleKeyPress(e);
+  }
   /* Processing logic when popover visible changes */
 
 
@@ -856,7 +874,8 @@ class Select extends _baseComponent.default {
   renderPrefix() {
     const {
       prefix,
-      insetLabel
+      insetLabel,
+      insetLabelId
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = (0, _classnames.default)({
@@ -866,11 +885,14 @@ class Select extends _baseComponent.default {
       ["".concat(prefixcls, "-prefix-icon")]: (0, _utils2.isSemiIcon)(labelNode)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixWrapperCls
+      className: prefixWrapperCls,
+      id: insetLabelId
     }, labelNode);
   }
 
   renderSelection() {
+    var _context14;
+
     const {
       disabled,
       multiple,
@@ -939,13 +961,28 @@ class Select extends _baseComponent.default {
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      "aria-label": "Clear selected value",
+      tabIndex: 0,
       className: (0, _classnames.default)("".concat(prefixcls, "-clear")),
-      onClick: this.onClear
+      onClick: this.onClear,
+      onKeyPress: this.onClearBtnEnterPress
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null)) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "suffix"
     }, suffix ? this.renderSuffix() : null)];
     const tabIndex = disabled ? null : 0;
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      role: "combobox",
+      "aria-disabled": disabled,
+      "aria-expanded": isOpen,
+      "aria-controls": (0, _concat.default)(_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),
@@ -955,7 +992,8 @@ class Select extends _baseComponent.default {
       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);
   }
 
@@ -1004,11 +1042,17 @@ class Select extends _baseComponent.default {
 
 }
 
-Select.contextType = _context12.default;
+Select.contextType = _context15.default;
 Select.Option = _option.default;
 Select.OptGroup = _optionGroup.default;
 Select.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   autoFocus: _propTypes.default.bool,
+  autoClearSearchValue: _propTypes.default.bool,
   children: _propTypes.default.node,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
@@ -1053,6 +1097,7 @@ Select.propTypes = {
   suffix: _propTypes.default.node,
   prefix: _propTypes.default.node,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   showClear: _propTypes.default.bool,
   showArrow: _propTypes.default.bool,
   renderSelectedItem: _propTypes.default.func,
@@ -1113,6 +1158,7 @@ Select.defaultProps = {
   showClear: false,
   remote: false,
   autoAdjustOverflow: true,
+  autoClearSearchValue: true,
   arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.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