@douyinfe/semi-ui 2.2.0 → 2.3.0

package/inputNumber/index.tsx

@@ -29,6 +29,7 @@ export interface InputNumberProps extends InputProps {
     hideButtons?: boolean;
     innerButtons?: boolean;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     keepFocus?: boolean;
     max?: number;
     min?: number;
@@ -62,6 +63,12 @@ export interface InputNumberState {
 
 class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes = {
+        'aria-label': PropTypes.string,
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         autofocus: PropTypes.bool,
         className: PropTypes.string,
         defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -71,6 +78,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
         hideButtons: PropTypes.bool,
         innerButtons: PropTypes.bool,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         keepFocus: PropTypes.bool,
         max: PropTypes.number,
         min: PropTypes.number,
@@ -225,6 +233,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     currentValue!: number | string;
     cursorBefore!: string;
     cursorAfter!: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps) {
         super(props);
         this.state = {
@@ -291,7 +300,10 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                 if (focusing) {
                     if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
                         const obj: { number?: number; value?: string } = { 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);
                         }
@@ -377,6 +389,8 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
         return (
             <div className={suffixChildrenCls}>
                 <span
+                    role="button"
+                    tabIndex={-1}
                     className={upClassName}
                     onMouseDown={notAllowedUp ? noop : this.handleUpClick}
                     onMouseUp={this.handleMouseUp}
@@ -385,6 +399,8 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                     <IconChevronUp size="extra-small" />
                 </span>
                 <span
+                    role="button"
+                    tabIndex={-1}
                     className={downClassName}
                     onMouseDown={notAllowedDown ? noop : this.handleDownClick}
                     onMouseUp={this.handleMouseUp}
@@ -433,13 +449,26 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
             keepFocus,
             ...rest
         } = this.props;
-        const { value } = this.state;
+        const { value, number } = this.state;
 
         const inputNumberCls = classnames(className, `${prefixCls}-number`, {
             [`${prefixCls}-number-size-${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 = (
             <div
@@ -450,6 +479,8 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                 onMouseLeave={e => this.handleInputMouseLeave(e)}
             >
                 <Input
+                    role="spinbutton"
+                    {...ariaProps}
                     {...rest}
                     size={size}
                     disabled={disabled}

package/layout/Sider.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { AriaRole, CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/layout/constants';
@@ -40,6 +40,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
 }
 
 class Sider extends React.PureComponent<SiderProps> {
@@ -49,6 +51,8 @@ class Sider extends React.PureComponent<SiderProps> {
         className: PropTypes.string,
         breakpoint: PropTypes.arrayOf(PropTypes.oneOf(bpt)),
         onBreakpoint: PropTypes.func,
+        'aria-label': PropTypes.string,
+        role: PropTypes.string,
     };
 
     static defaultProps = {
@@ -104,7 +108,7 @@ class Sider extends React.PureComponent<SiderProps> {
             [`${prefixCls}-sider`]: true,
         });
         return (
-            <aside className={classString} style={style} {...getDataAttr(others)}>
+            <aside className={classString} aria-label={this.props['aria-label']} style={style} {...getDataAttr(others)}>
                 <div className={`${prefixCls}-sider-children`}>
                     {children}
                 </div>

package/layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ComponentClass } from 'react';
+import React, { AriaRole, ComponentClass, CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/layout/constants';
@@ -15,12 +15,13 @@ const htmlTag = {
     Layout: 'section'
 };
 
-function generator<P extends { type?: string; tagName?: string }>(type: string): (ComponentType: ComponentClass<{ type?: string; tagName?: string } & P>) => ComponentClass<P> {
+function generator<P extends { type?: string; tagName?: string; role?: AriaRole; 'aria-label'?: string }>(type: string): (ComponentType: ComponentClass<{ type?: string; tagName?: string } & P>) => ComponentClass<P> {
     const tagName = htmlTag[type];
     const typeName = type.toLowerCase();
     return (BasicComponent): ComponentClass<P> => class Adapter extends React.PureComponent<P> {
         render() {
-            return <BasicComponent type={typeName} tagName={tagName} {...this.props} />;
+            return <BasicComponent role={this.props.role} aria-label={this.props['aria-label']} type={typeName}
+                tagName={tagName} {...this.props} />;
         }
     };
 }

package/lib/cjs/_utils/hooks/usePrevFocus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePrevFocus(): (HTMLElement | import("react").Dispatch<import("react").SetStateAction<HTMLElement>>)[];

package/lib/cjs/_utils/hooks/usePrevFocus.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.usePrevFocus = usePrevFocus;
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = require("react");
+
+var _index = require("../index");
+
+function usePrevFocus() {
+  const [prevFocusElement, setPrevFocus] = (0, _react.useState)((0, _index.getActiveElement)());
+  (0, _react.useEffect)(() => {
+    return function cleanup() {
+      const blur = (0, _get2.default)(prevFocusElement, 'blur');
+      (0, _isFunction2.default)(blur) && blur();
+    };
+  }, [prevFocusElement]);
+  return [prevFocusElement, setPrevFocus];
+}

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

@@ -67,3 +67,4 @@ export interface HighLightTextHTMLChunk {
  * @returns boolean
  */
 export declare const isSemiIcon: (icon: any) => boolean;
+export declare function getActiveElement(): HTMLElement;

package/lib/cjs/_utils/index.js

@@ -9,6 +9,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports.cloneDeep = cloneDeep;
+exports.getActiveElement = getActiveElement;
 exports.registerMediaQuery = exports.isSemiIcon = exports.getHighLightTextHTML = void 0;
 exports.stopPropagation = stopPropagation;
 
@@ -197,4 +198,8 @@ exports.registerMediaQuery = registerMediaQuery;
 
 const isSemiIcon = icon => /*#__PURE__*/_react.default.isValidElement(icon) && (0, _get2.default)(icon.type, 'elementType') === 'Icon';
 
-exports.isSemiIcon = isSemiIcon;
+exports.isSemiIcon = isSemiIcon;
+
+function getActiveElement() {
+  return document ? document.activeElement : null;
+}

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

@@ -24,6 +24,7 @@ export interface AnchorProps {
     targetOffset?: number;
     onChange?: (currentLink: string, previousLink: string) => void;
     onClick?: (e: React.MouseEvent<HTMLElement>, currentLink: string) => void;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface AnchorState {
     activeLink: string;
@@ -51,6 +52,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         defaultAnchor: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         size: string;

package/lib/cjs/anchor/index.js

@@ -247,6 +247,7 @@ class Anchor extends _baseComponent.default {
       position,
       autoCollapse
     } = this.props;
+    const ariaLabel = this.props['aria-label'];
     const {
       activeLink,
       scrollHeight,
@@ -279,10 +280,13 @@ class Anchor extends _baseComponent.default {
         removeLink: this.removeLink
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "navigation",
+      "aria-label": ariaLabel || 'Side navigation',
       className: wrapperCls,
       style: wrapperStyle,
       id: this.anchorID
     }, /*#__PURE__*/_react.default.createElement("div", {
+      "aria-hidden": true,
       className: slideCls,
       style: {
         height: scrollHeight
@@ -316,7 +320,8 @@ Anchor.PropTypes = {
   getContainer: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onClick: _propTypes.default.func,
-  defaultAnchor: _propTypes.default.string
+  defaultAnchor: _propTypes.default.string,
+  'aria-label': _propTypes.default.string
 };
 Anchor.defaultProps = {
   size: 'default',

package/lib/cjs/anchor/link.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/linkFoundation';
+import { AnchorContextType } from './anchor-context';
 export interface LinkProps {
     href?: string;
     title?: string | React.ReactNode;
@@ -21,13 +22,15 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         title: string;
         className: string;
     };
-    static contextType: React.Context<import("./anchor-context").AnchorContextType>;
+    static contextType: React.Context<AnchorContextType>;
     foundation: LinkFoundation;
+    context: AnchorContextType;
     constructor(props: LinkProps);
     get adapter(): LinkAdapter;
     handleAddLink(): void;
     handleRemoveLink(): void;
     handleUpdateLink(href: string, prevHref: string): void;
+    handleClick(e: React.KeyboardEvent | React.MouseEvent): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: LinkProps): void;
     componentWillUnmount(): void;

package/lib/cjs/anchor/link.js

@@ -12,6 +12,8 @@ exports.default = void 0;
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -32,6 +34,8 @@ const prefixCls = _constants.cssClasses.PREFIX; // eslint-disable-next-line @typ
 
 class Link extends _baseComponent.default {
   constructor(props) {
+    var _context;
+
     super(props);
 
     this.renderTitle = () => {
@@ -90,6 +94,7 @@ class Link extends _baseComponent.default {
     };
 
     this.foundation = new _linkFoundation.default(this.adapter);
+    this.handleClick = (0, _bind.default)(_context = this.handleClick).call(_context, this);
   }
 
   get adapter() {
@@ -115,6 +120,17 @@ class Link extends _baseComponent.default {
     this.foundation.handleUpdateLink(href, prevHref);
   }
 
+  handleClick(e) {
+    const {
+      disabled,
+      href
+    } = this.props;
+    const {
+      onClick
+    } = this.context;
+    !disabled && onClick(e, href);
+  }
+
   componentDidMount() {
     this.handleAddLink();
   }
@@ -136,11 +152,12 @@ class Link extends _baseComponent.default {
       href,
       className,
       style,
-      disabled = false
+      disabled = false,
+      title
     } = this.props;
     const {
       activeLink,
-      onClick
+      showTooltip
     } = this.context;
     const active = activeLink === href;
     const linkCls = (0, _classnames.default)("".concat(prefixCls, "-link"), className);
@@ -148,13 +165,30 @@ class Link extends _baseComponent.default {
       ["".concat(prefixCls, "-link-title-active")]: active,
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
+    const ariaProps = {
+      'aria-disabled': disabled,
+      'aria-label': href
+    };
+
+    if (active) {
+      ariaProps['aria-details'] = 'active';
+    }
+
+    if (!showTooltip && typeof title === 'string') {
+      ariaProps['title'] = title;
+    }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: linkCls,
       style: style
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      role: "link",
+      tabIndex: 0
+    }, ariaProps, {
       className: linkTitleCls,
-      onClick: e => !disabled && onClick(e, href)
-    }, this.renderTitle()), this.renderChildren());
+      onClick: e => this.handleClick(e),
+      onKeyPress: e => this.handleClick(e)
+    }), this.renderTitle()), this.renderChildren());
   }
 
 }

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

@@ -18,6 +18,12 @@ export interface BaseDataItem extends DataItem {
 }
 export declare type AutoCompleteItems = BaseDataItem | string | number;
 export interface AutoCompleteProps<T extends AutoCompleteItems> {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -33,6 +39,8 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     emptyContent?: React.ReactNode | null;
     getPopupContainer?: () => HTMLElement;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
+    id?: string;
     loading?: boolean;
     motion?: Motion;
     maxHeight?: string | number;
@@ -77,6 +85,12 @@ interface AutoCompleteState {
 }
 declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
     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>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
@@ -90,6 +104,9 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/autoComplete/index.js

@@ -208,6 +208,7 @@ class AutoComplete extends _baseComponent.default {
       size,
       prefix,
       insetLabel,
+      insetLabelId,
       suffix,
       placeholder,
       style,
@@ -217,7 +218,8 @@ class AutoComplete extends _baseComponent.default {
       triggerRender,
       validateStatus,
       autoFocus,
-      value
+      value,
+      id
     } = this.props;
     const {
       inputValue,
@@ -232,7 +234,8 @@ class AutoComplete extends _baseComponent.default {
         ["".concat(prefixCls, "-disabled")]: disabled
       }, className),
       onClick: this.handleInputClick,
-      ref: this.triggerRef
+      ref: this.triggerRef,
+      id
     }, keyboardEventSet);
     const innerProps = {
       disabled,
@@ -240,9 +243,16 @@ class AutoComplete extends _baseComponent.default {
       autofocus: autoFocus,
       onChange: this.onSearch,
       onClear: this.onInputClear,
+      'aria-label': this.props['aria-label'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-required': this.props['aria-required'],
       // TODO: remove in next major version
       suffix,
       prefix: prefix || insetLabel,
+      insetLabelId,
       showClear,
       validateStatus,
       size,
@@ -356,6 +366,12 @@ class AutoComplete extends _baseComponent.default {
 }
 
 AutoComplete.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,
   autoAdjustOverflow: _propTypes.default.bool,
   className: _propTypes.default.string,
@@ -369,6 +385,9 @@ AutoComplete.propTypes = {
   dropdownClassName: _propTypes.default.string,
   dropdownStyle: _propTypes.default.object,
   emptyContent: _propTypes.default.node,
+  id: _propTypes.default.string,
+  insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   onSearch: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onClear: _propTypes.default.func,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AvatarAdapter } from '@douyinfe/semi-foundation/lib/cjs/avatar/foundation';
+import AvatarFoundation, { AvatarAdapter } from '@douyinfe/semi-foundation/lib/cjs/avatar/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
 import BaseComponent from '../_base/baseComponent';
@@ -36,13 +36,14 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    foundation: AvatarFoundation;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: AvatarProps): void;
     componentWillUnmount(): void;
-    onEnter(): void;
-    onLeave(): void;
+    onEnter(e: React.MouseEvent): void;
+    onLeave(e: React.MouseEvent): void;
     handleError(): void;
     render(): JSX.Element;
 }

package/lib/cjs/avatar/index.js

@@ -156,12 +156,12 @@ class Avatar extends _baseComponent.default {
     this.foundation.destroy();
   }
 
-  onEnter() {
-    this.foundation.handleEnter();
+  onEnter(e) {
+    this.foundation.handleEnter(e);
   }
 
-  onLeave() {
-    this.foundation.handleLeave();
+  onLeave(e) {
+    this.foundation.handleLeave(e);
   }
 
   handleError() {
@@ -220,13 +220,17 @@ class Avatar extends _baseComponent.default {
       }, children));
     }
 
-    return /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({}, others, {
-      style: style,
-      className: avatarCls,
-      onClick: onClick,
-      onMouseEnter: this.onEnter,
-      onMouseLeave: this.onLeave
-    }), content, hoverRender);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+      _react.default.createElement("span", (0, _assign.default)({}, others, {
+        style: style,
+        className: avatarCls,
+        onClick: onClick,
+        onMouseEnter: this.onEnter,
+        onMouseLeave: this.onLeave
+      }), content, hoverRender)
+    );
   }
 
 }

package/lib/cjs/banner/index.js

@@ -95,7 +95,8 @@ class Banner extends _baseComponent.default {
       icon: closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
       theme: "borderless",
       size: "small",
-      type: "tertiary"
+      type: "tertiary",
+      "aria-label": 'Close'
     });
 
     return closer;
@@ -163,7 +164,8 @@ class Banner extends _baseComponent.default {
     });
     const banner = visible ? /*#__PURE__*/_react.default.createElement("div", {
       className: wrapper,
-      style: style
+      style: style,
+      role: "alert"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content-wrapper")
     }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -27,6 +27,7 @@ export interface BreadcrumbProps extends BaseProps {
     autoCollapse?: boolean;
     renderMore?: (restItem: Array<React.ReactNode>) => React.ReactNode;
     moreType?: MoreType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 interface BreadcrumbState {
     isCollapsed: boolean;
@@ -52,6 +53,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         maxItemCount: propTypes.Requireable<number>;
         renderMore: propTypes.Requireable<(...args: any[]) => any>;
         moreType: propTypes.Requireable<string>;
+        'aria-label': propTypes.Requireable<string>;
     };
     static defaultProps: {
         routes: [];
@@ -66,6 +68,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         autoCollapse: boolean;
         moreType: string;
         maxItemCount: number;
+        'aria-label': string;
     };
     constructor(props: BreadcrumbProps);
     get adapter(): BreadcrumbAdapter<BreadcrumbProps, BreadcrumbState>;

package/lib/cjs/breadcrumb/index.js

@@ -76,8 +76,12 @@ class Breadcrumb extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(clsPrefix, "-item-wrap")
       }, /*#__PURE__*/_react.default.createElement("span", {
+        role: 'button',
+        tabIndex: 0,
+        "aria-label": 'Expand breadcrumb items',
         className: (0, _concat.default)(_context = "".concat(clsPrefix, "-item ")).call(_context, clsPrefix, "-item-more"),
-        onClick: item => this.foundation.handleExpand(item)
+        onClick: item => this.foundation.handleExpand(item),
+        onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/_react.default.createElement(_semiIcons.IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(clsPrefix, "-separator")
       }, this.props.separator)));
@@ -235,7 +239,7 @@ class Breadcrumb extends _baseComponent.default {
         separator
       }
     }, /*#__PURE__*/_react.default.createElement("nav", {
-      "aria-label": "".concat(clsPrefix),
+      "aria-label": this.props['aria-label'],
       className: sizeCls,
       style: style
     }, breadcrumbs));
@@ -266,7 +270,8 @@ Breadcrumb.propTypes = {
   renderMore: _propTypes.default.func,
 
   /* Type of ellipsis area */
-  moreType: _propTypes.default.oneOf(_constants.strings.MORE_TYPE)
+  moreType: _propTypes.default.oneOf(_constants.strings.MORE_TYPE),
+  'aria-label': _propTypes.default.string
 };
 Breadcrumb.defaultProps = {
   routes: [],
@@ -280,7 +285,8 @@ Breadcrumb.defaultProps = {
   },
   autoCollapse: true,
   moreType: 'default',
-  maxItemCount: 4
+  maxItemCount: 4,
+  'aria-label': 'Breadcrumb'
 };
 var _default = Breadcrumb;
 exports.default = _default;

package/lib/cjs/breadcrumb/item.js

@@ -212,9 +212,9 @@ class BreadcrumbItem extends _baseComponent.default {
       shouldRenderSeparator // children,
 
     } = this.props;
-    const pageLabel = active ? {} : {
+    const pageLabel = active ? {
       'aria-current': 'page'
-    };
+    } : {};
     const item = this.renderItem();
     const separator = !active ? this.props.separator || /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(clsPrefix, "-separator")