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

package/steps/basicStep.tsx

@@ -21,6 +21,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 enum stepSizeMapIconSize {
     small = 'large',
@@ -42,7 +45,7 @@ const BasicStep = (props: BasicStepProps) => {
         stepNumber,
         onClick,
         onChange,
-        ...restProps
+        onKeyDown,
     } = props;
     const renderIcon = () => {
         let inner, progress;
@@ -82,18 +85,26 @@ const BasicStep = (props: BasicStepProps) => {
 
         return inner ? <span className={cls}>{inner}</span> : null;
     };
-    const classString = classnames(prefixCls, className, `${prefixCls}-${status}`, {
+    const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
         [`${prefixCls}-active`]: active,
         [`${prefixCls}-done`]: done
-    });
+    }, className);
     const handleClick = (e: React.MouseEvent) => {
         if (isFunction(onClick)) {
             onClick(e);
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
-        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+        <div role={props["role"]} aria-label={props["aria-label"]} tabIndex={0} aria-current="step" className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
             <div className={`${prefixCls}-container`}>
                 <div className={`${prefixCls}-left`}>{renderIcon()}</div>
                 <div className={`${prefixCls}-content`}>

package/steps/basicSteps.tsx

@@ -18,6 +18,7 @@ export interface BasicStepsProps {
     hasLine?: boolean;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: BasicStepsProps) => {
@@ -70,7 +71,7 @@ const Steps = (props: BasicStepsProps) => {
             return cloneElement(child, { ...childProps });
         });
         return content;
-    }, [children, initial, prefixCls, direction, status, current, size]);
+    }, [children, initial, prefixCls, direction, status, current, size, onChange]);
 
     const wrapperCls = cls(className, {
         [`${prefixCls}-basic`]: true,
@@ -80,7 +81,7 @@ const Steps = (props: BasicStepsProps) => {
     });
 
     return (
-        <div className={wrapperCls} style={style}>
+        <div aria-label={props["aria-label"]} className={wrapperCls} style={style}>
             {inner}
         </div>
     );

package/steps/fillStep.tsx

@@ -18,10 +18,13 @@ export interface FillStepProps {
     stepNumber?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 
 const FillStep = (props: FillStepProps) => {
-    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber } = props;
+    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber, onKeyDown } = props;
     const renderIcon = () => {
         let inner, progress;
 
@@ -51,10 +54,10 @@ const FillStep = (props: FillStepProps) => {
             }
         }
         const cls = classnames({
-            [`${prefixCls }-left`]: true,
-            [`${prefixCls }-icon`]: 'icon' in props,
-            [`${prefixCls }-plain`]: !('icon' in props),
-            [`${prefixCls }-icon-process`]: progress,
+            [`${prefixCls}-left`]: true,
+            [`${prefixCls}-icon`]: 'icon' in props,
+            [`${prefixCls}-plain`]: !('icon' in props),
+            [`${prefixCls}-icon-process`]: progress,
         });
 
         return inner ? <div className={cls}>{inner}</div> : null;
@@ -65,26 +68,38 @@ const FillStep = (props: FillStepProps) => {
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
         <div
+            role={props["role"]}
+            aria-label={props["aria-label"]}
+            aria-current="step"
+            tabIndex={0} 
             className={classnames({
-                [className]: Boolean(className),
                 [prefixCls]: true,
                 [`${prefixCls}-${status}`]: Boolean(status),
-                [`${prefixCls }-clickable`]: onClick,
-            })}
+                [`${prefixCls}-clickable`]: onClick,
+            }, className)}
             style={style}
             onClick={e => {
                 handleClick(e);
             }}
+            onKeyDown={handleKeyDown}
         >
             {renderIcon()}
-            <div className={`${prefixCls }-content`}>
-                <div className={`${prefixCls }-title`} title={typeof title === 'string' ? title : null}>
-                    <span className={`${prefixCls }-title-text`}>{title}</span>
+            <div className={`${prefixCls}-content`}>
+                <div className={`${prefixCls}-title`} title={typeof title === 'string' ? title : null}>
+                    <span className={`${prefixCls}-title-text`}>{title}</span>
                 </div>
                 <div
-                    className={`${prefixCls }-description`}
+                    className={`${prefixCls}-description`}
                     title={typeof description === 'string' ? description : null}
                 >
                     {description}

package/steps/fillSteps.tsx

@@ -16,6 +16,7 @@ export interface FillStepsProps {
     style?: React.CSSProperties;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: FillStepsProps) => {
@@ -66,6 +67,7 @@ const Steps = (props: FillStepsProps) => {
         <div
             className={wrapperCls}
             style={style}
+            aria-label={props["aria-label"]}
         >
             <Row type="flex" justify="start">
                 {inner}

package/steps/navStep.tsx

@@ -15,21 +15,32 @@ export interface NavStepProps {
     prefixCls?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 
 const NavStep = (props: NavStepProps) => {
-    const { prefixCls, className, title, style, active, index, total, onClick, onChange, ...restProps } = props;
-    const classString = classnames(prefixCls, className, {
+    const { prefixCls, className, title, style, active, index, total, onClick, onKeyDown, onChange } = props;
+    const classString = classnames(prefixCls, {
         [`${prefixCls}-active`]: active
-    });
+    }, className);
     const handleClick = (e: React.MouseEvent) => {
         if (isFunction(onClick)) {
             onClick(e);
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
-        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+        <div role={props["role"]} aria-label={props["aria-label"]} aria-current="step" tabIndex={0} className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
             <div className={`${prefixCls}-container`}>
                 <div className={`${prefixCls}-content`}>
                     <div className={`${prefixCls}-title`}>

package/steps/navSteps.tsx

@@ -13,6 +13,7 @@ export interface NavStepsProps {
     size?: Size;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: NavStepsProps) => {
@@ -38,7 +39,7 @@ const Steps = (props: NavStepsProps) => {
             return cloneElement(child, { ...childProps });
         });
         return content;
-    }, [children, prefixCls, current, size]);
+    }, [children, prefixCls, current, size, initial, onChange]);
 
     const wrapperCls = cls(className, {
         [`${prefixCls}-nav`]: true,
@@ -46,7 +47,7 @@ const Steps = (props: NavStepsProps) => {
     });
 
     return (
-        <div className={wrapperCls} style={style}>
+        <div aria-label={props["aria-label"]} className={wrapperCls} style={style}>
             {inner}
         </div>
     );

package/switch/_story/switch.stories.js

@@ -9,8 +9,8 @@ export default {
 
 export const _Switch = () => (
   <div>
-    <Switch onChange={(v, e) => console.log(v)}></Switch>
-    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}></Switch>
+    <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
+    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label='mode-switch'></Switch>
   </div>
 );
 
@@ -20,9 +20,9 @@ _Switch.story = {
 
 export const SwitchSize = () => (
   <div>
-    <Switch onChange={(v, e) => console.log(v)}></Switch>
-    <Switch onChange={(v, e) => console.log(v)} size="small"></Switch>
-    <Switch onChange={(v, e) => console.log(v)} size="large"></Switch>
+    <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="small" aria-label='power-switch'></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="large" aria-label='power-switch'></Switch>
   </div>
 );
 
@@ -32,20 +32,20 @@ SwitchSize.story = {
 
 export const SwitchCheckedTextUncheckedText = () => (
   <div>
-    <Switch defaultChecked checkedText="开" uncheckedText="关" />
-    <Switch checkedText={'|'} uncheckedText="〇" />
+    <Switch defaultChecked checkedText="开" uncheckedText="关" aria-label='power-switch'/>
+    <Switch checkedText={'|'} uncheckedText="〇" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch checkedText="开" uncheckedText="关" />
-    <Switch defaultChecked checkedText="｜" uncheckedText="〇" />
+    <Switch checkedText="开" uncheckedText="关" aria-label='power-switch'/>
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch checkedText="开" uncheckedText="关" size="large" />
-    <Switch checkedText="｜" uncheckedText="〇" size="large" />
+    <Switch checkedText="开" uncheckedText="关" size="large" aria-label='power-switch'/>
+    <Switch checkedText="｜" uncheckedText="〇" size="large" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" />
-    <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" />
+    <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" aria-label='power-switch'/>
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" aria-label='power-switch'/>
   </div>
 );
 
@@ -55,9 +55,9 @@ SwitchCheckedTextUncheckedText.story = {
 
 export const SwitchDisabled = () => (
   <>
-    <Switch disabled>disabled</Switch>
+    <Switch disabled aria-label='power-switch'>disabled</Switch>
 
-    <Switch disabled checked={true} onChange={(v, e) => console.log(v)}></Switch>
+    <Switch disabled checked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
   </>
 );
 
@@ -67,7 +67,7 @@ SwitchDisabled.story = {
 
 const ControledSwitch = () => {
   const [checked, onChange] = useState(true);
-  return <Switch checked={checked} onChange={(v, e) => onChange(v)} />;
+  return <Switch checked={checked} onChange={(v, e) => onChange(v)} aria-label='power-switch'/>;
 };
 export const SwitchCheckedOnChange = () => <ControledSwitch />;
 
@@ -82,7 +82,7 @@ const UnControledSwitch = () => {
   return (
     <>
       {/* <Switch onChange={onChange} defaultChecked={false}/> */}
-      <Switch onChange={onChange} defaultChecked={true} />
+      <Switch onChange={onChange} defaultChecked={true} aria-label='power-switch'/>
     </>
   );
 };
@@ -137,15 +137,16 @@ class LoadingDemo extends React.Component {
         <Switch
           checked={this.state.checked}
           onChange={this.onChange}
+          aria-label='power-switch'
           loading={this.state.loading}
         ></Switch>
         <br />
         <br />
         <hr />
-        <Switch loading disabled />
+        <Switch loading disabled aria-label='power-switch'/>
         <br />
         <br />
-        <Switch loading disabled defaultChecked />
+        <Switch loading disabled defaultChecked aria-label='power-switch'/>
         <br />
         <br />
       </>

package/switch/_story/switch.stories.tsx

@@ -13,9 +13,9 @@ const stories = storiesOf('Switch', module);
 
 stories.add('switch', () => (
     <div>
-        <Switch onChange={(v, e) => console.log(v)}>
+        <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
-        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
     </div>
 ));
@@ -24,24 +24,24 @@ stories.add('switch', () => (
 stories.add('switch size', () => (
     <div>
         <Switch onChange={(v, e) => console.log(v)}></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='small'></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='large'></Switch>
+        <Switch onChange={(v, e) => console.log(v)} size='small' aria-label='power-switch'></Switch>
+        <Switch onChange={(v, e) => console.log(v)} size='large' aria-label='power-switch'></Switch>
     </div>
 ));
 
 stories.add('switch checkedText &  uncheckedText', () => (
     <div>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' />
+        <Switch defaultChecked checkedText='开' uncheckedText='关' aria-label='power-switch'/>
         <Switch checkedText={'|'} uncheckedText='〇' />
         <br/><br/>
         <Switch checkedText='开' uncheckedText='关' />
-        <Switch defaultChecked checkText='｜' uncheckedText='〇' />
+        <Switch defaultChecked checkedText='｜' uncheckedText='〇' aria-label='power-switch'/>
         <br/><br/>
-        <Switch checkedText='开' uncheckedText='关' size='large' />
-        <Switch checedkText='｜' uncheckedText='〇' size='large' />
+        <Switch checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
+        <Switch checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
         <br/><br/>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' />
+        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
+        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
     </div>
 ));
 
@@ -51,7 +51,7 @@ stories.add('switch disabled', () => (
             disabled
         </Switch>
 
-        <Switch disabled checked={true} onChange={(v, e) => console.log(v)}>
+        <Switch disabled checked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
     </>
 ));
@@ -79,8 +79,8 @@ const UnControledSwitch = () => {
 stories.add('switch defaultChecked + onChange', () => <UnControledSwitch/>);
 
 class LoadingDemo extends React.Component {
-    constructor() {
-        super()
+    constructor(props) {
+        super(props);
         this.state = {
             checked: true,
             loading:false

package/switch/index.tsx

@@ -1,4 +1,4 @@
-/* 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';
@@ -9,8 +9,12 @@ import '@douyinfe/semi-foundation/switch/switch.scss';
 
 import { noop } from 'lodash';
 import Spin from '../spin';
-
 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;
@@ -23,7 +27,8 @@ export interface SwitchProps {
     size?: 'large' | 'default' | 'small';
     checkedText?: React.ReactNode;
     uncheckedText?: React.ReactNode;
-}
+    id?: string;
+} 
 
 export interface SwitchState {
     nativeControlChecked: boolean;
@@ -32,6 +37,11 @@ export interface SwitchState {
 
 class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static 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,
@@ -44,6 +54,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         style: PropTypes.object,
         size: PropTypes.oneOf<SwitchProps['size']>(strings.SIZE_MAP),
         uncheckedText: PropTypes.node,
+        id: PropTypes.string,
     };
 
     static defaultProps: Partial<SwitchProps> = {
@@ -102,7 +113,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
 
     render() {
         const { nativeControlChecked, nativeControlDisabled } = this.state;
-        const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading } = this.props;
+        const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading, id } = this.props;
         const wrapperCls = cls(className, {
             [cssClasses.PREFIX]: true,
             [cssClasses.CHECKED]: nativeControlChecked,
@@ -130,7 +141,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                                 size={size === 'default' ? 'middle' : size}
                             />
                         )
-                        : <div className={cssClasses.KNOB} />
+                        : <div className={cssClasses.KNOB} aria-hidden={true} />
                 }
                 {showCheckedText ? (
                     <div className={cssClasses.CHECKED_TEXT}>
@@ -145,6 +156,13 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                 <input
                     {...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)}
                 />
             </div>

package/table/Body/BaseRow.tsx

@@ -238,7 +238,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
             }
 
             if (isExpandedColumn(column) && !displayExpandedColumn) {
-                cells.push(<TableCell key={columnIndex} isSection={isSection} />);
+                cells.push(<TableCell key={columnIndex} colIndex={columnIndex} isSection={isSection} />);
             } else if (!isScrollbarColumn(column)) {
                 const diyProps: { width?: number } = {};
 
@@ -248,6 +248,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
 
                 cells.push(
                     <TableCell
+                        colIndex={columnIndex}
                         {...expandableProps}
                         {...diyProps}
                         hideExpandedColumn={hideExpandedColumn}
@@ -318,6 +319,10 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
             record,
             hovered,
             expanded,
+            expandableRow,
+            level,
+            expandedRow,
+            isSection
         } = this.props;
 
         const BodyRow: any = components.body.row;
@@ -341,9 +346,28 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
                     },
                     customClassName
                 );
+        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 (
             <BodyRow
+                role="row"
+                {...ariaProps}
                 {...rowProps}
                 style={baseRowStyle}
                 className={rowCls}

package/table/Body/index.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable max-len */
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { get, size, isMap, each, isEqual, pick, isNull } from 'lodash';
+import { get, size, isMap, each, isEqual, pick, isNull, isFunction } from 'lodash';
 import classnames from 'classnames';
 import { VariableSizeList as List } from 'react-window';
 
@@ -15,7 +15,8 @@ import {
     isDisabled,
     getRecord,
     genExpandedRowKey,
-    getDefaultVirtualizedRowConfig
+    getDefaultVirtualizedRowConfig,
+    isTreeTable
 } from '@douyinfe/semi-foundation/table/utils';
 import BodyFoundation, { BodyAdapter, FlattenData, GroupFlattenData } from '@douyinfe/semi-foundation/table/bodyFoundation';
 import { strings } from '@douyinfe/semi-foundation/table/constants';
@@ -730,6 +731,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
             dataSource,
             onScroll,
             groups,
+            expandedRowRender,
         } = this.props;
 
         const x = get(scroll, 'x');
@@ -775,6 +777,9 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 onScroll={handleBodyScroll}
             >
                 <Table
+                    role={ isMap(groups) || isFunction(expandedRowRender) || isTreeTable({ dataSource }) ? 'treegrid' : 'grid'}
+                    aria-rowcount={dataSource && dataSource.length}
+                    aria-colcount={columns && columns.length}
                     style={tableStyle}
                     className={classnames(prefixCls, {
                         [`${prefixCls}-fixed`]: anyColumnFixed,

package/table/ColumnFilter.tsx

@@ -164,7 +164,13 @@ export default function ColumnFilter(props: ColumnFilterProps = {}): React.React
     } else {
         iconElem = (
             <div className={finalCls}>
-                <IconFilter size="small" />
+                <IconFilter
+                    role="button"
+                    aria-label="Filter data with this column"
+                    aria-haspopup="listbox"
+                    tabIndex={-1}
+                    size="small"
+                />
             </div>
         );
     }

package/table/ColumnSelection.tsx

@@ -20,6 +20,7 @@ export interface TableSelectionCellProps {
     indeterminate?: boolean; // Intermediate state, shown as a solid horizontal line
     prefixCls?: string;
     className?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 /**
@@ -36,6 +37,7 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
         indeterminate: PropTypes.bool,
         prefixCls: PropTypes.string,
         className: PropTypes.string,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -60,6 +62,7 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
 
     render() {
         const { selected, getCheckboxProps, indeterminate, disabled, prefixCls, className } = this.props;
+        const ariaLabel = this.props['aria-label'];
         let checkboxProps = {
             onChange: this.handleChange,
             disabled,
@@ -81,7 +84,7 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
 
         return (
             <span className={wrapCls}>
-                <Checkbox {...checkboxProps} />
+                <Checkbox aria-label={ariaLabel} {...checkboxProps} />
             </span>
         );
     }

package/table/ColumnSorter.tsx

@@ -7,6 +7,7 @@ import { IconCaretup, IconCaretdown } from '@douyinfe/semi-icons';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/table/constants';
 
 import { SortOrder } from './interface';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 
 export interface ColumnSorterProps {
     className?: string;
@@ -43,9 +44,25 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
         const downCls = cls(`${prefixCls}-column-sorter-down`, {
             on: sortOrder === strings.SORT_DIRECTIONS[1],
         });
+        const ariaProps = {
+            /**
+             * Set 'aria-sort' to aria-columnheader is difficult, so set 'aria-label' about sort info to sorter
+             * reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
+             */
+            'aria-label': `Current sort order is ${sortOrder ? `${sortOrder}ing` : 'none'}`,
+            'aria-roledescription': 'Sort data with this column',
+        };
 
         return (
-            <div style={style} className={`${prefixCls}-column-sorter`} onClick={onClick}>
+            <div
+                role='button'
+                {...ariaProps}
+                tabIndex={-1}
+                style={style}
+                className={`${prefixCls}-column-sorter`}
+                onClick={onClick}
+                onKeyPress={e => isEnterPress(e) && onClick(e as any)}
+            >
                 <span className={`${upCls}`}>
                     <IconCaretup size={iconBtnSize} />
                 </span>