Browse Source

docs: [Tree/TreeSelect] modify description for a11y aria

chenyuling 3 years ago
parent
commit
87952ec96f

+ 11 - 2
content/input/treeselect/index-en-US.md

@@ -1263,8 +1263,17 @@ For custom rendering of input box.
 
 
 ### 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
 ## Design Tokens
 <DesignToken/>
 <DesignToken/>

+ 16 - 7
content/input/treeselect/index.md

@@ -1236,17 +1236,26 @@ function Demo() {
 | isLeaf| 是否为叶子节点 | boolean |-|
 | isLeaf| 是否为叶子节点 | boolean |-|
 
 
 
 
+### Method
+- search(sugInput: string)
+如果需要自定义搜索框可以使用该方法。
+
 ## Accessibility
 ## 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/>

+ 9 - 2
content/navigation/tree/index-en-US.md

@@ -1901,8 +1901,15 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 
 
 - Tree supports passing in `aria-label` to indicate the role of the Tree;
 - 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 `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
 ## Design Tokens
 <DesignToken/>
 <DesignToken/>

+ 13 - 6
content/navigation/tree/index.md

@@ -1909,17 +1909,24 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | itemSize | 每行的treeNode的高度,必传 | number | - |
 | itemSize | 每行的treeNode的高度,必传 | number | - |
 | width | 宽度值 | number\|string | '100%' |
 | width | 宽度值 | number\|string | '100%' |
 
 
+### Ref 方法
+- search(sugInput) => void
+
 ## Accessibility
 ## Accessibility
 
 
 ### Aria
 ### Aria
 
 
 - Tree 支持传入 `aria-label` 来表示该 Tree 作用;
 - 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/>
 <DesignToken/>
-
-### Ref 方法
-- search(sugInput) => void