@douyinfe/semi-ui 2.2.2 → 2.4.0-beta.0

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, {

package/lib/cjs/upload/index.js

@@ -233,6 +233,7 @@ class Upload extends _baseComponent.default {
       });
       const mainCls = "".concat(prefixCls, "-file-list-main");
       const addContentProps = {
+        role: 'button',
         className: uploadAddCls,
         onClick: this.onClick
       };
@@ -265,7 +266,9 @@ class Upload extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), /*#__PURE__*/_react.default.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "picture list"
       }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
     };
 
@@ -299,10 +302,14 @@ class Upload extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(titleCls, "-choosen")
       }, locale.selectedFiles), showClear ? /*#__PURE__*/_react.default.createElement("span", {
+        role: "button",
+        tabIndex: 0,
         onClick: this.clear,
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "file list"
       }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
@@ -327,7 +334,8 @@ class Upload extends _baseComponent.default {
       const {
         draggable,
         children,
-        listType
+        listType,
+        disabled
       } = this.props;
       const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
 
@@ -340,6 +348,9 @@ class Upload extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: uploadAddCls,
         onClick: this.onClick
       }, children);
@@ -353,7 +364,8 @@ class Upload extends _baseComponent.default {
         children,
         dragIcon,
         dragMainText,
-        dragSubText
+        dragSubText,
+        disabled
       } = this.props;
       const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const dragAreaCls = (0, _classnames.default)(dragAreaBaseCls, {
@@ -364,6 +376,9 @@ class Upload extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: dragAreaCls,
         onDrop: this.onDrop,
         onDragOver: this.onDragOver,

package/lib/es/_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/es/_utils/hooks/usePrevFocus.js

@@ -0,0 +1,15 @@
+import _isFunction from "lodash/isFunction";
+import _get from "lodash/get";
+import { useState, useEffect } from 'react';
+import { getActiveElement } from '../index';
+export function usePrevFocus() {
+  const [prevFocusElement, setPrevFocus] = useState(getActiveElement());
+  useEffect(() => {
+    return function cleanup() {
+      const blur = _get(prevFocusElement, 'blur');
+
+      _isFunction(blur) && blur();
+    };
+  }, [prevFocusElement]);
+  return [prevFocusElement, setPrevFocus];
+}

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

@@ -165,4 +165,7 @@ export const registerMediaQuery = (media, _ref2) => {
  * @returns boolean
  */
 
-export const isSemiIcon = icon => /*#__PURE__*/React.isValidElement(icon) && _get(icon.type, 'elementType') === 'Icon';
+export const isSemiIcon = icon => /*#__PURE__*/React.isValidElement(icon) && _get(icon.type, 'elementType') === 'Icon';
+export function getActiveElement() {
+  return document ? document.activeElement : null;
+}

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

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

package/lib/es/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/es/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/es/anchor/link.js

@@ -1,4 +1,5 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,6 +12,8 @@ const prefixCls = cssClasses.PREFIX; // eslint-disable-next-line @typescript-esl
 
 export default class Link extends BaseComponent {
   constructor(props) {
+    var _context;
+
     super(props);
 
     this.renderTitle = () => {
@@ -69,6 +72,7 @@ export default class Link extends BaseComponent {
     };
 
     this.foundation = new LinkFoundation(this.adapter);
+    this.handleClick = _bindInstanceProperty(_context = this.handleClick).call(_context, this);
   }
 
   get adapter() {
@@ -94,6 +98,17 @@ export default class Link extends BaseComponent {
     this.foundation.handleUpdateLink(href, prevHref);
   }
 
+  handleClick(e) {
+    const {
+      disabled,
+      href
+    } = this.props;
+    const {
+      onClick
+    } = this.context;
+    !disabled && onClick(e, href);
+  }
+
   componentDidMount() {
     this.handleAddLink();
   }
@@ -115,11 +130,12 @@ export default class Link extends BaseComponent {
       href,
       className,
       style,
-      disabled = false
+      disabled = false,
+      title
     } = this.props;
     const {
       activeLink,
-      onClick
+      showTooltip
     } = this.context;
     const active = activeLink === href;
     const linkCls = cls("".concat(prefixCls, "-link"), className);
@@ -127,13 +143,30 @@ export default class Link extends BaseComponent {
       ["".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.createElement("div", {
       className: linkCls,
       style: style
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", _Object$assign({
+      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());
   }
 
 }