docs(a11y): init

content/basic/grid/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 9
+order: 10
 category: Basic
 title:  Grid
 icon: doc-grid

content/basic/grid/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 9
+order: 10
 category: 基础
 title:  Grid 布局
 icon: doc-grid

content/basic/icon/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 10
+order: 11
 category: Basic
 title: Icon
 subTitle: Icon
@@ -160,3 +160,18 @@ import StarIcon from './star.svg';
 | spin | spin animation | boolean | |
 | style | Icon style | CSSProperties | None |
 | svg | Icon content | ReactNode | None |
+
+## Accessibility
+
+### ARIA
+
+- The Icon component role is img, and its aria-label defaults to the component's file name
+
+```jsx live=true
+import React from 'react';
+import { IconHome } from '@douyinfe/semi-icons';
+
+() => <IconHome aria-label="back to homepage" />;
+```
+
+- The svg element inside Icon is a decorative element, and aria-hidden is set by default to prevent it from being read by screen readers

content/basic/icon/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 10
+order: 11
 category: 基础
 title:  Icon 图标
 icon: doc-icons
@@ -159,3 +159,19 @@ import StarIcon from './star.svg';
 | spin | 旋转动画 | boolean |   |
 | style | 图标样式 | CSSProperties | 无    |
 | svg | 图标内容 | ReactNode | 无    |
+
+
+## Accessibility
+
+### ARIA
+
+- Icon 组件 role 为 img，它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为 `home`，如果你有更好的语义化名字，可以通过 aria-label 传入。
+
+```jsx live=true
+import React from 'react';
+import { IconHome } from '@douyinfe/semi-icons';
+
+() => <IconHome aria-label="back to homepage" />;
+```
+
+- Icon 内部的 svg 元素为装饰元素，默认设置了 aria-hidden 以不被屏幕阅读器阅读

content/basic/layout/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 11
+order: 12
 category: Basic
 title:  Layout
 subTitle: Layout
@@ -509,7 +509,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - Sider can pass in aria-label props to describe the function of this Sider.
 - Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.

content/basic/layout/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 11
+order: 12
 category: 基础
 title: Layout 布局
 icon: doc-layout
@@ -523,7 +523,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - Sider 可传入 aria-label props，描述该 Sider 作用。
 - Header Content Main Footer 可传入 role aria-label 描述对应元素作用。

content/basic/space/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 13
+order: 14
 category: basic
 title:  Space
 icon: doc-space

content/basic/space/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 13
+order: 14
 category: 基础
 title:  Space 间距
 icon: doc-space

content/basic/tokens/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 12
+order: 13
 category: Basic
 title: Tokens 
 icon: doc-token

content/basic/tokens/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 12
+order: 13
 category: 基础
 title:  Tokens 设计变量
 icon: doc-token

content/basic/typography/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 14
+order: 15
 category: Basic
 title:  Typography
 subTitle: Typography

content/basic/typography/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 14
+order: 15
 category: 基础
 title:  Typography 版式
 icon: doc-typography

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Feedback
 title: Progress
 subTitle: Progress
@@ -269,7 +269,7 @@ import { Progress } from '@douyinfe/semi-ui';
 | width | Width of circular progress bar | number | 72 when size='default', 24 for 'small' |
 
 ## Accessibility
-### Aria
+### ARIA
 
 -   Progress has a `progressbar` role to indicate that it is a progress bar component.
 -   Progress will automatically set `aria-valuenow` as the progress percentage (`percent`) passed to the component to ensure that the screen reader can get the correct percentage value. In addition, Progress supports incoming `aria-valuetext`. When you pass in, according to W3C specifications, `aria-valuetext` will be used and consumed by screen readers instead of `aria-valuenow`

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress
@@ -290,7 +290,7 @@ import { Progress } from '@douyinfe/semi-ui';
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 -   Progress 具有 `progressbar` role 来表示它是一个进度条组件。
 -   Progress 会自动将 `aria-valuenow` 设置为传递给组件的进度百分比（`percent`），以确保屏幕阅读器可以获取正确的百分比数值。另外，Progress 支持传入 `aria-valuetext`，当你传入时，根据 W3C 规范，`aria-valuetext` 将优先被屏幕阅读器使用消费，而不是 `aria-valuenow`

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Feedback
 title:  Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Feedback
 title: Toast
 subTitle: Toast
@@ -409,6 +409,12 @@ HookToast
 -   `Toast.useToast` **v>=1.2.0**  
     When you need access Context, you could use `Toast.useToast` to create a `contextHolder` and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where `contextHolder` is inserted. Hook toast has following methods: `info`, `success`, `warning`, `error`, `close`.
 
+## Accessibility
+
+### ARIA
+
+- The role of Toast is alert
+
 ## Design Tokens
 
 <DesignToken/>

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 反馈类
 title: Toast 提示
 icon: doc-toast
@@ -410,6 +410,12 @@ HookToast ( >= 1.2.0 )：
 -   `Toast.useToast()`  
     当你需要使用 Context 时，可以通过 Toast.useToast 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Toast 将会得到 contextHolder 所在位置的所有上下文。创建的 toast 对象拥有与以下方法：`info`, `success`, `warning`, `error`, `close`。
 
+## Accessibility
+
+### ARIA
+
+- Toast 的 role 为 alert
+
 ## 设计变量
 
 <DesignToken/>

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 15
+order: 16
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 15
+order: 16
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/button/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 16
+order: 17
 category: Input
 title:  Button
 subTitle: Button
@@ -488,7 +488,7 @@ function SplitButtonDemo(){
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - `aria-label` is used to indicate the function of the button. For icon buttons, we recommend using this attribute
 - `aria-disabled` is synchronized with the disabled attribute, indicating that the button is disabled

content/input/button/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 16
+order: 17
 category: 输入类
 title:  Button 按钮
 icon: doc-button
@@ -447,7 +447,7 @@ function SplitButtonDemo(){
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - `aria-label` 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
 - `aria-disabled` 与 disabled 属性同步，表示按钮禁用 

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 17
+order: 18
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 17
+order: 18
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 18
+order: 19
 category: Input
 title:  Checkbox
 subTitle: Checkbox
@@ -395,7 +395,7 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 
 ## Accessibility
 
-### Aria
+### ARIA
 - The role of Checkbox is `checkbox`, the role of CheckboxGroup is `list`, and its direct child element is `listitem`
 - `aria-label`: When using the Checkbox alone, if Children have no text, it is recommended to pass in the `aria-label` prop to describe the function of the Checkbox in one sentence, which will make the screen reader read out the content of this label. If you are using Form.Checkbox, you can use the label provided by Form without passing in `aria-label`
 - `aria-labelledby` points to the `addon` node, used to explain the role of the current Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 18
+order: 19
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox
@@ -377,7 +377,7 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 
 ## Accessibility
 
-### Aria
+### ARIA
 - Checkbox 的 role 为 `checkbox`，CheckboxGroup 的 role 为 `list`，它的直接子元素为 `listitem`
 - `aria-label`：单独使用 Checkbox 时，如果 Children 没有文本，建议传入 `aria-label` prop，用一句话描述 Checkbox 的作用，这会让屏幕阅读器读出这个标签的内容。如果你使用的是 Form.Checkbox，可以使用 Form 提供的 label 而无需传入 `aria-label`
 - `aria-labelledby` 指向 `addon` 节点，用于解释当前 Checkbox 的作用

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 19
+order: 20
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 19
+order: 20
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 21
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 21
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  InputNumber
 subTitle: InputNumber
@@ -240,5 +240,11 @@ function Demo () {
 | blur()  | Move the focus. |
 | focus() | Get the focus.  |
 
+## Accessibility
+### ARIA
+
+- Added button role to the increase and decrease buttons to indicate that it is a button that can be clicked
+- Use aria-valuenow for the current value, aria-valuemax for the maximum acceptable value, and aria-valuemin for the minimum acceptable value
+
 ## Design Tokens
 <DesignToken/>

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber
@@ -219,5 +219,13 @@ function Demo () {
 | blur()  | 移出焦点 |
 | focus() | 获取焦点 |
 
+
+## Accessibility
+
+### ARIA
+
+- 增减按钮添加了 button role，以表示是可以点击的按钮
+- 使用 aria-valuenow 表示当前值，aria-valuemax 表示可以接受的最大值，aria-valuemin 表示可以接受的最小值
+
 ## 设计变量
 <DesignToken/>

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title: Radio
 subTitle: Radio
@@ -357,7 +357,7 @@ class App extends React.Component {
 
 - Card type and button type Radio group can be selected by arrow switch
 
-### Aria
+### ARIA
 
 - `aria-label`: used to explain the role of Radio or RadioGroup
 - `aria-labelledby` points to the addon node, used to explain the content of Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title: Radio 单选框
 icon: doc-radio
@@ -317,7 +317,7 @@ class App extends React.Component {
 
 - 卡片式、按钮式 Radio 组可以通过箭头切换选中
 
-### Aria
+### ARIA
 
 - `aria-label`：用于解释 Radio 或 RadioGroup 的作用
 - `aria-labelledby` 默认指向 addon 节点，用于解释 Radio 的内容

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title: Rating
 subTitle: Rating
@@ -178,5 +178,11 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | tooltips      | Customize prompted information for each item                                          | String[]                | -                                        |
 | value         | Controlled value                                                                      | number                  | -                                        |
 
+##Accessibility
+
+### ARIA
+
+- Rating has aria-checked to indicate whether it is currently selected, aria-posinset to indicate the position in the list, and aria-setsize to indicate the length of the list
+
 ## Design Tokens
 <DesignToken/>

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title:  Rating 评分
 icon: doc-rating
@@ -155,5 +155,11 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 | tooltips | 自定义每项的提示信息 | string[] | - |
 | value | 当前受控值 | number | - |
 
+## Accessibility
+
+### ARIA
+
+- Rating 具有 aria-checked 表示当前是否选中，aria-posinset 表示在列表的位置，aria-setsize 表示列表的长度
+
 ## 设计变量
 <DesignToken/>

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title: Select
 subTitle: Select
@@ -1371,6 +1371,15 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | open        | Manually open dropdown list     | v0.34.0 |
 | selectAll   | Manually select all options     | v1.18.0 |
 
+## Accessibility
+
+### ARIA
+
+- The role of the Select trigger is combobox, the role of the popup layer is listbox, and the role of the option is option
+- Select trigger has aria-haspopup, aria-expanded, and aria-controls properties, indicating the relationship between trigger and popup layer
+- When multiple selections are made, listbox aria-multiselectable is true, indicating that multiple selections are currently available
+- aria-selected is true when Option is selected; aria-disabled is true when Option is disabled
+
 ## Design Tokens
 
 <DesignToken/>

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title:  Select 选择器
 icon: doc-select
@@ -1393,6 +1393,16 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | deselectAll | 调用时可以手动清空所有已选项 | v1.18.0 |
 | selectAll | 调用时可以选中所有Option | v1.18.0 |
 
+## Accessibility
+
+### ARIA
+
+- Select trigger 的 role 为 combobox，弹出层的 role 为 listbox，可选项的 role 为 option
+- Select trigger 具有 aria-haspopup、aria-expanded、aria-controls 属性，表示 trigger 与弹出层的关系
+- 多选时，listbox aria-multiselectable 为 true，表示当前可以多选
+- Option 选中时，aria-selected 为 true；当 Option 禁用时，aria-disabled 为 true
+
+
 ## 设计变量
 <DesignToken/>
 

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

content/input/switch/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
 title: Switch
 subTitle: Switch
@@ -193,7 +193,7 @@ import { Switch } from '@douyinfe/semi-ui';
 | uncheckedText | Content displayed when closed, invalid when size is small | React Node |  | 0.25.0 |
 
 ## Accessibility
-### Aria
+### ARIA
 - Switch has a `switch` role, when checked is true, `aria-checked` will be automatically set to true, and vice versa.
 - As a form field, it should have a Label, which will be automatically brought on when you use Form.Switch.
 - If you use Switch alone, it is recommended to use `aria-label` to describe the current label function.

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
 title: Switch 开关
 icon: doc-switch
@@ -189,7 +189,7 @@ import { Switch } from '@douyinfe/semi-ui';
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 -   Switch 具有 `switch` role，当 checked 为 true 时，`aria-checked` 将被自动设置为 true，反之亦然.
 -   作为表单控件应该带有 Label，当你使用 Form.Switch 时会自动被带上。

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: TagInput
 subTitle: TagInput
@@ -455,7 +455,7 @@ class CustomRender extends React.Component {
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - TagInput supports the input of `aria-label` to indicate the function of the TagInput;
 - TagInput will set `aria-disabled` and `aria-invalid` according to disabled and validateStatus props;

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput
@@ -454,7 +454,7 @@ class CustomRender extends React.Component {
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - TagInput 支持传入 `aria-label` 来表示该 TagInput 作用；
 - TagInput 会依据 disabled 及 validateStatus props 来分别设置 `aria-disabled`、`aria-invalid`；

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect
@@ -1261,10 +1261,19 @@ For custom rendering of input box.
 
 ## Accessibility
 
-### Aria
+### ARIA
 
-- TreeSelect supports passing in  `aria-label`、`aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required` to indicate the role of the TreeSelect;
-- TreeSelect will set `aria-disabled`, `aria-checked`, `aria-selected`, and `aria-level` for each child node to indicate the node status and level.
+- TreeSelect will automatically set `aria-label` to 'TreeSelect', and also support users to set `aria-label` to indicate the function of the TreeSelect;
+- TreeSelect allows users to set `aria-describedby`, `aria-errormessage`, `aria-invalid`, `aria-labelledby`, `aria-required`, in addition, Form will automatically set these properties for Form.TreeSelect;
+- TreeSelect will set `aria-disabled`, `aria-checked`, `aria-selected`, `aria-level` for each child node to indicate node status and level;
+
+Demo:
+```typescript
+    <TreeSelect
+        /* other attributes */
+        aria-label='example treeSelect'
+    />
+```
 
 ## Design Tokens
 <DesignToken/>

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect
@@ -1236,17 +1236,26 @@ function Demo() {
 | isLeaf| 是否为叶子节点 | boolean |-|
 
 
+### Method
+- search(sugInput: string)
+如果需要自定义搜索框可以使用该方法。
+
 ## Accessibility
 
-### Aria
+### ARIA
 
-- TreeSelect 支持传入 `aria-label`、`aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required` 来表示该 TreeSelect 作用;
-- TreeSelect 会为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
+- TreeSelect 会自动设置 `aria-label` 为 'TreeSelect'，也支持用户自行设置 `aria-label` 来表示该 TreeSelect 作用;
+- TreeSelect 允许用户设置 `aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required`，另外，Form 会为 Form.TreeSelect 自动设置这些属性;
+- TreeSelect 会自动为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
 
+示例:
+```typescript
+    <TreeSelect
+        /* other attributes */
+        aria-label='example treeSelect'
+    />
+```
 
-## 设计变量
-<DesignToken/>
 
-### Method
-- search(sugInput: string)
-如果需要自定义搜索框可以使用该方法。
+## 设计变量
+<DesignToken/>

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: Upload
 icon: doc-upload
@@ -1081,6 +1081,15 @@ import { IconUpload } from '@douyinfe/semi-icons';
 };
 ```
 
+## Accessibility
+
+The Upload component is an interactive control that can trigger file selection when clicking or dragging. After the file is selected, the status will be displayed in the file list.
+
+### ARIA
+
+- Add `role="button"` to clickable elements
+- Add `role="list"` to the file list and describe it with `aria-label`
+
 ## API Reference
 
 ---

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: Upload 上传
 icon: doc-upload
@@ -1068,6 +1068,15 @@ import { IconUpload } from '@douyinfe/semi-icons';
 };
 ```
 
+## Accessibility
+
+Upload组件是一个可交互的控件，在点击或拖拽时触发文件选择，文件选中后会在文件列表内展示状态。
+
+### ARIA
+
+- 为可点击元素添加 `role="button"`
+- 文件列表添加 `role="list"`，并用 `aria-label` 描述
+
 ## API 参考
 
 ---

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Navigation
 title:  Pagination
 subTitle: Pagination
@@ -201,6 +201,13 @@ import { Pagination } from '@douyinfe/semi-ui';
 | onPageChange       | A callback function for page number changes                                                                 | function(currentPage: number)                   |                     |              |
 | onPageSize Change  | Callback function when capacity changes per page                                                            | function(pageSize: number)                      |                     |              |
 
+## Accessibility
+
+### ARIA
+
+- `aria-label`: Labels the element such as previous, next, pages in the pagination.
+- `aria-current`: Indicates the current page.
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination
@@ -194,6 +194,13 @@ import { Pagination } from '@douyinfe/semi-ui';
 | onPageChange       | 页码变化的回调函数                                                                | function(currentPage: number)                   |                     |
 | onPageSizeChange   | 每页容量变化时的回调函数                                                          | function(pageSize: number)                      |                     |
 
+## Accessibility
+
+### ARIA
+
+- `aria-label`: 描述组件内页码、前一页、后一页等元素的标签
+- `aria-current`: 指向当前页的页码元素
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title: Tabs
 subTitle: Tabs
@@ -560,6 +560,21 @@ style | style object | CSSProperties | None |
 tab | Tab page bar display text | ReactNode | None |
 closable | whether user can close the tab **>=2.1.0** | boolean | false |
 
+
+## Accessibility
+
+### ARIA
+- About role
+  - TabBar has a role of `tablist`
+  - Tab in TabBar has a role of `tab`
+  - TabPane has a role of `tabpanel`
+
+- aria-orientation: Indicates TabBar's orientation, can be `vertical` or `horizontal`. When tabPosition is `left`, aria-orientation will be `vertical`, when tabPosition is `top`, aria-orientation will be `horizontal`.
+- aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
+- aria-selected: Indicates whether the Tab is selected.
+- aria-controls: Indicates the TabPane controlled by the Tab
+- aria-labelledby: Indicates the element labels the TabPane
+
 ## Design Token
 
 <DesignToken/>

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs
@@ -585,6 +585,20 @@ style     | 样式对象         | CSSProperties             | 无     |
 tab       | 标签页栏显示文字 | ReactNode | 无     |
 closable  | 允许关闭tab **>=2.1.0**| boolean | false |
 
+## Accessibility
+
+### ARIA
+- 关于 role
+  - TabBar 对应的 role 为 `tablist`
+  - TabBar 中的 Tab 对应的 role 为 `tab`
+  - TabPane 对应的 role 为 `tabpanel`
+
+- aria-orientation: 表明 TabBar 的方向，有 `vertical` 和 `horizontal` 两种。当传入 tabPosition 为 left 时，aria-orientation 会被设置为 `vertical`，tabPosition 为 top 时，设置为 `horizontal`
+- aria-disabled: 当 TabPane 设置为 disabled 时，对应 Tab 的 aria-disabled 会被设置为 true
+- aria-selected: 表明 Tab 是否被选中
+- aria-controls: 指向 Tab 标签所控制的 TabPane
+- aria-labelledby: 指向设置 TabPane 标签的元素
+
 ## 设计变量
 
 <DesignToken/>

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title:  Tree
 subTitle: Tree
@@ -1897,12 +1897,19 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - Tree supports passing in `aria-label` to indicate the role of the Tree;
 - Tree will set `aria-disabled`, `aria-checked`, `aria-selected`, and `aria-level` for each child node to indicate the node status and level;
-- Tree will set `role` to `tree` and `treeitem` for corresponding parts;
-- Tree supports multiple selections by pressing Enter to select nodes.
+- Tree will set `role` to `tree` and `treeitem` for corresponding parts.
+
+Demo:
+```typescript
+    <Tree
+        /* other attributes */
+        aria-label='example tree'
+    />
+```
 
 ## Design Tokens
 <DesignToken/>

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree
@@ -1909,17 +1909,24 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | itemSize | 每行的treeNode的高度，必传 | number | - |
 | width | 宽度值 | number\|string | '100%' |
 
+### Ref 方法
+- search(sugInput) => void
+
 ## Accessibility
 
-### Aria
+### ARIA
 
 - Tree 支持传入 `aria-label` 来表示该 Tree 作用;
-- Tree 会为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
-- Tree 会为对应部分分别设置 `role` 为 `tree`、`treeitem`;
-- Tree 支持多选时通过按下 Enter 键来选中节点。
+- Tree 会自动为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;
+- Tree 会自动为对应部分分别设置 `role` 为 `tree`、`treeitem`。
+
+示例:
+```typescript
+    <Tree
+        /* other attributes */
+        aria-label='example tree'
+    />
+```
 
 ## 设计变量
 <DesignToken/>
-
-### Ref 方法
-- search(sugInput) => void

content/order.js

@@ -3,6 +3,7 @@ const order = [
     'getting-started',
     'customize-theme',
     'dark-mode',
+    'accessibility',
     'changelog',
     'update-to-v2',
     'faq',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 其他
 title:  Configprovider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title: Collapsible
 subTitle: Collapsible
@@ -187,6 +187,30 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 | motion | Toggle whether to turn on animation | Motion | `true` | - |
 | reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | - | 1.5.0 |
 | style | Style object | CSSProperties | - | 0.34.0 |
+| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string |-| 2.3.0|
+
+## Accessibility
+
+### ARIA
+
+- Collapsible has `id` props, the value passed in will be set as the id of the wrapper element, which can be used with other components' `aria-controls` to indicate the control relationship, see the usage example below.
+
+```jsx
+import Collapsible from './index';
+
+
+()=>{
+    const collapseId = 'myCollapsible';
+    const [visible,setVisible]=useState(false);
+    return <>
+        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>
+        <Collapsible isOpen={visible} id={collapseId}>
+            <div>hide content</div>
+        </Collapsible>
+    </>
+}
+
+```
 
 ## FAQ
 

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible
@@ -218,6 +218,29 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 | motion | 是否开启动画 | Motion | `true` | - |
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number \| string | - | 1.5.0 |
 | style | 样式 | CSSProperties | - | 0.34.0 |
+| id | id | html id string type | - | 2.3.0 |
+## Accessibility
+
+### ARIA
+
+-   Collapsible 具有 `id` props，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的 `aria-controls` 指明控制关系, 见下方使用示例。
+
+```jsx
+import Collapsible from './index';
+
+
+()=>{
+    const collapseId = 'myCollapsible';
+    const [visible,setVisible]=useState(false);
+    return <>
+        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>    
+        <Collapsible isOpen={visible} id={collapseId}>
+            <div>hide content</div>
+        </Collapsible>
+    </>
+}
+
+```
 
 ## FAQ
 

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown

content/show/empty/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Show
 title: Empty
 subTitle: Empty
@@ -192,6 +192,12 @@ import { IllustrationIdle, IllustrationIdleDark, IllustrationConstructionDark, I
 | style | Style name | CSSProperties |-|
 | title | Title **v>=1.0.0** | ReactNode |-|
 
+## Accessibility
+
+### ARIA
+
+- aria-hidden for Empty illustrations is true
+
 ## Design Token
 
 <DesignToken/>