fix(a11y): give explorer links a descriptive aria-label - #625
Open
16navigabraham wants to merge 1 commit into
Open
fix(a11y): give explorer links a descriptive aria-label#62516navigabraham wants to merge 1 commit into
16navigabraham wants to merge 1 commit into
Conversation
TransactionHistory already links each row to stellar.expert (added in a prior PR) and TransactionPanel already links the success hash, but neither surfaced that fact through an aria-label a screen reader user can rely on: - TransactionHistory's row aria-label described the transaction (hash/status/fee) but never mentioned it was also a link to an external explorer, or that it opens in a new tab. - TransactionPanel's two explorer links (the hash itself, and the 'View on Stellar Expert' badge link) had no aria-label at all. - TransactionHistory.tsx: append '— view on Stellar Expert (opens in a new tab)' to a row's aria-label only when it actually renders as a link (network unrecognized -> plain row, label unchanged). - TransactionPanel.tsx: add an aria-label to both explorer links, and mark the hash text inside the first one aria-hidden so the link's accessible name comes from the aria-label instead of being read twice. Closes Sorokit#563
|
@16navigabraham 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! 🚀 |
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.
Summary
Closes #563.
Most of this issue's acceptance criteria were already implemented in prior PRs —
TransactionHistory's rows already link tostellar.expertbased on the active network, andTransactionPanel's success hash already links to it too, both withtarget="_blank" rel="noopener noreferrer". The one gap left was the aria-label.What changed
src/components/TransactionHistory.tsx—TxRow's existing rowaria-label(hash/status/fee) now also says— view on Stellar Expert (opens in a new tab)whenever the row actually renders as a link. When the network is unrecognized and the row falls back to a plain, non-clickable<div>, the label is unchanged.src/components/TransactionPanel.tsx— both explorer links in the success panel (the hash itself, and the "View on Stellar Expert" text link beside the Successful badge) now have an explicitaria-labelnaming the transaction and noting it opens in a new tab. The hash text inside the first link is markedaria-hiddenso its accessible name comes from thearia-labelinstead of being announced twice.TransactionHistory.test.tsx(row aria-label mentions the explorer link when it is one, and doesn't when it isn't) and 1 new case inTransactionPanel.test.tsx(both explorer links expose an accessible name containing the hash and "opens in a new tab").Acceptance criteria
Testing
npx vitest run src/components/TransactionHistory.test.tsx→ 36/36 pass.npx vitest run src/components/TransactionPanel.test.tsx→ same 23/34 pass asmainplus my 1 new test (24 total passing here); the 11 failures are pre-existing and unrelated — see note below.npm run typecheck→ clean.Note for maintainers
maincurrently has 11 pre-existing, unrelated failures inTransactionPanel.test.tsx(confirmed viagit stashagainst a clean checkout) — every test that completes a submission through the confirmation modal fails with"Wallet not connected", because the shareduseSorokit()mock at the top of the file predates the "context client" refactor and never sets aclientfield. My new test works around it locally (client: getClient()), but the shared, already-broken tests are untouched here since fixing them is out of scope for this issue.