adobe / adobe/aem-core-cif-components
[Accessibility] [Reset Password] The form field constraints/errors are not associated with their fields programmatically.
- Dominant language
- Java
- Stars
- 109
- Forks
- 78
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Description
**Steps to Reproduce**
1. Enable NVDA screen reader.
2. Open page in Google Chrome.
3. Activate the "Reset Password" button without inputting any information in form fields.
4. Navigate through form fields using TAB or TAB + SHIFT.
5. Notice that no error is announced when focusing fields.
**Current Behavior**
The field `input` elements make no reference to the constraints and error messages associated with them. Screen reader users are not informed that the inputs have errors when they navigate through the form.
**Expected behavior/code**
Authors should use an `aria-describedby` attribute on the `input` elements with an ID reference to the associated constraints/errors. Follow the best practices for [accessible form error identification](https://www.levelaccess.com/level-access-news/how-to-provide-accessible-error-identification/).
**Environment**
Chrome 92, Windows 10, NVDA 2020.4
AEM Core Components v. 2.17
**Affected Users**
Screen reader users
**WCAG SC**
1.3.1 Info and Relationships
Contributor guide
Research direction
Start at the Reset Password form and inspect the input elements, their constraints, and associated error messages. Verify the form with NVDA in Chrome after submitting it empty; done means each invalid field announces its constraint or error when focused.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100