fix: make voiceover read title and description out of the table

[JamalAlabdullah]

Description

It can be tested in : aarsregnskap-vanlig-202406
After:

AfterFix.mov

• closes WCAG-brudd: 4.1.3 Statusbeskjeder (AA):voiceover reads title og desc as a part of grid in SignneListComponent #4309

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* and backport* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

• Bug Fixes

  • Improved the signee list display so the title, help text, and description now appear more clearly above the table.
  • Updated accessibility labels and table identifiers to better match what users see on screen.
  • Refined party-selection behavior in a failed instantiation flow to better reflect the actual retry path.

• Tests

  • Updated end-to-end and component tests to align with the new signee list and signing UI structure.

[coderabbitai]

📝 Walkthrough

Walkthrough

SigneeListComponent now renders a custom caption block with heading, help text, and description, and labels the table with ariaLabel and tableTestId. Related unit and Cypress tests were updated to match the new accessible structure and revised party-mocking behavior.

Changes

SigneeList accessibility and test updates

Layer / File(s)	Summary
Component caption and labeling src/layout/SigneeList/SigneeListComponent.tsx	Imports update to use Heading, Description, HelpTextContainer, Caption.module.css, and useIndexedId. The component now renders a conditional custom caption block above AppTable and passes ariaLabel and tableTestId instead of caption.
SigneeList test assertions src/layout/SigneeList/SigneeListComponent.test.tsx	Adds a Jest mock for useIndexedId, switches tests to baseComponentId='signee-list', and updates assertions for heading, description, caption absence, and the table’s aria-label.
Cypress selector and mock changes test/e2e/integration/frontend-test/party-selection.ts, test/e2e/integration/signering-brukerstyrt/signing.ts	Updates the party-selection mock flow to use removeAllButOneOrg and a single failing instantiation intercept, and splits signer-area checks into separate heading, description, and table assertions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Altinn/app-frontend-react#4235: Modifies the same party-selection Cypress flow and party-mocking setup.
• Altinn/app-frontend-react#4288: Refactors another AppTable-based list component to use inline title/description rendering and table labeling changes.

Suggested labels

area/accessibility

Suggested reviewers

• walldenfilippa
• lassopicasso
• olavflar

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The party-selection Cypress changes appear unrelated to the SigneeList VoiceOver accessibility fix.	Remove or justify the party-selection test changes, or split them into a separate PR if they address a different issue.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing VoiceOver/table accessibility in SigneeList.
Description check	✅ Passed	The description includes the change summary, linked issue, and QA template sections, though it is sparse.
Linked Issues check	✅ Passed	The SigneeList caption and aria-label changes directly address the VoiceOver/title-description accessibility issue in #4309.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 4309-voiceover-reads-title-og-desc-as-a-part-of-grid-in-signnelistcomponent

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 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/SigneeList/SigneeListComponent.test.tsx`:
- Around line 110-115: The SigneeListComponent test currently verifies the
heading, description text, and aria-label, but it does not confirm the table is
semantically associated with the description for assistive tech. Update the
assertions in SigneeListComponent.test.tsx around the Signee List checks to
verify the table element rendered by the SigneeList component has an
aria-describedby that points to the description element’s id, using the existing
table/description queries and the signee-list test id as anchors. Also apply the
same linkage assertion in the other affected test block referenced by the
comment.

In `@src/layout/SigneeList/SigneeListComponent.tsx`:
- Around line 51-56: The table in SigneeListComponent only has an aria-label, so
the rendered Description is not exposed as context to assistive tech. Update the
Description/AppTable wiring by giving the Description a stable id and passing
that id into AppTable via aria-describedby (alongside the existing aria-label)
so the description is announced for the table.

🪄 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: 2166f404-24f6-42d0-9345-7d337cc1f6b6

📥 Commits

Reviewing files that changed from the base of the PR and between 6aeaea7 and 65c3ad4.

📒 Files selected for processing (2)

• src/layout/SigneeList/SigneeListComponent.test.tsx
• src/layout/SigneeList/SigneeListComponent.tsx

[coderabbitai]

🧹 Nitpick comments (1)

test/e2e/integration/signering-brukerstyrt/signing.ts (1)

91-93: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

The split into heading/description/table assertions matches the new component structure (separate Heading, Description, and AppTable with ariaLabel from the title). The two blocks are identical; consider extracting a small helper to avoid drift if the labels change later.

Also applies to: 125-127

🤖 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 `@test/e2e/integration/signering-brukerstyrt/signing.ts` around lines 91 - 93,
The repeated heading/description/table assertions in signing.ts are duplicated
in multiple places and should be centralized to avoid future drift. Extract the
shared checks into a small helper that verifies the title-based `Heading`,
`Description`, and `AppTable` `ariaLabel` together, then reuse it at both
assertion sites so label changes only need to be updated once.

🤖 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.

Nitpick comments:
In `@test/e2e/integration/signering-brukerstyrt/signing.ts`:
- Around line 91-93: The repeated heading/description/table assertions in
signing.ts are duplicated in multiple places and should be centralized to avoid
future drift. Extract the shared checks into a small helper that verifies the
title-based `Heading`, `Description`, and `AppTable` `ariaLabel` together, then
reuse it at both assertion sites so label changes only need to be updated once.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3b9fc1c8-691b-4cee-b0c0-c7975d9cbae3

📥 Commits

Reviewing files that changed from the base of the PR and between 65c3ad4 and de64f2c.

📒 Files selected for processing (2)

• test/e2e/integration/frontend-test/party-selection.ts
• test/e2e/integration/signering-brukerstyrt/signing.ts

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud