You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.3 KiB
45 lines
1.3 KiB
# autocomplete-valid |
|
|
|
Ensure the autocomplete attribute is correct and suitable for the form field it is used with. |
|
|
|
## Rule details |
|
|
|
This rule takes one optional object argument of type object: |
|
|
|
``` |
|
{ |
|
"rules": { |
|
"jsx-a11y/autocomplete-valid": [ 2, { |
|
"inputComponents": ["Input", "FormField"] |
|
}], |
|
} |
|
} |
|
``` |
|
|
|
### Succeed |
|
```jsx |
|
<!-- Good: the autocomplete attribute is used according to the HTML specification --> |
|
<input type="text" autocomplete="name" /> |
|
|
|
<!-- Good: MyInput is not listed in inputComponents --> |
|
<MyInput autocomplete="incorrect" /> |
|
``` |
|
|
|
### Fail |
|
```jsx |
|
<!-- Bad: the autocomplete attribute has an invalid value --> |
|
<input type="text" autocomplete="incorrect" /> |
|
|
|
<!-- Bad: the autocomplete attribute is on an inappropriate input element --> |
|
<input type="email" autocomplete="url" /> |
|
|
|
<!-- Bad: MyInput is listed in inputComponents --> |
|
<MyInput autocomplete="incorrect" /> |
|
``` |
|
|
|
## Accessibility guidelines |
|
- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose) |
|
|
|
### Resources |
|
- [axe-core, autocomplete-valid](https://dequeuniversity.com/rules/axe/3.2/autocomplete-valid) |
|
- [HTML 5.2, Autocomplete requirements](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute)
|
|
|