a11y improvements for map

[adamhaeger]

Description

1. Attribution moved out of the map – The OpenStreetMap/Kartverket credit (with its links) is now rendered as a normal text line below the map (MapAttribution) instead of inside the Leaflet map. This stops it from being read as part of the map. The print/PDF view still shows the links with their full URLs.
2. The component's own label is announced first, followed by interaction instructions (e.g. "Min Kartkomponent. Interaktivt kart.
3. Norwegian zoom buttons – The zoom in/out buttons now use localized names ("Zoom inn" / "Zoom ut") via new text resources (nb/nn/en).
4. 6. Spoken selection feedback – The "Ingen lokasjon valgt" / "Valgt lokasjon: …" text is now a polite live region (role="status", aria-live="polite"), so picking or clearing a location is announced.
5. Visible focus + reflow – Added a visible keyboard focus indicator on the map.
6. Decorative tiles – Verified map tile images are exposed with empty alt.

Related Issue(s)

• closes #{19020}

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

• New Features

  • Added localized accessibility text for the map region, including an announcement area for location updates.
  • Improved map attribution rendering outside the map canvas and added localized zoom button labels.
  • When the map is set to read-only, zoom controls are no longer shown.

• Style

  • Constrained map layout sizing and improved attribution styling, including print-specific formatting.

• Tests

  • Expanded component and end-to-end accessibility checks, including localized labels, live region behavior, and WCAG validation.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d6fb261d-bb6c-4b59-8414-73e426cd67f3

📥 Commits

Reviewing files that changed from the base of the PR and between 3cee46b and 692fa02.

📒 Files selected for processing (1)

• src/layout/Map/features/singleMarker/MapSingleMarker.tsx

---

📝 Walkthrough

Walkthrough

Adds accessibility improvements to the Map component: ARIA region labeling via MapRegionA11y, localized zoom controls, external attribution rendering via MapAttribution, and ARIA live region on location text. Includes new i18n keys for three languages, CSS updates for focus and attribution styling, and expanded unit and Cypress tests.

Changes

Map Component Accessibility

Layer / File(s)	Summary
Map i18n keys src/language/texts/en.ts, src/language/texts/nb.ts, src/language/texts/nn.ts	Adds map_component.ariaLabel, map_component.zoomIn, and map_component.zoomOut translation entries across English, Norwegian Bokmål, and Norwegian Nynorsk.
MapRegionA11y accessibility helper src/layout/Map/features/a11y/MapRegionA11y.tsx	Introduces MapRegionA11y, a null-rendering component that uses useMap() and a useEffect to set role="group" and a localized aria-label on the Leaflet container element.
MarkerLocationText and MapSingleMarker ARIA src/layout/Map/features/singleMarker/MarkerLocationText.tsx, src/layout/Map/features/singleMarker/MapSingleMarker.tsx	MarkerLocationText gains role="status" and aria-live="polite" on the footer paragraph. MapSingleMarker adds a WCAG TODO comment for missing non-visual location input alternatives.
MapAttribution component and CSS src/layout/Map/features/attribution/MapAttribution.tsx, src/layout/Map/MapComponent.module.css	MapAttribution reads map layers from external state, deduplicates and cleans attribution strings, and renders them outside Leaflet. CSS adds .attribution typography/color/spacing, width constraints, focus styles on .map, and print-specific styling replacing Leaflet global selectors.
Map.tsx and MapComponent.tsx wiring src/layout/Map/Map.tsx, src/layout/Map/MapComponent.tsx	Map.tsx removes AttributionControl, adds MapRegionA11y, introduces useLanguage for localized zoom titles, disables default zoomControl, and conditionally renders ZoomControl when not readOnly. MapComponent.tsx renders MapAttribution below the map container.
Unit and E2E accessibility tests src/layout/Map/MapComponent.test.tsx, test/e2e/integration/component-library/map.ts	Localizes zoom button labels to Norwegian, adds tests for the localized region accessible name (with/without title prefix), verifies role="status" live region on location text, asserts empty alt on Leaflet tile images, and adds Cypress cy.testWcag() test on map page.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• olemartinorg

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% 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 summarizes the main objective of the pull request—improving accessibility of the Map component—and accurately reflects the primary changes across all modified files.
Description check	✅ Passed	The description covers all required template sections with substantive details: a comprehensive list of changes, a linked issue, and completed checkboxes confirming manual testing, automated tests, accessibility testing, and label application.
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/map-a11y-improvements

---

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]

🥇

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud