IS-11140: QR code links support (bankid)

[aleixsuau]

Summary

• Add expandable QR code overlay to the HAAPI stepper Link/Links components, conforming to BankID accessibility requirements
• QR code image links are now wrapped in a <button> element with proper aria-label and alt text
• Clicking the QR code opens a fullscreen overlay dialog with the enlarged QR image
• Overlay state is managed in Links (not Link) so it persists across polling re-renders — the animated QR code continues updating inside the overlay

BankID Accessibility Compliance

• QR code is a <button> element
• Pressing the QR code opens it in fullscreen mode
• Alt text informs the user it's a QR code and is clickable
• Overlay doesn't block scrolling (overflow-y: auto)
• QR image is responsive and visible up to 200% zoom (max-width: 90vw; max-height: 90vh)
• Focus management: overlay button receives focus on open, Escape key closes

Test plan

• Visual: start a BankID polling flow, click QR code, verify overlay opens with animated QR
• Verify overlay stays open across polling ticks and QR image updates
• Verify Escape key and click-to-close work
• Verify screen reader announces "QR code, click to expand" / "Close expanded QR code"

[Copilot]

Pull request overview

Adds BankID-compliant QR-code link behavior to the HAAPI stepper by making image/QR links expandable into a fullscreen overlay while ensuring the overlay remains open and updates across polling re-renders.

Changes:

• Adds a fullscreen QR code overlay dialog component and associated styling.
• Updates Link/Links rendering so image/QR links are wrapped in an accessible <button> and can open/close the overlay.
• Adds new unit tests covering default rendering, render interception, and QR overlay behaviors.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/login-web-app/src/shared/util/css/styles.css	Adds styles for QR button, figure/title, and fullscreen overlay layout.
src/login-web-app/src/haapi-stepper/ui/links/Links.tsx	Introduces overlay state in Links and renders HaapiStepperQrCodeLinkOverlay.
src/login-web-app/src/haapi-stepper/ui/links/Links.spec.tsx	Adds tests for overlay open/close, Escape handling, focus, and rerender persistence.
src/login-web-app/src/haapi-stepper/ui/links/Link.tsx	Changes image links to render as an accessible button that triggers expansion.
src/login-web-app/src/haapi-stepper/ui/links/Link.spec.tsx	Adds tests for new QR button rendering and behavior.
src/login-web-app/src/haapi-stepper/ui/links/HaapiStepperQrCodeLinkOverlay.tsx	New overlay dialog component with focus-on-open and Escape-to-close handling.
src/login-web-app/src/haapi-stepper/ui/links/defaultHaapiStepperLinkElementFactory.tsx	Extends factory to pass onExpandImage into Link.
src/login-web-app/src/haapi-stepper/README.md	Updates documented CSS class list for the new QR/overlay classes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

When the overlay closes, focus isn’t restored to the element that opened it (the QR button). This can be disorienting for keyboard/screen reader users. Capture the previously focused element on open and restore focus on close/unmount (or pass a ref/callback from Links to return focus to the QR button).

Suggested change

	useEffect(() => {
	overlayButtonRef.current?.focus();
	useEffect(() => {
	const previouslyFocusedElement = document.activeElement as HTMLElement | null;
	overlayButtonRef.current?.focus();
	return () => {
	previouslyFocusedElement?.focus();
	};