fix: Enable voice over for important messages and changes in heading for signing component

[phlipsterit]

Description

Ensure that screen readers read error messages and changes in the headers of the signing component

• Created new component LiveValidattonMessage. It wraps ValidationMessage, but ensure that its announced when it becomes visible
• Create new component ElementFocusProvider. This lets the caller active logic witch sets focus (and thus announcement by screen reader) on a specific component when it is rendered into the application for the first time. It has to be activated bases on a user action, so the specified component does not get focus when the page initially renders.
• Added som more area-describedby to connect error the the input with the error
• This PR does not fix the last point in the connected issue, "Får heller ikke lest opp noe bekreftelse at man har avbrutt". When the user cancels, the app navigates back to the first task, and I think this is similar to how other page navigations in the app works. If we should fix this, I think we either need to change how page transitions announces changes, or we need a toast to notify the user that cancel is complete?

Related Issue(s)

• closes WCAG-brudd: 4.1.3 Statusbeskjeder (AA) - Skjermleser: SigningActions #4274

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

[coderabbitai]

Warning

Review limit reached

@phlipsterit, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 39 minutes and 29 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 45d92f60-4888-45b3-8241-e9b90b9ebb38

📥 Commits

Reviewing files that changed from the base of the PR and between 7efe316 and c0a7417.

📒 Files selected for processing (9)

• src/app-components/Label/Fieldset.tsx
• src/app-components/ValidationMessage/LiveValidationMessage.test.tsx
• src/app-components/ValidationMessage/LiveValidationMessage.tsx
• src/core/contexts/ElementFocusProvider.test.tsx
• src/core/contexts/ElementFocusProvider.tsx
• src/layout/SigningActions/OnBehalfOfChooser.tsx
• src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
• src/layout/SigningActions/PanelSigning.tsx
• src/layout/SigningActions/SigningActionsComponent.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/4274-voide-over-signing-messages

---

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

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[phlipsterit]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.31.2-pr.5561.4274-voide-over-signing-messages.c0a7417c/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.31.2-pr.5561.4274-voide-over-signing-messages.c0a7417c/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[adamhaeger]

Looks good!