IS-11218 Render BankID QR accessibility messages as collapsible sections#253
Draft
aleixsuau wants to merge 1 commit into
Draft
IS-11218 Render BankID QR accessibility messages as collapsible sections#253aleixsuau wants to merge 1 commit into
aleixsuau wants to merge 1 commit into
Conversation
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds frontend support for BankID QR-code accessibility messages delivered via metadata.viewData.messages, rendering them in the built-in BankID UI as two collapsible <details> sections to match the classic Velocity layout.
Changes:
- Introduces
HaapiStepperBankIdQrAccessibilityMessagesto render “instruction.” and “screen-reader.” message groups as collapsible sections. - Adds message-key normalization via
getQrViewDataMessagesto resolve keys by their.view.qr.<suffix>tail. - Extends HAAPI step typings with
metadata.viewData.messages, adds styling and documents the new CSS hook.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/haapi-react-sdk/haapi-stepper/util/qr-view-data-messages.ts | Adds normalization helper for .view.qr.-scoped message keys. |
| src/haapi-react-sdk/haapi-stepper/README.md | Documents the new .haapi-stepper-bankid-qr-accessibility CSS hook. |
| src/haapi-react-sdk/haapi-stepper/feature/viewnames/index.ts | Exports the new BankID QR accessibility messages component. |
| src/haapi-react-sdk/haapi-stepper/feature/viewnames/HaapiStepperBankIdQrAccessibilityMessages.tsx | Implements the collapsible accessibility sections for BankID QR messages. |
| src/haapi-react-sdk/haapi-stepper/feature/viewnames/HaapiStepperBankIdQrAccessibilityMessages.spec.tsx | Adds test coverage for rendering and toggle behavior. |
| src/haapi-react-sdk/haapi-stepper/feature/viewnames/BankIdViewNameBuiltInUI.tsx | Wires the new component into the built-in BankID view. |
| src/haapi-react-sdk/haapi-stepper/data-access/types/haapi-step.types.ts | Adds HaapiViewData and types metadata.viewData (incl. messages). |
| src/haapi-react-app/src/shared/util/css/styles.css | Styles the new container and <details> spacing/behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+346
to
+348
| /** | ||
| * View-specific data attached to the response. The shape depends on the view that produced it; | ||
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Jira: https://curity.atlassian.net/browse/IS-11218
Frontend counterpart to the BankID server work (server PR #10231) that adds QR-code accessibility messages under
metadata.viewData.messages.What
Renders the BankID QR accessibility messages in
BankIdViewNameBuiltInUIas two collapsible<details>sections — "Help with scanning the QR code" (instruction.*) and "If you are using a screen reader" (screen-reader.*) — mirroring the classic Velocity layout.Test instructions
BankID