-
Notifications
You must be signed in to change notification settings - Fork 137
Feature: Compute FormControl ARIA attributes #284
Description
Is your feature request related to a problem? Please describe.
To improve DX while implementing forms. Defining ARIA attributes can be tedious and verbose, in most cases we can offload some of this work and handle internally.
Describe the solution you'd like
Chakra should compute the values of the aria-describedby
attribute on the form controls input element. This is applicable when using either the FormHelperText
or FormErrorMessage
components within a FormControl
.
Describe alternatives you've considered
The only other alternative I see is to define these attributes manually.
Additional context
A couple things to consider:
-
How do we determine what the form controls input element actually is?
- If this is a Chakra component we should be able to determine this pretty easily, if not..
- I would think these should always be focusable.. We can maybe utilize the utility function getFocusables and take the first focusable element it returns. This lends itself well to really simple controls containing just an element like input or select and would require zero additional configuration.
- Add a new property to the
FormControl
where we can specify aref
or query selector to determine what exactly the input control is. This scales well in the event that there are multiple focusable elements within the control, I'm thinking a "Show password" toggle in a login form. Regardless of the default functionality I think this option should be included.
-
If a user already defines the
aria-describedby
attribute on the input element, ignore this computation. If the user has defined ids on either the helper text or the error message, use those ids, otherwise compute a random identifier internally. If the form control has both helper text and error message, concatenate the ids into a string (separated by a space not a coma) to be used witharia-describedby
. -
Additionally, the
FormErrorMessage
may benefit from anaria-live="polite"
attribute so that it will update screen readers when the error changes. Maybe evenrole="alert"
but I'd have to ponder that further to determine if it makes sense in this case.