Altinn / Altinn/app-frontend-react
WCAG: Our repeating groups open inside a table and has a different structure
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
Accessibility testers has given us feedback that the way we are opening up the groups inside the repeating groups table, might be giving us accessibility issues and they are recomending using a dialog instead. If this is a breach it is most likely 1.3.1 Info and relationships.
### Additional Information
Note from Lasse: I think this is a good thing, we should view this as an opportunity to enhance the usability of our reapting groups. I think a dialog might be a clearer way or a better visual explanation to the user that they are populating a group. We should find some relevant inspiration (I think Vipps have something similar if i remember correctly) and run som user tests to see if this is a viable option.
### Tasks
- [ ] Should referencing to a repeating group also be handled with a modal? Disscussed in relation to this #1486
- [ ] Look into how it would look to change from our inline table solution to a modal/dialog version
- [ ] How will it work with groups in groups? Might be an issue with modal on top of modal.
- [ ] Find different examples from relevant apps and check that we are not breaking anything. (Might be a good idea to discuss this with Brreg as well)
### Acceptance Criterias
Relevant link: https://www.accessibility-developer-guide.com/examples/tables/layout-changes/
Contributor guide
Research direction
Start by reviewing the current repeating-groups table behavior and the related discussion in issue #1486. Research the linked WCAG table example and comparable dialog patterns, then assess references, nested groups, and potential modal-on-modal behavior. Done requires a decided, tested dialog approach that preserves existing functionality and addresses the accessibility concerns.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100