Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Sep 20, 2024. It is now read-only.
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Feature: Compute FormControl ARIA attributes #284

Open
@dombavetta

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 a ref 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 with aria-describedby.

  • Additionally, the FormErrorMessage may benefit from an aria-live="polite" attribute so that it will update screen readers when the error changes. Maybe even role="alert" but I'd have to ponder that further to determine if it makes sense in this case.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /