瀏覽代碼

docs: update form a11y docs

pointhalo 3 年之前
父節點
當前提交
837b5d2de3
共有 2 個文件被更改,包括 16 次插入2 次删除
  1. 16 1
      content/input/form/index-en-US.md
  2. 0 1
      content/input/form/index.md

+ 16 - 1
content/input/form/index-en-US.md

@@ -1813,7 +1813,22 @@ const { ErrorMessage } = Form;
 | onKeyChangeFnName | The callback function when the component value changes, generally 'onChange'                                                                                                                                                                                                                                                                                                | 'onChange' |
 | valuePath         | The path of the value attribute to the first parameter in the callback function, such as Radio's onChange (e.target. checked), then the value needs to be set to target .checked; Radio Group's onChange (e.target. value), which is' target .value '; if the first parameter is the value itself, there is no need to take the value down, the item does not need to be set |            |
 | withCursor        | Do you need to maintain a cursor for Input class components                                                                                                                                                                                                                                                                                                                 | false      |
-| shouldMemo        | Do you need memo (for form performance optimization to avoid Field being rerender when Formrerender), for custom components with internal states that may update and affect the UI, this item should be set false                                                 | true       |
+
+## Accessibility
+
+### ARIA
+
+- [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)、for
+  - Field component will automatically add label DOM. The for attribute of label is the same as `props.id` or `props.name` or `props.field`; the `id` attribute of label is determined by `props.id` or `props.name` or `props.field`, and the value format is `${props.field}-label`;
+  - When the props.labelPosition of the Form or Field is set to `inset`, there is no label tag at this time, but a div tag. The div tag corresponding to insetLabel will be automatically appended with `id`, the value is the same as the id of the above label, corresponding to the `aria-labelledby` of the Field component
+  - The Field component will be automatically appended with `aria-labelledby`, the value is the same as the id of the above label
+- [aria-required](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute)
+  - When the Field is configured with required fields (that is, props.rules contains require: true or props.label is configured with required: true), the Field component will be automatically appended with `aria-required = true` (except Form.Switch, Form.CheckboxGroup)
+- [aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) 、[aria-errormessage](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage) 
+  - When the Field check fails, the Field component will be automatically added with the `aria-invalid` = true attribute, except for Form.CheckboxGroup.
+  - When the Field check fails, the Field component will be automatically appended with the `aria-errormessage` attribute, the value of which is the id of the DOM element corresponding to the errorMessage (format like: `${props.field}-errormessage`), except for Form.CheckboxGroup.
+- [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
+  - When the Field is configured with `helpText` or `extraText`, the Field component will be automatically added with the `aria-describedby` attribute, whose value is the id of the DOM element corresponding to helpText and extraText (format like: `${props.field}-helpText` , `${props.field}-extraText`)
 
 ## Design Tokens
 

+ 0 - 1
content/input/form/index.md

@@ -2077,7 +2077,6 @@ const { ErrorMessage } = Form;
 | onKeyChangeFnName | 组件值变化时的回调函数,一般为'onChange'                                                                                                                                                                                                      | 'onChange' |
 | valuePath         | 值属性在回调函数中第一个参数的路径,如 Radio 的 onChange(e.target.checked),那么该值需要设为 target.checkd;RadioGroup 的 onChange(e.target.value),该值为'target.value';若第一个参数就是值本身,无需再往下取值,该项不需要设                 |            |
 | maintainCursor    | 是否需要保持光标,用于 Input 类组件                                                                                                                                                                                                           | false      |
-| shouldMemo        | 是否需要 memo(用于表单性能优化,避免 Form rerender 时 Field 也被 rerender),对于有内部状态且内部状态可能会更新并影响 UI 的自定义组件,此项应该置为 false <br/>**v0.27.0 后提供** | true       |
 
 
 ## Accessibility