fix: make voiceover read org detailes#4264
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR adds ARIA live-region announcements to ChangesScreen reader announcements for organisation lookup
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/layout/Text/TextComponent.tsx (1)
35-45: ⚡ Quick winReconsider
role="group"for single element wrapper.The
divwrapper withrole="group"around a singleDisplayTextcomponent may be semantically inappropriate. The ARIAgrouprole is typically intended for grouping multiple interactive elements or related form controls, not wrapping a single text display element.Additionally, both the wrapper and the
DisplayTextcomponent reference the same label ID (getLabelId(id)), which could result in redundant screen reader announcements.If the group is required for the organisation lookup announcement flow, please consider:
- Documenting the specific accessibility requirement it addresses
- Verifying that the group doesn't create redundant announcements
- Evaluating whether a simpler semantic wrapper (e.g., plain
<div>without role) would suffice♻️ Consider removing the group wrapper if not essential
- <div - role='group' - aria-labelledby={getLabelId(id)} - > - <DisplayText - value={value} - iconUrl={icon} - iconAltText={langAsString(textResourceBindings.title)} - labelId={getLabelId(id)} - /> - </div> + <DisplayText + value={value} + iconUrl={icon} + iconAltText={langAsString(textResourceBindings.title)} + labelId={getLabelId(id)} + />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/layout/Text/TextComponent.tsx` around lines 35 - 45, The wrapper div currently uses role="group" and shares the same aria-labelledby as DisplayText (getLabelId(id)), which can cause redundant screen-reader announcements; remove the role="group" from the wrapper (or remove the wrapper entirely if not needed) and ensure only the element that should be labelled keeps aria-labelledby — update either the div or the DisplayText prop so only one element references getLabelId(id); if the group role is truly required, add a short inline comment documenting the specific accessibility need and verify no duplicate announcements occur.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/layout/OrganisationLookup/OrganisationLookupComponent.tsx`:
- Around line 96-128: The announceOrgDetails function is programmatically
focusing the ARIA live region (statusRef.current?.focus()) after updating
statusMessage; remove that focus call so the role="status"/aria-live="polite"
region can announce changes without moving user focus. Keep the
setStatusMessage('') and delayed setStatusMessage(parts.join(', ')) behavior,
but delete the statusRef.current?.focus() invocation. Optionally extract the
numeric 100 ms delay into a named constant (e.g., LIVE_REGION_RESET_DELAY_MS)
used in the window.setTimeout call for clarity.
---
Nitpick comments:
In `@src/layout/Text/TextComponent.tsx`:
- Around line 35-45: The wrapper div currently uses role="group" and shares the
same aria-labelledby as DisplayText (getLabelId(id)), which can cause redundant
screen-reader announcements; remove the role="group" from the wrapper (or remove
the wrapper entirely if not needed) and ensure only the element that should be
labelled keeps aria-labelledby — update either the div or the DisplayText prop
so only one element references getLabelId(id); if the group role is truly
required, add a short inline comment documenting the specific accessibility need
and verify no duplicate announcements occur.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c553b76b-83b9-48b4-802e-8c99379ed223
📒 Files selected for processing (2)
src/layout/OrganisationLookup/OrganisationLookupComponent.tsxsrc/layout/Text/TextComponent.tsx
JamalAlabdullah
added
kind/bug
JamalAlabdullah
added
the
squad/utforming
…tatusbeskjeder-aa---skjermleser-voiceover-does-not-read-found-organization-after-search-in-org-lookup-likely-same-in-person-lookup
There was a problem hiding this comment.
Did you try using aria-atomic= true and role=status in order to get the screenreader to announce the changed content? If that works, it might be a cleaner solution than creating our own announcer.
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22
…tatusbeskjeder-aa---skjermleser-voiceover-does-not-read-found-organization-after-search-in-org-lookup-likely-same-in-person-lookup
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/layout/Text/TextComponent.tsx`:
- Line 13: The TextComponent is not passing labelId to the DisplayText
component, which breaks the ARIA label association required for accessibility.
Compute labelId using useIndexedId and getLabelId (following the same pattern
used in other layout components like Likert and Option), and then pass this
labelId prop to the DisplayText component where it renders the value. This
ensures DisplayText can properly set the aria-labelledby attribute to establish
the programmatic relationship between the label element created by
ComponentStructureWrapper and the displayed text content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a4667b78-9cd9-4e0d-b48b-e17d907f1d35
📒 Files selected for processing (1)
src/layout/Text/TextComponent.tsx
…beskjeder-aa---skjermleser-voiceover-does-not-read-found-organization-after-search-in-org-lookup-likely-same-in-person-lookup
I tried |
|
JamalAlabdullah
deleted the
4114-wcag-brudd-413-statusbeskjeder-aa---skjermleser-voiceover-does-not-read-found-organization-after-search-in-org-lookup-likely-same-in-person-lookup
branch
github-project-automation
Bot
moved this from 🔎 In review
to ✅ Done
in Team Altinn Studio
|
✅ Automatic backport successful! A backport PR has been automatically created for the The release branch The cherry-pick was clean with no conflicts. Please review the backport PR when it appears. |
* fix: make voiceover read org detailes * fixed coderabbitai feedback * added test * fixed cypress test * voiceover read also error message * fixed test in organisationlookup.ts * feedback fixing * fixed test * test
2 participants
Description
In org lookup and after Hent opplysninger, VoiceOver now reads the org number and related details (name, address, etc.) in one message. It also reads the error message.
Screen.Recording.2026-06-12.at.13.28.37.mov
Related Issue(s)
Verification/QA
kind/*andbackport*label to this PR for proper release notes groupingSummary by CodeRabbit
Summary by CodeRabbit
Textrendering by removing an unused label-id pathway.