UU: set focus to hidden element above skiplink on navigation

[mgunnerud]

Description

• Set focus to a new element above the skiplink on navigation. The content of the new element is set to the page title, so the new page title is set when navigating

Related Issue(s)

• Håndtere fokus når man bytter side (i samtlige flyter) altinn-authorization-tmp#2938

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)
• All tests run green

Documentation

• User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)

Summary by CodeRabbit

• New Features
  • Improved navigation accessibility: automatic focus management on route changes, announces page title to assistive tech, and adds a visually-hidden focus target for screen readers.
• Chores
  • Standardized skip-link target to #main-content for consistent behavior.
  • Removed an unnecessary base href entry from the HTML head to simplify routing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3b9a5cf0-f174-4e40-bed0-69874a3ed528

📥 Commits

Reviewing files that changed from the base of the PR and between 3d2fc32 and c1fc8ae.

📒 Files selected for processing (1)

• src/features/amUI/common/PageLayoutWrapper/PageLayoutWrapper.tsx

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

• src/features/amUI/common/PageLayoutWrapper/PageLayoutWrapper.tsx

---

📝 Walkthrough

Walkthrough

Adds a NavigationFocus component and .srOnly CSS utility, integrates NavigationFocus into PageLayoutWrapper (sets skipLink to #main-content), and removes the <base> tag from Index.cshtml.

Changes

Navigation Focus for Accessibility

Layer / File(s)	Summary
NavigationFocus component and styling src/features/amUI/common/PageLayoutWrapper/NavigationFocus.module.css, src/features/amUI/common/PageLayoutWrapper/NavigationFocus.tsx	Adds .srOnly utility and NavigationFocus which reads document.title on route change, renders a visually-hidden focusable div with tabIndex={-1}, and focuses it via requestAnimationFrame (preventing scroll).
Integration into PageLayoutWrapper src/features/amUI/common/PageLayoutWrapper/PageLayoutWrapper.tsx	Imports and renders <NavigationFocus /> before Layout in the RootProvider tree, removes previous useLocation-based skipLink construction, and changes Layout skipLink href to the constant #main-content.

Server HTML

Layer / File(s)	Summary
Remove <base> tag backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI/Views/Home/Index.cshtml	Deletes the <base href="~/accessmanagement/ui/"/> element from the document head, altering relative URL resolution base.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• sonwit
• allinox

Poem

A little offscreen light so sly,
Reads the title as pages fly.
It takes a breath, then points the way,
So screen readers find the day.
Quiet help that says “look here.”

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding focus management to a hidden element above the skiplink during navigation, which is the core functionality introduced across the modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ 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/2938-handtere-fokus-nar-man-bytter-side-i-samtlige-flyter-2

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: one or more packages not found in the registry.

---

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

[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/features/amUI/common/PageLayoutWrapper/NavigationFocus.tsx`:
- Line 7: The ref declaration uses an unsafe React.RefObject cast causing a
compile error; update the skipRef definition in NavigationFocus.tsx to type it
directly for a div by changing the useRef type to useRef<HTMLDivElement |
null>(null) (i.e., remove the React.RefObject cast and replace with
HTMLDivElement | null) so skipRef and its usages remain correctly typed without
importing the React namespace.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 82383d16-2725-4a54-8cb4-d835dce089b7

📥 Commits

Reviewing files that changed from the base of the PR and between 3b32984 and 3f69cef.

📒 Files selected for processing (3)

• src/features/amUI/common/PageLayoutWrapper/NavigationFocus.module.css
• src/features/amUI/common/PageLayoutWrapper/NavigationFocus.tsx
• src/features/amUI/common/PageLayoutWrapper/PageLayoutWrapper.tsx

[coderabbitai]

Actionable comments posted: 0

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[allinox]

I finally got around to testing this, and now it works like a charm! 😄
Great work finding a fix to what turned out to be quite a tricky problem - approved! ✅