InlineEdit
What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter | Opens edit mode (shows InlineInput) for entering a value. In edit mode, saves the entered data and returns to view mode. |
Esc | Returns from edit mode to view mode and discards any entered data that wasn't submitted. |
See detailed information about the keyboard support for the input fileds in the Keyboard control guide.
Considerations for developers
- Use labels for every input and make the
for=""andid=""values match. IDs must be unique on each page, only one label can be associated to each unique form element. Keep it simple: not all browsers correctly expose multiple labels that are linked to the same form element. Refer to our examples. - Fields with error validation should have
aria-describedbyto insure that the associated field level error message is read by assistive technology. If the error message has anid="my-error-message", then the input should havearia-describedby="my-error-message".
Considerations for designers
Avoid hiding the input label on focus.
Resources
A11y style guide describes core principles for the accessible inputs and textarea.
Other recommendations
Find more accessibility recommendations in the common Accessibility guide.