Fix/wcag issues on singing list and signee list

[Magnusrm]

Description

fixes overflowing content in the tables for SigneeList and SigningDocumentList when using 400% zoom.

Related Issue(s)

• closes WCAG brudd: 1.4.10 Dynamisk tilpasning (Reflow) (AA): SigningDocumentList altinn-studio#18952
• closes WCAG brudd: 1.4.10 Dynamisk tilpasning (Reflow) (AA): SigneeList #4277

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

• Style
  • Table cells now wrap long content to prevent overflow and improve readability
  • State tag width constraints improved for better layout control
  • Download link spacing and vertical alignment refined for better visual consistency

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fc1d7953-c1a9-407b-8c76-c315911eac44

📥 Commits

Reviewing files that changed from the base of the PR and between ad2d9b4 and 9c48e5e.

📒 Files selected for processing (2)

• src/app-components/Table/Table.module.css
• src/layout/SigningDocumentList/SigningDocumentListComponent.module.css

💤 Files with no reviewable changes (1)

• src/app-components/Table/Table.module.css

---

📝 Walkthrough

Walkthrough

Four CSS-only changes address WCAG 1.4.10 reflow accessibility: overflow-wrap: break-word is added to shared table body and header cells; a new .stateTag CSS module class with max-width: 100% is created and applied to the Tag component in SigneeStateTag; and .downloadLink in SigningDocumentListComponent switches to a CSS variable gap and adds align-items: center, removing white-space: nowrap.

Changes

CSS Reflow Accessibility Fixes

Layer / File(s)	Summary
Table cell overflow-wrap src/app-components/Table/Table.module.css	Adds overflow-wrap: break-word to .table tr td and .table tr th so long cell content wraps instead of overflowing.
SigneeList state tag constraint and SigningDocumentList download link alignment src/layout/SigneeList/SigningStateTag.module.css, src/layout/SigneeList/SigneeStateTag.tsx, src/layout/SigningDocumentList/SigningDocumentListComponent.module.css	Creates .stateTag with max-width: 100% and applies it to Tag via className; updates .downloadLink to use var(--ds-size-1) gap and align-items: center, removing white-space: nowrap.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

• #18952 (WCAG brudd: 1.4.10 Dynamisk tilpasning — SigningDocumentList): The .downloadLink flex alignment changes directly address the reflow accessibility issue identified for SigningDocumentList.
• #4277 (WCAG brudd: 1.4.10 Dynamisk tilpasning — SigneeList): The .stateTag max-width: 100% constraint and table cell overflow-wrap changes address the reflow issue identified for SigneeList.

Possibly related PRs

• Altinn/app-frontend-react#4288: Directly works on SigningDocumentListComponent and the downloadLink class, making it the immediate predecessor to the .downloadLink flex alignment update in this PR.

Suggested labels

squad/utforming

Suggested reviewers

• walldenfilippa
• lassopicasso
• olavflar

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: fixing WCAG accessibility issues on the signing list and signee list components.
Description check	✅ Passed	The description comprehensively covers the issue, provides linked issue references, and documents verification/QA with appropriate checkboxes marked for CSS-only changes requiring manual and WCAG testing.
Linked Issues check	✅ Passed	The PR addresses both linked WCAG 1.4.10 Reflow violations through CSS layout fixes to prevent content overflow at 400% zoom in SigneeList and SigningDocumentList components.
Out of Scope Changes check	✅ Passed	All changes are scoped to CSS modifications addressing the identified WCAG reflow issues; no unrelated functionality or logic changes are present in the PR.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/wcag-issues-on-singing-list-and-signee-list

---

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: 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/SigningDocumentList/SigningDocumentListComponent.tsx`:
- Line 86: The downloadButton class used in SigningDocumentListComponent is
currently being imported from the wrong CSS module
(SigneeListComponent.module.css). Create a new dedicated CSS module file at
src/layout/SigningDocumentList/SigningDocumentListComponent.module.css and move
the downloadButton class definition there from the SigneeList module. Then
update the import statement in SigningDocumentListComponent.tsx (currently
importing from SigneeListComponent.module.css) to import from the new
SigningDocumentListComponent.module.css file to properly scope the CSS and
remove the undocumented coupling between components.

🪄 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: ea438631-519f-41e0-afac-bb7e77c72f95

📥 Commits

Reviewing files that changed from the base of the PR and between 7d8e4d1 and ad2d9b4.

📒 Files selected for processing (5)

• src/app-components/Table/Table.module.css
• src/layout/SigneeList/SigneeListComponent.module.css
• src/layout/SigneeList/SigneeStateTag.tsx
• src/layout/SigneeList/SigningStateTag.module.css
• src/layout/SigningDocumentList/SigningDocumentListComponent.tsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[phlipsterit]

Nice :)

[github-actions]

✅ Automatic backport successful!

A backport PR has been automatically created for the release/v4.32 release branch.

The release branch release/v4.32 already existed and was updated.

The cherry-pick was clean with no conflicts. Please review the backport PR when it appears.