fix: Add accessible name to cancel signing dialog

[phlipsterit]

Description

Fixes accessibility issues with the "reject signing" confirmation modal so it works correctly with screen readers, addressing issue #4295.

Changes

• Accessible name for the dialog — Added aria-labelledby on the pointing to the heading, so the modal has a proper accessible name when opened.
• Focus management — The dialog title now receives focus on open (via an autofocus attribute set on render), so screen readers announce the modal heading. This approach is used instead of node.focus() because the native content stays mounted in the DOM while closed.
• Description association — Linked the heading to the description paragraph with aria-describedby so the supporting text is announced alongside the title.
• Button spacing — Wrapped the action buttons in a flex container (dialogButtonContainer) with consistent gap and wrapping for better layout. Used styling in DeletePopoverWarning as inspiration
• After discussion with @olavflar , we decided to also change the text a bit, and added an extra text entry for the close button

Illustration of changes to button layout.
Before :

After :

Related Issue(s)

• closes Dialog for å bekrefte at man avbryter signering har ikke navn for tilgjengelighet #4295

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

Summary of changes

• Improvements
  • Enhanced accessibility for the signing reject/cancel confirmation dialog with stable label/description IDs, improved screen reader support, and focus moved to the dialog title on open.
  • Updated modal close/continue button labeling to use dedicated “continue signing” wording.
  • Refreshed the dialog’s action button layout with improved flex spacing and wrapping.
  • Updated English, Norwegian Bokmål, and Nynorsk copy for the signing cancel/reject flow to reflect the outcome more clearly.

[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: 78179253-0264-4ad9-b2b9-650023b46a0c

📥 Commits

Reviewing files that changed from the base of the PR and between 2abb227 and ad8c6f1.

📒 Files selected for processing (3)

• src/language/texts/en.ts
• src/language/texts/nb.ts
• src/language/texts/nn.ts

✅ Files skipped from review due to trivial changes (1)

• src/language/texts/en.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• src/language/texts/nb.ts
• src/language/texts/nn.ts

---

📝 Walkthrough

Walkthrough

The reject confirmation dialog now has ARIA labeling and autofocus wiring, a flex button container class, a signing-specific close-button text resource, and updated modal copy in English, Norwegian Bokmål, and Nynorsk.

Changes

Reject Dialog Accessibility and Text Updates

Layer / File(s)	Summary
ARIA wiring and auto-focus for reject dialog src/layout/SigningActions/PanelSigning.tsx, src/layout/SigningActions/SigningActions.module.css	Imports useId, generates stable dialog and description IDs, wires aria-labelledby/aria-describedby, applies tabIndex={-1}, adds autofocus ref handling on the title, and adds a flex .dialogButtonContainer class with gap and wrapping.
Close button label and modal copy updates src/layout/SigningActions/PanelSigning.tsx, src/layout/SigningActions/config.ts, src/language/texts/en.ts, src/language/texts/nb.ts, src/language/texts/nn.ts	Switches the dialog close button to rejectModalCloseButton, registers that text resource, and updates the reject modal title, description, and button labels across all three language files.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

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 PR also changes modal layout and copy, which go beyond the accessible-name fix required by #4295.	Split or justify the button-spacing and text updates, and keep this PR focused on the accessibility fix for the dialog.
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.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 is concise and accurately summarizes the main accessibility change to the signing dialog.
Description check	✅ Passed	The description follows the template and includes the summary, related issue, and verification sections with concrete details.
Linked Issues check	✅ Passed	The changes address #4295 by giving the dialog an accessible name and announcing the heading and description for screen readers.

✨ 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/4295-cancel-signing-modal-a11y-name

---

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/SigningActions/PanelSigning.tsx`:
- Around line 103-112: The aria-describedby attribute is currently placed on the
Heading element when it should be on the Dialog container itself. Move the
aria-describedby={descId} prop from the Heading component (around line 111) to
the Dialog component (around line 103), and remove it from the Heading element.
This ensures screen readers correctly announce the dialog description as part of
the modal's accessible context rather than describing just the heading.

🪄 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: fd5a71c2-ca5b-4bdd-b100-efbb306c2a8f

📥 Commits

Reviewing files that changed from the base of the PR and between 34c39e6 and af30339.

📒 Files selected for processing (2)

• src/layout/SigningActions/PanelSigning.tsx
• src/layout/SigningActions/SigningActions.module.css

[JamalAlabdullah]

Tested and it works fine 👍 Need just to fix some tests

[sonarqubecloud]

Quality Gate failed

Failed conditions
5.6% Coverage on New Code (required ≥ 45%)
0.0% Condition Coverage on New Code (required ≥ 45%)

See analysis details on SonarQube Cloud

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