Browse Source

docs: add a11y docs about switch and banner (#820)

YannLynn 3 năm trước cách đây
mục cha
commit
f800e87c4e

+ 2 - 0
content/feedback/banner/index-en-US.md

@@ -191,5 +191,7 @@ import { Banner } from '@douyinfe/semi-ui';
 - The component has a `role` of 'alert'.
 - The close icon has a `aria-label` of 'Close'.
 
+### Keyboard and Focus
+- The close button of the Banner can be focused with the `Tab` key. After the button is focused, hit the `Enter` key or the `Space` key to close the banner.
 ## Design Tokens
 <DesignToken/>

+ 5 - 0
content/feedback/banner/index.md

@@ -190,5 +190,10 @@ import { Banner } from '@douyinfe/semi-ui';
 - 组件的 `role` 为 'alert'
 - 关闭按钮的 `aria-label` 为 'Close'
 
+### 键盘和焦点
+
+- Banner 的关闭按钮可以使用 `Tab` 键聚焦,按钮聚焦后,敲击 `Enter` 键或 `Space` 键可以关闭 banner
+
+
 ## 设计变量
 <DesignToken/>

+ 4 - 0
content/input/switch/index-en-US.md

@@ -197,6 +197,10 @@ import { Switch } from '@douyinfe/semi-ui';
 - 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.
+
+### Keyboard and Focus
+- Keyboard users can use `Tab` and `Shift + Tab` to switch focus.
+- When focusing, you can switch on or off by pressing the `Space` key.
 ## Design Tokens
 
 <DesignToken/>

+ 8 - 3
content/input/switch/index.md

@@ -191,9 +191,14 @@ import { Switch } from '@douyinfe/semi-ui';
 
 ### ARIA
 
--   Switch 具有 `switch` role,当 checked 为 true 时,`aria-checked` 将被自动设置为 true,反之亦然.
--   作为表单控件应该带有 Label,当你使用 Form.Switch 时会自动被带上。
--   如果你单独使用 Switch,建议使用 `aria-label` 描述当前标签作用。
+-   Switch 具有 `switch` role,当 checked 为 true 时,`aria-checked` 将被自动设置为 true,反之亦然
+-   作为表单控件应该带有 Label,当你使用 Form.Switch 时会自动被带上
+-   如果你单独使用 Switch,建议使用 `aria-label` 描述当前标签作用
+
+### 键盘和焦点
+
+-   键盘用户可以使用 `Tab` 及 `Shift + Tab` 切换焦点
+-   聚焦时可以通过 `Space` 键切换开启或关闭状态
 
 ## 设计变量