فهرست منبع

docs: add checkbox keyboard focus description

zhangyumei.0319 3 سال پیش
والد
کامیت
ba2d34a2dd
2فایلهای تغییر یافته به همراه12 افزوده شده و 0 حذف شده
  1. 6 0
      content/input/checkbox/index-en-US.md
  2. 6 0
      content/input/checkbox/index.md

+ 6 - 0
content/input/checkbox/index-en-US.md

@@ -442,6 +442,12 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 - `aria-disabled` indicates the current disabled state, which is consistent with the value of the `disabled` prop
 - `aria-checked` indicates the current checked state
 
+### Keyboard and focus
+- Checkbox can be focused, keyboard users can use Tab and Shift + Tab to switch focus.
+- The Checkbox that gets the focus can switch the selected and unselected states through Space.
+- The click area of ​​Checkbox is larger than the box itself and contains the text behind the box; for checkboxes with auxiliary text, the auxiliary text is also included in the click area.
+- Disabled Checkbox is not focusable.
+
 ## Design Tokens
 <DesignToken/>
 

+ 6 - 0
content/input/checkbox/index.md

@@ -424,6 +424,12 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 - `aria-disabled` 表示当前的禁用状态,与 `disabled` prop 的值保持一致
 - `aria-checked` 表示当前的选中状态
 
+### 键盘和焦点
+- Checkbox 可被获取焦点,键盘用户可以使用 Tab 及 Shift  + Tab 切换焦点。
+- 当前获取的焦点为 Checkbox 时,可以通过 Space 切换选中和未选状态。
+- Checkbox 的点击区域大于框本身,包含了框后的文案;带辅助文本的 checkbox,辅助文本也包含在点击区域内。
+- 禁用的 Checkbox 不可获取焦点。
+
 ## 设计变量
 <DesignToken/>