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

package/lib/es/slider/index.js

@@ -1,10 +1,10 @@
 import _noop from "lodash/noop";
 import _isEqual from "lodash/isEqual";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
@@ -40,7 +40,12 @@ export default class Slider extends BaseComponent {
         vertical,
         range,
         tooltipVisible,
-        tipFormatter
+        tipFormatter,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-valuetext': ariaValueText,
+        getAriaValueText,
+        disabled
       } = this.props;
       const {
         chooseMovePos,
@@ -65,6 +70,19 @@ export default class Slider extends BaseComponent {
       const maxClass = cls(cssClasses.HANDLE, {
         ["".concat(cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
       });
+      const {
+        min,
+        max,
+        currentValue
+      } = this.state;
+      const commonAria = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        'aria-disabled': disabled
+      };
+      vertical && _Object$assign(commonAria, {
+        'aria-orientation': 'vertical'
+      });
       const handleContents = !range ? /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
@@ -72,7 +90,7 @@ export default class Slider extends BaseComponent {
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
         ref: this.minHanleEl,
         className: minClass,
@@ -101,15 +119,23 @@ export default class Slider extends BaseComponent {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue) : ariaValueText
+      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && tipVisible.min,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.minHanleEl,
         className: minClass,
         style: {
@@ -137,15 +163,23 @@ export default class Slider extends BaseComponent {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })), /*#__PURE__*/React.createElement(Tooltip, {
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue[0],
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText,
+        "aria-valuemax": currentValue[1],
+        "aria-valuemin": min
+      }))), /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.max,
         position: "top",
         trigger: "custom",
         rePosKey: maxPercent,
         visible: isInRenderTree && tipVisible.max,
         className: "".concat(cssClasses.HANDLE, "-tooltip")
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", _Object$assign({
         ref: this.maxHanleEl,
         className: maxClass,
         style: {
@@ -173,8 +207,16 @@ export default class Slider extends BaseComponent {
         },
         onTouchEnd: e => {
           this.foundation.onHandleUp(e);
-        }
-      })));
+        },
+        onFocus: e => this.foundation.onFocus(e, 'min'),
+        role: "slider",
+        tabIndex: 0
+      }, commonAria, {
+        "aria-valuenow": currentValue[1],
+        "aria-valuetext": getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText,
+        "aria-valuemax": max,
+        "aria-valuemin": currentValue[0]
+      }))));
       return handleContents;
     };
 
@@ -195,11 +237,15 @@ export default class Slider extends BaseComponent {
         top: range ? "".concat(minPercent * 100, "%") : 0
       };
       trackStyle = included ? trackStyle : {};
-      return /*#__PURE__*/React.createElement("div", {
-        className: cssClasses.TRACK,
-        style: trackStyle,
-        onClick: e => this.foundation.handleWrapClick(e)
-      });
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        React.createElement("div", {
+          className: cssClasses.TRACK,
+          style: trackStyle,
+          onClick: e => this.foundation.handleWrapClick(e)
+        })
+      );
     };
 
     this.renderStepDot = () => {
@@ -222,6 +268,7 @@ export default class Slider extends BaseComponent {
         const markPercent = (Number(mark) - min) / (max - min);
         return activeResult ? /*#__PURE__*/React.createElement("span", {
           key: mark,
+          onClick: e => this.foundation.handleWrapClick(e),
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")

package/lib/es/spin/icon.js

@@ -43,7 +43,8 @@ function Icon() {
     height: "48",
     viewBox: "0 0 36 36",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": "spin"
   }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",
@@ -62,13 +63,11 @@ function Icon() {
     stopColor: "currentColor",
     offset: "100%"
   }))), /*#__PURE__*/React.createElement("g", {
-    id: "Artboard",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "Rectangle",
     fillOpacity: "0.01",
     fill: "#FFFFFF",
     x: "0",
@@ -77,7 +76,6 @@ function Icon() {
     height: "36"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951",
-    id: "Path",
     stroke: "url(#".concat(id, ")"),
     strokeWidth: "4",
     strokeLinecap: "round"

package/lib/es/steps/basicStep.d.ts

@@ -16,6 +16,9 @@ export interface BasicStepProps {
     done?: boolean;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 export declare enum stepSizeMapIconSize {
     small = "large",

package/lib/es/steps/basicStep.js

@@ -1,20 +1,5 @@
 import _isFunction from "lodash/isFunction";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
-    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -43,9 +28,9 @@ const BasicStep = props => {
     icon,
     stepNumber,
     onClick,
-    onChange
-  } = props,
-        restProps = __rest(props, ["prefixCls", "className", "size", "title", "description", "status", "style", "active", "done", "icon", "stepNumber", "onClick", "onChange"]);
+    onChange,
+    onKeyDown
+  } = props;
 
   const renderIcon = () => {
     let inner, progress;
@@ -103,10 +88,10 @@ const BasicStep = props => {
     }, inner) : null;
   };
 
-  const classString = classnames(prefixCls, className, _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, status), {
+  const classString = classnames(prefixCls, _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, status), {
     ["".concat(prefixCls, "-active")]: active,
     ["".concat(prefixCls, "-done")]: done
-  });
+  }, className);
 
   const handleClick = e => {
     if (_isFunction(onClick)) {
@@ -116,11 +101,26 @@ const BasicStep = props => {
     onChange();
   };
 
-  return /*#__PURE__*/React.createElement("div", _Object$assign({}, restProps, {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if (_isFunction(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    tabIndex: 0,
+    "aria-current": "step",
     className: classString,
     style: style,
-    onClick: e => handleClick(e)
-  }), /*#__PURE__*/React.createElement("div", {
+    onClick: e => handleClick(e),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-left")

package/lib/es/steps/basicSteps.d.ts

@@ -15,6 +15,7 @@ export interface BasicStepsProps {
     hasLine?: boolean;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: BasicStepsProps): JSX.Element;

package/lib/es/steps/basicSteps.js

@@ -67,7 +67,7 @@ const Steps = props => {
     });
 
     return content;
-  }, [children, initial, prefixCls, direction, status, current, size]);
+  }, [children, initial, prefixCls, direction, status, current, size, onChange]);
   const wrapperCls = cls(className, {
     ["".concat(prefixCls, "-basic")]: true,
     [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, direction)]: true,
@@ -75,6 +75,7 @@ const Steps = props => {
     ["".concat(prefixCls, "-hasline")]: hasLine
   });
   return /*#__PURE__*/React.createElement("div", {
+    "aria-label": props["aria-label"],
     className: wrapperCls,
     style: style
   }, inner);

package/lib/es/steps/fillStep.d.ts

@@ -12,6 +12,9 @@ export interface FillStepProps {
     stepNumber?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 declare const FillStep: {
     (props: FillStepProps): JSX.Element;

package/lib/es/steps/fillStep.js

@@ -19,7 +19,8 @@ const FillStep = props => {
     onClick,
     icon,
     onChange,
-    stepNumber
+    stepNumber,
+    onKeyDown
   } = props;
 
   const renderIcon = () => {
@@ -81,17 +82,31 @@ const FillStep = props => {
     onChange();
   };
 
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if (_isFunction(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: classnames({
-      [className]: Boolean(className),
       [prefixCls]: true,
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, status)]: Boolean(status),
       ["".concat(prefixCls, "-clickable")]: onClick
-    }),
+    }, className),
     style: style,
     onClick: e => {
       handleClick(e);
-    }
+    },
+    onKeyDown: handleKeyDown
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
   }, /*#__PURE__*/React.createElement("div", {

package/lib/es/steps/fillSteps.d.ts

@@ -12,6 +12,7 @@ export interface FillStepsProps {
     style?: React.CSSProperties;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: FillStepsProps): JSX.Element;

package/lib/es/steps/fillSteps.js

@@ -76,7 +76,8 @@ const Steps = props => {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperCls,
-    style: style
+    style: style,
+    "aria-label": props["aria-label"]
   }, /*#__PURE__*/React.createElement(Row, {
     type: "flex",
     justify: "start"

package/lib/es/steps/navStep.d.ts

@@ -10,6 +10,9 @@ export interface NavStepProps {
     prefixCls?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 declare const NavStep: {
     (props: NavStepProps): JSX.Element;

package/lib/es/steps/navStep.js

@@ -1,19 +1,4 @@
 import _isFunction from "lodash/isFunction";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
-    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -30,13 +15,12 @@ const NavStep = props => {
     index,
     total,
     onClick,
+    onKeyDown,
     onChange
-  } = props,
-        restProps = __rest(props, ["prefixCls", "className", "title", "style", "active", "index", "total", "onClick", "onChange"]);
-
-  const classString = classnames(prefixCls, className, {
+  } = props;
+  const classString = classnames(prefixCls, {
     ["".concat(prefixCls, "-active")]: active
-  });
+  }, className);
 
   const handleClick = e => {
     if (_isFunction(onClick)) {
@@ -46,11 +30,26 @@ const NavStep = props => {
     onChange();
   };
 
-  return /*#__PURE__*/React.createElement("div", _Object$assign({}, restProps, {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if (_isFunction(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: classString,
     style: style,
-    onClick: e => handleClick(e)
-  }), /*#__PURE__*/React.createElement("div", {
+    onClick: e => handleClick(e),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")

package/lib/es/steps/navSteps.d.ts

@@ -10,6 +10,7 @@ export interface NavStepsProps {
     size?: Size;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: NavStepsProps): JSX.Element;

package/lib/es/steps/navSteps.js

@@ -49,12 +49,13 @@ const Steps = props => {
     });
 
     return content;
-  }, [children, prefixCls, current, size]);
+  }, [children, prefixCls, current, size, initial, onChange]);
   const wrapperCls = cls(className, {
     ["".concat(prefixCls, "-nav")]: true,
     [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, size)]: size !== 'default'
   });
   return /*#__PURE__*/React.createElement("div", {
+    "aria-label": props["aria-label"],
     className: wrapperCls,
     style: style
   }, inner);

package/lib/es/switch/index.d.ts

@@ -4,6 +4,11 @@ import { SwitchAdapter } from '@douyinfe/semi-foundation/lib/es/switch/foundatio
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/switch/switch.css';
 export interface SwitchProps {
+    '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'];
     defaultChecked?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -16,6 +21,7 @@ export interface SwitchProps {
     size?: 'large' | 'default' | 'small';
     checkedText?: React.ReactNode;
     uncheckedText?: React.ReactNode;
+    id?: string;
 }
 export interface SwitchState {
     nativeControlChecked: boolean;
@@ -23,6 +29,11 @@ export interface SwitchState {
 }
 declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     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>;
         className: PropTypes.Requireable<string>;
         checked: PropTypes.Requireable<boolean>;
         checkedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -35,6 +46,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         style: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<SwitchProps>;
     private switchRef;

package/lib/es/switch/index.js

@@ -1,7 +1,7 @@
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
-/* eslint-disable max-len */
+/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -71,7 +71,8 @@ class Switch extends BaseComponent {
       size,
       checkedText,
       uncheckedText,
-      loading
+      loading,
+      id
     } = this.props;
     const wrapperCls = cls(className, {
       [cssClasses.PREFIX]: true,
@@ -99,13 +100,21 @@ class Switch extends BaseComponent {
       wrapperClassName: cssClasses.LOADING_SPIN,
       size: size === 'default' ? 'middle' : size
     }) : /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.KNOB
+      className: cssClasses.KNOB,
+      "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/React.createElement("div", {
       className: cssClasses.CHECKED_TEXT
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
       className: cssClasses.UNCHECKED_TEXT
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
       ref: this.switchRef,
+      id: id,
+      "aria-checked": nativeControlChecked,
+      "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"],
       onChange: e => this.foundation.handleChange(e.target.checked, e)
     })));
   }
@@ -113,6 +122,11 @@ class Switch extends BaseComponent {
 }
 
 Switch.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
   className: PropTypes.string,
   checked: PropTypes.bool,
   checkedText: PropTypes.node,
@@ -124,7 +138,8 @@ Switch.propTypes = {
   onMouseLeave: PropTypes.func,
   style: PropTypes.object,
   size: PropTypes.oneOf(strings.SIZE_MAP),
-  uncheckedText: PropTypes.node
+  uncheckedText: PropTypes.node,
+  id: PropTypes.string
 };
 Switch.defaultProps = {
   disabled: false,

package/lib/es/table/Body/BaseRow.js

@@ -182,6 +182,7 @@ export default class TableRow extends BaseComponent {
       if (isExpandedColumn(column) && !displayExpandedColumn) {
         cells.push( /*#__PURE__*/React.createElement(TableCell, {
           key: columnIndex,
+          colIndex: columnIndex,
           isSection: isSection
         }));
       } else if (!isScrollbarColumn(column)) {
@@ -191,7 +192,9 @@ export default class TableRow extends BaseComponent {
           diyProps.width = _get(cellWidths, columnIndex);
         }
 
-        cells.push( /*#__PURE__*/React.createElement(TableCell, _Object$assign({}, expandableProps, diyProps, {
+        cells.push( /*#__PURE__*/React.createElement(TableCell, _Object$assign({
+          colIndex: columnIndex
+        }, expandableProps, diyProps, {
           hideExpandedColumn: hideExpandedColumn,
           indentSize: indentSize,
           isSection: isSection,
@@ -230,7 +233,11 @@ export default class TableRow extends BaseComponent {
       replaceClassName,
       record,
       hovered,
-      expanded
+      expanded,
+      expandableRow,
+      level,
+      expandedRow,
+      isSection
     } = this.props;
     const BodyRow = components.body.row;
 
@@ -250,7 +257,32 @@ export default class TableRow extends BaseComponent {
       ["".concat(prefixCls, "-row-expanded")]: expanded,
       ["".concat(prefixCls, "-row-hovered")]: hovered
     }, customClassName);
-    return /*#__PURE__*/React.createElement(BodyRow, _Object$assign({}, rowProps, {
+    const ariaProps = {};
+
+    if (typeof index === 'number') {
+      ariaProps['aria-rowindex'] = index + 1;
+    }
+
+    if (expandableRow) {
+      ariaProps['aria-expanded'] = expanded;
+    } // if row is expandedRow, set it's level to 2 
+
+
+    if (expanded || expandedRow) {
+      ariaProps['aria-level'] = 2;
+    }
+
+    if (typeof level === 'number') {
+      ariaProps['aria-level'] = level + 1;
+    }
+
+    if (isSection) {
+      ariaProps['aria-level'] = 1;
+    }
+
+    return /*#__PURE__*/React.createElement(BodyRow, _Object$assign({
+      role: "row"
+    }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
       ref: this._cacheNode,