Fix/grid label disappearing on 400 percent

[adamhaeger]

Description

On narrow viewports and at high browser zoom (e.g. 400%, which Altinn treats as "mobile"), the Grid component collapses its table into a stacked layout.

Previously this hid the header labels:

Now:

The stacked layout dropped all read-only text columns — so for a typical "Label / Answer" grid, the requirement text disappeared entirely.

This change reworks the Grid's mobile layout so each row keeps its context:

• The column title (e.g. "Krav") is rendered as a label and the row's read-only text (e.g. "Setter brukeren i sentrum…") as its value, using a description list (<dl>/<dt>/<dd>) for a correct, programmatic name/value relationship.
• Input fields keep their own real <label>

Related Issue(s)

• closes #{issue number}

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
  • I want someone to help me perform accessibility testing
  • No testing done/necessary (no DOM/visual changes)
• 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

Release Notes

• New Features

  • Enhanced the Grid mobile layout to render read-only cell details in a stacked definition-list style with clearer label/value separation and improved spacing.
  • Improved per-row accessibility semantics for screen readers by grouping related details consistently.

• Tests

  • Expanded mobile unit tests to verify mobile-specific markup, omission rules, and visibility behavior.
  • Added a Cypress e2e test confirming the correct mobile rendering and accessibility associations.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Grid component's mobile rendering is replaced with accessible semantic HTML: <dl>/<dt>/<dd> structures carry column-title/value relationships, and role="group" with aria-labelledby associates read-only context with input cells. useHiddenInRows is exported, four mobile CSS classes are added, and unit plus Cypress e2e tests validate the new behavior.

Changes

Grid Mobile Accessibility Rewrite

Layer / File(s)	Summary
Exported hook and CSS contracts src/layout/Grid/tools.ts, src/layout/Grid/Grid.module.css	useHiddenInRows is exported and four new CSS selectors (.mobileRow, .mobileCell, .mobileCellLabel, .mobileCellText) are introduced as the shared foundation for mobile rendering.
MobileGrid and MobileGridRow implementation src/layout/Grid/GridComponent.tsx	Imports extended with useId, Label, cell/row-visibility helpers, and typedBoolean. RenderGrid passes hiddenColumnIndices to MobileGrid. MobileGrid is rewritten to compute rowsToRender with nearest preceding header context. MobileGridRow filters visible cells, builds dt/dd context items, and conditionally wraps component cells in role="group" with aria-labelledby. Supporting helpers MobileReadOnlyCell, ColumnTitleLabel, MobileTextCell, and MobileLabelFromCell are added.
Unit and e2e tests src/layout/Grid/GridComponent.test.tsx, test/e2e/integration/component-library/grid.ts	A describe('mobile layout') suite covers: no desktop table rendered, dt/dd semantics, role="group" aria associations, no standalone header rows, no category label without header, and hidden-row omission. A Cypress e2e test at samsung-s10 viewport verifies table collapse, visible category texts, and accessible group/textbox association.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

• 1.3.1 – Informasjon og relasjoner (Nivå A): Accessability enhancement for Grid component #4118: The rewrite directly implements the WCAG 1.3.1 fix described in this issue by replacing mobile Grid rendering with <dl>/<dt>/<dd> and role="group" + aria-labelledby to preserve information relationships without altering desktop DOM structure.

Suggested labels

area/accessibility

Suggested reviewers

• Magnusrm

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 38.46% 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 describes a specific mobile/zoom issue with the Grid component's label visibility, which aligns with the main change of reworking the mobile layout to display labels correctly.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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 fix/grid-label-disappearing-on-400-percent

---

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 and usage tips.}

[olemartinorg]

Adding my comment here, as I think this change would break things for some apps:
Altinn/altinn-studio#18943 (comment)

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud