@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/tree/index.js

@@ -563,6 +563,7 @@ class Tree extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+        "aria-label": 'Filter Tree',
         ref: this.inputRef
       }, inputProps));
     }));
@@ -665,6 +666,14 @@ class Tree extends _baseComponent.default {
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
     const noData = (0, _isEmpty2.default)(keyEntities) || showFilteredOnly && searchNoRes;
+    const ariaAttr = {
+      role: noData ? 'none' : 'tree'
+    };
+
+    if (ariaAttr.role === 'tree') {
+      ariaAttr['aria-multiselectable'] = multiple ? true : false;
+    }
+
     return /*#__PURE__*/_react.default.createElement(_treeContext.default.Provider, {
       value: {
         treeDisabled: disabled,
@@ -702,13 +711,12 @@ class Tree extends _baseComponent.default {
         labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
+      "aria-label": this.props['aria-label'],
       className: wrapperCls,
-      role: "list-box",
       style: style
-    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: listCls,
-      role: "tree"
-    }, noData ? this.renderEmpty() : this.renderNodeList())));
+    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      className: listCls
+    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
   }
 
 }
@@ -773,7 +781,8 @@ Tree.propTypes = {
   onDragOver: _propTypes.default.func,
   onDragStart: _propTypes.default.func,
   onDrop: _propTypes.default.func,
-  labelEllipsis: _propTypes.default.bool
+  labelEllipsis: _propTypes.default.bool,
+  'aria-label': _propTypes.default.string
 };
 Tree.defaultProps = {
   showClear: true,

package/lib/cjs/tree/treeNode.d.ts

@@ -29,11 +29,19 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     debounceSelect: any;
     refNode: HTMLElement;
     constructor(props: TreeNodeProps);
-    onSelect: (e: React.MouseEvent) => void;
-    onExpand: (e: React.MouseEvent) => void;
-    onCheck: (e: React.MouseEvent) => void;
+    onSelect: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onExpand: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onCheck: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate checkbox click
+     */
+    handleCheckEnterPress: (e: React.KeyboardEvent) => void;
     onContextMenu: (e: React.MouseEvent) => void;
-    onClick: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate li click
+     */
+    handleliEnterPress: (e: React.KeyboardEvent) => void;
     onDoubleClick: (e: React.MouseEvent) => void;
     onDragStart: (e: React.DragEvent) => void;
     onDragEnter: (e: React.DragEvent) => void;

package/lib/cjs/tree/treeNode.js

@@ -24,6 +24,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -38,6 +40,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/tree/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _semiIcons = require("@douyinfe/semi-icons");
 
 var _checkbox = require("../checkbox");
@@ -95,6 +99,16 @@ class TreeNode extends _react.PureComponent {
       e.nativeEvent.stopImmediatePropagation();
       onNodeCheck(e, this.props);
     };
+    /**
+     * A11y: simulate checkbox click
+     */
+
+
+    this.handleCheckEnterPress = e => {
+      if ((0, _isEnterPress.default)(e)) {
+        this.onCheck(e);
+      }
+    };
 
     this.onContextMenu = e => {
       const {
@@ -119,6 +133,16 @@ class TreeNode extends _react.PureComponent {
         this.onExpand(e);
       }
     };
+    /**
+     * A11y: simulate li click
+     */
+
+
+    this.handleliEnterPress = e => {
+      if ((0, _isEnterPress.default)(e)) {
+        this.onClick(e);
+      }
+    };
 
     this.onDoubleClick = e => {
       const {
@@ -294,7 +318,8 @@ class TreeNode extends _react.PureComponent {
   renderArrow() {
     const showIcon = !this.isLeaf();
     const {
-      loading
+      loading,
+      expanded
     } = this.props;
 
     if (loading) {
@@ -305,6 +330,8 @@ class TreeNode extends _react.PureComponent {
 
     if (showIcon) {
       return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
+        role: 'button',
+        "aria-label": "".concat(expanded ? 'Expand' : 'Collapse', " the tree item"),
         className: "".concat(prefixcls, "-expand-icon"),
         size: "small",
         onClick: this.onExpand
@@ -323,8 +350,11 @@ class TreeNode extends _react.PureComponent {
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/_react.default.createElement("div", {
-      onClick: this.onCheck
+      role: 'none',
+      onClick: this.onCheck,
+      onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+      "aria-label": 'Toggle the checked state of checkbox',
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
@@ -377,7 +407,7 @@ class TreeNode extends _react.PureComponent {
     });
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: wrapperCls
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("li", {
       className: (0, _concat.default)(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
@@ -484,11 +514,21 @@ class TreeNode extends _react.PureComponent {
       ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
       ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
     });
+    const setsize = (0, _get2.default)(rest, ['data', 'children', 'length']);
+    const posinset = (0, _isString2.default)(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
     return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
       className: nodeCls,
-      role: "treenode",
+      role: "treeitem",
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      "aria-selected": selected,
+      "aria-setsize": setsize,
+      "aria-posinset": posinset,
+      "aria-expanded": expanded,
+      "aria-level": level + 1,
       "data-key": eventKey,
       onClick: this.onClick,
+      onKeyPress: this.handleliEnterPress,
       onContextMenu: this.onContextMenu,
       onDoubleClick: this.onDoubleClick,
       ref: this.setRef,

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

@@ -34,6 +34,11 @@ export declare type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'd
 * TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
 */
 export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps> {
+    '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'];
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -45,6 +50,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     dropdownMatchSelectWidth?: boolean;
     dropdownStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     maxTagCount?: number;
     motionExpand?: boolean;
     optionListStyle?: React.CSSProperties;
@@ -85,6 +91,11 @@ export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, Override
 declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     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-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         loadedKeys: PropTypes.Requireable<string[]>;
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
@@ -136,6 +147,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
@@ -156,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         optionListStyle: PropTypes.Requireable<object>;
         searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<TreeSelectProps>;
     inputRef: React.RefObject<typeof Input>;
@@ -167,6 +180,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
+    treeSelectID: string;
     constructor(props: TreeSelectProps);
     static getDerivedStateFromProps(props: TreeSelectProps, prevState: TreeSelectState): Partial<TreeSelectState>;
     get adapter(): TreeSelectAdapter<TreeSelectProps, TreeSelectState>;
@@ -177,6 +191,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderContent: () => JSX.Element;
     removeTag: (removedKey: TreeNodeData['key']) => void;
     handleClick: (e: React.MouseEvent) => void;
+    handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     showClearBtn: () => boolean;
     renderTagList: () => React.ReactNode[];
     /**
@@ -189,6 +204,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderSingleTriggerSearch: () => JSX.Element;
     renderSelectContent: () => JSX.Element;
     handleClear: (e: React.MouseEvent) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent) => void;
     handleMouseLeave: (e: React.MouseEvent) => void;
     search: (value: string) => void;

package/lib/cjs/treeSelect/index.js

@@ -26,6 +26,8 @@ var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -64,7 +66,7 @@ require("@douyinfe/semi-foundation/lib/cjs/treeSelect/treeSelect.css");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
-var _context2 = _interopRequireDefault(require("../configProvider/context"));
+var _context3 = _interopRequireDefault(require("../configProvider/context"));
 
 var _group = _interopRequireDefault(require("../tag/group"));
 
@@ -104,6 +106,8 @@ const key = 0;
 
 class TreeSelect extends _baseComponent.default {
   constructor(props) {
+    var _context2;
+
     super(props);
 
     this.renderSuffix = () => {
@@ -123,7 +127,8 @@ class TreeSelect extends _baseComponent.default {
     this.renderPrefix = () => {
       const {
         prefix,
-        insetLabel
+        insetLabel,
+        insetLabelId
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = (0, _classnames.default)({
@@ -134,7 +139,8 @@ class TreeSelect extends _baseComponent.default {
         ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        id: insetLabelId
       }, labelNode);
     };
 
@@ -152,7 +158,6 @@ class TreeSelect extends _baseComponent.default {
       const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: popoverCls,
-        role: "list-box",
         style: style
       }, this.renderTree());
     };
@@ -165,6 +170,10 @@ class TreeSelect extends _baseComponent.default {
       this.foundation.handleClick(e);
     };
 
+    this.handleSelectionEnterPress = e => {
+      this.foundation.handleSelectionEnterPress(e);
+    };
+
     this.showClearBtn = () => {
       const {
         searchPosition
@@ -332,6 +341,11 @@ class TreeSelect extends _baseComponent.default {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleMouseOver = e => {
       this.foundation.toggleHoverState(true);
     };
@@ -369,8 +383,12 @@ class TreeSelect extends _baseComponent.default {
 
       if (showClearBtn) {
         return /*#__PURE__*/_react.default.createElement("div", {
+          role: 'button',
+          tabIndex: 0,
+          "aria-label": "Clear TreeSelect value",
           className: clearCls,
-          onClick: this.handleClear
+          onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress
         }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
       }
 
@@ -452,11 +470,29 @@ class TreeSelect extends _baseComponent.default {
       }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'arrow'
       }, this.renderArrow())];
+      const tabIndex = disabled ? null : 0;
+      /**
+       * Reasons for disabling the a11y eslint rule:
+       * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
+       */
+
       return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: 'combobox',
+        "aria-disabled": disabled,
+        "aria-haspopup": "tree",
+        tabIndex: tabIndex,
         className: classNames,
         style: style,
         ref: this.triggerRef,
-        onClick: this.handleClick
+        onClick: this.handleClick,
+        onKeyPress: this.handleSelectionEnterPress,
+        "aria-invalid": this.props['aria-invalid'],
+        "aria-errormessage": this.props['aria-errormessage'],
+        "aria-label": this.props['aria-label'],
+        "aria-labelledby": this.props['aria-labelledby'],
+        "aria-describedby": this.props['aria-describedby'],
+        "aria-required": this.props['aria-required']
       }, mouseEvent), inner);
     }; // eslint-disable-next-line @typescript-eslint/no-shadow
 
@@ -531,7 +567,8 @@ class TreeSelect extends _baseComponent.default {
         disabled,
         size,
         searchAutoFocus,
-        placeholder
+        placeholder,
+        maxTagCount
       } = this.props;
       const {
         keyEntities,
@@ -540,6 +577,7 @@ class TreeSelect extends _baseComponent.default {
       } = this.state;
       const keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
       return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
+        maxTagCount: maxTagCount,
         disabled: disabled,
         onInputChange: v => this.search(v),
         ref: this.tagInputRef,
@@ -611,6 +649,7 @@ class TreeSelect extends _baseComponent.default {
         }
 
         return /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
+          "aria-label": 'Filter TreeSelect item',
           ref: this.inputRef,
           autofocus: searchAutoFocus,
           placeholder: placeholder
@@ -839,11 +878,11 @@ class TreeSelect extends _baseComponent.default {
           labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapperCls,
-        role: "list-box"
+        className: wrapperCls
       }, outerTopSlot, !outerTopSlot && filterTreeNode && isDropdownPositionSearch && this.renderInput(), /*#__PURE__*/_react.default.createElement("div", {
         className: listCls,
         role: "tree",
+        "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
       }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
     };
@@ -880,6 +919,7 @@ class TreeSelect extends _baseComponent.default {
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
     this.foundation = new _foundation.default(this.adapter);
+    this.treeSelectID = (0, _slice.default)(_context2 = Math.random().toString(36)).call(_context2, 2);
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -1179,8 +1219,13 @@ class TreeSelect extends _baseComponent.default {
 
 }
 
-TreeSelect.contextType = _context2.default;
+TreeSelect.contextType = _context3.default;
 TreeSelect.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,
   loadedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
   loadData: _propTypes.default.func,
   onLoad: _propTypes.default.func,
@@ -1233,6 +1278,7 @@ TreeSelect.propTypes = {
   suffix: _propTypes.default.node,
   prefix: _propTypes.default.node,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   zIndex: _propTypes.default.number,
   getPopupContainer: _propTypes.default.func,
   dropdownMatchSelectWidth: _propTypes.default.bool,
@@ -1252,7 +1298,8 @@ TreeSelect.propTypes = {
   labelEllipsis: _propTypes.default.bool,
   optionListStyle: _propTypes.default.object,
   searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
-  renderSelectedItem: _propTypes.default.func
+  renderSelectedItem: _propTypes.default.func,
+  'aria-label': _propTypes.default.string
 };
 TreeSelect.defaultProps = {
   searchPosition: _constants.strings.SEARCH_POSITION_DROPDOWN,
@@ -1279,7 +1326,8 @@ TreeSelect.defaultProps = {
   onVisibleChange: _noop2.default,
   expandAction: false,
   clickToHide: true,
-  searchAutoFocus: false
+  searchAutoFocus: false,
+  'aria-label': 'TreeSelect'
 };
 var _default = TreeSelect;
 exports.default = _default;

package/lib/cjs/typography/base.js

@@ -58,6 +58,8 @@ var _util = _interopRequireDefault(require("./util"));
 
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
 var _utils = require("../_utils");
@@ -271,13 +273,22 @@ class Base extends _react.Component {
       }
 
       if (!noExpandText || !noCollapseText) {
-        return /*#__PURE__*/_react.default.createElement("a", {
-          className: "".concat(prefixCls, "-ellipsis-expand"),
-          key: "expand",
-          ref: this.expandRef,
-          "aria-label": text,
-          onClick: this.toggleOverflow
-        }, text);
+        return (
+          /*#__PURE__*/
+          // TODO: replace `a` tag with `span` in next major version
+          // NOTE: may have effect on style
+          // eslint-disable-next-line jsx-a11y/anchor-is-valid
+          _react.default.createElement("a", {
+            role: "button",
+            tabIndex: 0,
+            className: "".concat(prefixCls, "-ellipsis-expand"),
+            key: "expand",
+            ref: this.expandRef,
+            "aria-label": text,
+            onClick: this.toggleOverflow,
+            onKeyPress: e => (0, _isEnterPress.default)(e) && this.toggleOverflow(e)
+          }, text)
+        );
       }
 
       return null;

package/lib/cjs/typography/copyable.js

@@ -32,6 +32,8 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class Copyable extends _react.default.PureComponent {
@@ -124,7 +126,10 @@ class Copyable extends _react.default.PureComponent {
     }, /*#__PURE__*/_react.default.createElement("a", {
       className: "".concat(prefixCls, "-action-copy-icon")
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCopy, {
-      onClick: this.copy
+      role: "button",
+      tabIndex: 0,
+      onClick: this.copy,
+      onKeyPress: e => (0, _isEnterPress.default)(e) && this.copy(e)
     })))));
   }
 

package/lib/cjs/upload/fileCard.js

@@ -49,6 +49,8 @@ const prefixCls = _constants.cssClasses.PREFIX;
 const ErrorSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    focusable: false,
+    "aria-hidden": true,
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -70,6 +72,8 @@ const ErrorSvg = function () {
 const ReplaceSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    focusable: false,
+    "aria-hidden": true,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -97,6 +101,8 @@ const ReplaceSvg = function () {
 const DirectorySvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    focusable: false,
+    "aria-hidden": true,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -211,6 +217,8 @@ class FileCard extends _react.PureComponent {
     const closeCls = "".concat(prefixCls, "-picture-file-card-close");
 
     const retry = /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(prefixCls, "-picture-file-card-retry"),
       onClick: e => this.onRetry(e)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconRefresh, {
@@ -224,6 +232,8 @@ class FileCard extends _react.PureComponent {
       showArrow: false,
       spacing: 4
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(prefixCls, "-picture-file-card-replace"),
       onClick: e => this.onReplace(e)
     }, /*#__PURE__*/_react.default.createElement(ReplaceSvg, {
@@ -235,9 +245,10 @@ class FileCard extends _react.PureComponent {
     }, index + 1);
     const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/_react.default.createElement("img", {
       src: url,
-      alt: "picture of ".concat(name)
+      alt: name
     });
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "listitem",
       className: filePicCardCls,
       style: style,
       onClick: onPreviewClick
@@ -245,12 +256,15 @@ class FileCard extends _react.PureComponent {
       percent: percent,
       type: "circle",
       size: "small",
-      orbitStroke: '#FFF'
+      orbitStroke: '#FFF',
+      "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      size: "extra-small",
+      className: closeCls,
       onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+      tabIndex: 0,
+      role: "button",
+      size: "extra-small"
     })), this.renderPicValidateMsg());
   }
 
@@ -286,7 +300,8 @@ class FileCard extends _react.PureComponent {
     const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
     let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
-      src: url
+      src: url,
+      alt: name
     }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
       size: "large"
     });
@@ -296,6 +311,7 @@ class FileCard extends _react.PureComponent {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "listitem",
       className: fileCardCls,
       style: style,
       onClick: onPreviewClick
@@ -325,12 +341,15 @@ class FileCard extends _react.PureComponent {
       percent: percent,
       style: {
         width: '100%'
-      }
+      },
+      "aria-label": "uploading file progress"
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(infoCls, "-main-control")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(infoCls, "-validate-message")
     }, this.renderValidateMessage()), showRetry ? /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
     }, locale.retry) : null)), /*#__PURE__*/_react.default.createElement(_index.default, {