Altinn / Altinn/app-frontend-react
Research our onBlur validation with keyboard navigation and how it works with screen readers
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
We have gotten feedback that our validation messages can feel premature in some scenarios. This is mostly in cases where you use a keyboard to go trough the form. We should do some user research if there are anything we need to change about how we solve this today.
There are a lot of similar solutions that might have done research on this already. We should reach out to them, test and check how they have solved this issue.
We handle all components and situations the same today. It might be an idea to see if we should act differently on required fields. If you use a screen reader and just want to explore the form you will get an error for all the required fields onBlur. This will be anoying.
### In scope
- [ ] Research and reach out to other similar solution
- [ ] When are validation triggered? Is it the same on all components and form types (large and small pages)
- [ ] Are there a difference between how required fields and fields that the user has to fill out is triggered?
- [ ] How is it presented for screen readers?
- [ ] If relevant run user test with expert users or plan new user test after changes
- [ ] Are there anything we need to change about our validations?
- [ ] Create issues with specification
### Out of scope
This is a research issue, it should not handle the potensial fix
### Additional Information
_No response_
### Analysis
_No response_
### Conclusion
_No response_
Contributor guide
Research direction
No files or tests are named. Start by documenting how comparable solutions trigger validation and present required-field errors during keyboard navigation and screen-reader use, then assess the current behavior described in the issue. Done means recording the findings and creating follow-up issues with specifications for any needed validation changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100