Altinn / Altinn/app-frontend-react
tabindex="-1" set on main content makes screen readers read the entire page
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description of the bug
When main content is given tabindex="-1", screen readers treat the entire region as a focus target in browse mode. This causes all content in that area to be read on every page/step (e.g., when moving through a multi-step form).
### Steps To Reproduce
Steps To Reproduce
Open the form (example: “Godstransport med norske lastebiler (RA-0485)”).
Navigate to page 2 or later.
Turn on a screen reader (e.g., VoiceOver on macOS, Safari/Chrome).
Notice that the entire main content is read, not just the heading.
Inspect the DOM: the main (or main container) has tabindex="-1".
Repro rate: High (consistent whenever tabindex="-1" is applied to the main container).
### Additional Information
_No response_
Contributor guide
Research direction
Start by opening the “Godstransport med norske lastebiler (RA-0485)” form, navigating to page 2 or later, and inspecting the main or main container for tabindex="-1". Test with VoiceOver in Safari or Chrome and trace where that attribute is applied. Done means the screen reader reads the relevant heading rather than the entire main content on each page or step.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100