Merge branch 'feat/a11y-aria' of https://github.com/DouyinFE/semi-design into feat/a11y-aria

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

@@ -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

@@ -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/feedback/progress/index-en-US.md

@@ -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

@@ -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/input/button/index-en-US.md

@@ -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

@@ -447,7 +447,7 @@ function SplitButtonDemo(){
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - `aria-label` 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
 - `aria-disabled` 与 disabled 属性同步，表示按钮禁用 

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

@@ -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

@@ -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/radio/index-en-US.md

@@ -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

@@ -317,7 +317,7 @@ class App extends React.Component {
 
 - 卡片式、按钮式 Radio 组可以通过箭头切换选中
 
-### Aria
+### ARIA
 
 - `aria-label`：用于解释 Radio 或 RadioGroup 的作用
 - `aria-labelledby` 默认指向 addon 节点，用于解释 Radio 的内容

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

@@ -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

@@ -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

@@ -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

@@ -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/treeselect/index-en-US.md

@@ -1261,7 +1261,7 @@ For custom rendering of input box.
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - 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;

content/input/treeselect/index.md

@@ -1242,7 +1242,7 @@ function Demo() {
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - TreeSelect 会自动设置 `aria-label` 为 'TreeSelect'，也支持用户自行设置 `aria-label` 来表示该 TreeSelect 作用;
 - TreeSelect 允许用户设置 `aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required`，另外，Form 会为 Form.TreeSelect 自动设置这些属性;

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

@@ -1897,7 +1897,7 @@ 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;

content/navigation/tree/index.md

@@ -1914,7 +1914,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - Tree 支持传入 `aria-label` 来表示该 Tree 作用;
 - Tree 会自动为每个子节点分别设置 `aria-disabled`、`aria-checked`、`aria-selected`、`aria-level` 来表明节点状态及层级;

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

@@ -191,7 +191,7 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 ## Accessibility
 
-### Aria
+### 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.
 

content/show/collapsible/index.md

@@ -221,7 +221,7 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 | id | id | html id string type | - | 2.3.0 |
 ## Accessibility
 
-### Aria
+### ARIA
 
 -   Collapsible 具有 `id` props，传入的值会被设置为 wrapper 元素的id, 可以配合其他组件的 `aria-controls` 指明控制关系, 见下方使用示例。
 

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

@@ -300,7 +300,7 @@ class Demo extends React.Component {
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - SideSheet has a `dialog` role to indicate that it is a pop-up component, and the internal header has a `heading` role to indicate that it is a header.
 - SideSheet content title body footer has label to indicate the role of the element.

content/show/sidesheet/index.md

@@ -299,7 +299,7 @@ class Demo extends React.Component {
 
 ## Accessibility
 
-### Aria
+### ARIA
 
 - SideSheet 具有 `dialog` role 来表示它是一个弹窗组件， 内部 header 具有 `heading` role 表明是 header。
 - SideSheet content title body footer 均具有 label 来表明元素作用。