Altinn / Altinn/app-frontend-react

Research our onBlur validation with keyboard navigation and how it works with screen readers

Open
#238 1 comment 0 reactions 0 assignees View on GitHub
area/accessibility area/validation kind/analysis status/draft status/for-consideration
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.