Add ARIA attributes to Inputs
See original GitHub issueIs your feature request related to a problem? Please describe. We want to be able to grab/access invalid input elements in the DOM and (automatically) scroll the input into view.
Describe the solution you’d like
Add aria-errormessage
and aria-invalid
attributes to input elements. Such that if inputs are invalid we have
aria-invalid="true"
otherwise aria-invalid="false"
Describe alternatives you’ve considered A previous approach was to look for element/class names which could easily break the implementation if either of those gets updated
Additional context This is in relation to this PR which is to automatically scroll to error fields when users submits an invalid form.
Issue Analytics
- State:
- Created 2 years ago
- Comments:10 (10 by maintainers)
Top Results From Across the Web
ARIA: input role - Accessibility - MDN Web Docs
ARIA : input role. The input abstract role is a generic type of widget that allows user input. Note: The input role is...
Read more >ARIA in HTML - W3C
This specification defines the authoring rules (author conformance requirements) for the use of Accessible Rich Internet Applications (WAI-ARIA) ...
Read more >aria-input-field-name - Accessibility Insights
An ARIA input field is a custom control that allows users to provide text input. ARIA input fields are identified by the following...
Read more >aria-label - examples and best practices - Aditus
interactive elements: such as a (when href attribute is present), audio and video (when controls attribute is present), input , select , button...
Read more >What the Heck is ARIA? A Beginner's Guide to ARIA ... - Lullabot
ARIA is a set of attributes you can add to HTML elements that define ways to make web content and applications accessible to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes sorry I wasn’t so clear.
The aria attributes will go to the input but also the error field message should have the correct identifier to be referenced by the
aria-errormessage
attribute.Thanks for the issue. Upon first glimpse I guess we could add aria labels based on the hasError prop. We however don’t seem to have a error message at hand in the component so we could allow forwarding it.