feat(frontend): implement WCAG 2.1 AA accessible focus trap and ARIA attributes in Fiat Onramp Modal - #1584
Merged
Conversation
…attributes in Fiat Onramp Modal
|
@Chucks1093 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Chucks1093 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Mawuli-tech
added a commit
to Mawuli-tech/Stellar_Payment_API
that referenced
this pull request
Sep 26, 2026
…lopa#1512) Investigated the actual webhook-logs feature (page.tsx -> WebhookLogs.tsx -> WebhookDetailModal.tsx -> the shared ui/Modal.tsx) rather than assuming the issue's "focus trap" framing applied to the log table itself. The plain, read-only <table> listing deliveries doesn't need a focus trap. The originally-planned fix for this issue also wired up Modal.tsx's dead dialogRef (never attached via ref={dialogRef}, so its existing Tab-cycling focus-trap implementation never ran) and added tabIndex/role="button"/keyboard handling to each WebhookLogs row, both genuinely missing at the time. Rebasing onto main found both already fixed independently: Modal.tsx already has ref={dialogRef}, role="dialog", aria-modal, and aria-labelledby (merged via emdevelopa#1584, for Fiat Onramp Modal's own focus-trap issue), and WebhookLogs.tsx's rows already have tabIndex={0}/role="button"/Enter+Space handling (merged via emdevelopa#1582, WebhookLogs' own keyboard-navigation issue), both fixing the exact same underlying dead code and accessibility gaps this issue also targeted, just filed and closed under different issue numbers. Kept upstream's versions as-is rather than reintroducing equivalent but differently-worded duplicates. What's left, and genuinely new: the <table> itself had no accessible name and its <th> cells had no scope="col", and neither of the other two merged PRs touched this (no sortable columns exist here, so aria-sort doesn't apply, unlike RecentPayments.tsx elsewhere in this codebase). Added aria-label to the table and scope="col" to every header cell.
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
2 participants
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.
Closes #1484
Closes #1485
Closes #1486
Closes #1502
Changes
frontend/src/components/ui/Modal.tsxrole="dialog"andaria-modal="true"to the dialog container so screen readers announce the modal boundary correctly (WCAG 2.1 AA, success criterion 4.1.2)aria-labelledbywired to the existing titleidso the modal name is announced on focusaria-describedbyprop forwarded from the consumerref={dialogRef}andtabIndex={-1}on the container — previously the ref was declared but never attached, sodialog.focus()was a no-op and the focus trap never initialisedfocus:outline-noneso the programmatic focus on open does not show an unwanted ring on the containerfrontend/src/components/FiatOnrampModal.tsxid={descriptionId}to the description paragraph and passeddescriptionIdto<Modal>via the new prop soaria-describedbyis populated on the dialog elementaria-busy={isBusy}to the submit button so assistive technology announces the in-progress state without relying on visual-only feedbackfrontend/src/components/FiatOnrampModal.test.tsxWCAG 2.1 AA — ARIA attributesdescribe block with 4 new tests:role=dialogandaria-modal=truepresentaria-labelledbyresolves to the title textaria-describedbyresolves to the description paragrapharia-busyreflects idle and busy states on the submit buttonaria-label