Skip to content

fix: accessibility improvements for Stellar flows #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lightnoor890 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: accessibility improvements for Stellar flows #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/A11Y.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Accessibility Audit Findings

This document outlines the results of the WCAG 2.1 AA accessibility audit for the Stellar flows.

| Severity | WCAG Criterion | Element | Status |
| :--- | :--- | :--- | :--- |
| Critical | 2.4.7 Focus Visible | All interactive elements (`input`, `select`, `button`) | Fixed |
| Serious | 1.4.3 Contrast (Minimum) | `input::placeholder` | Fixed |
| Serious | 1.3.1 Info and Relationships | `input` in `StellarSend.tsx` and `StellarReceive.tsx` | Fixed |
| Serious | 1.4.3 Contrast (Minimum) | Text using `text-outline` color | Fixed (Placeholder increased) |
| Serious | 2.4.1 Bypass Blocks | Global | Fixed (Skip-link added) |

## VoiceOver Run-through Notes
(To be completed after fixes)

## Axe Report
(To be completed after fixes)
5 changes: 4 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Receive from '@/pages/Receive';
export function App() {
return (
<div className="flex min-h-screen flex-col">
<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-primary focus:text-surface focus:px-4 focus:py-2">
Skip to content
</a>
<Header />
<AutoSign />
<main className="mx-auto w-full max-w-[720px] flex-1 px-4 pb-16 pt-8 sm:px-6 sm:pb-24 sm:pt-10">
<main id="main-content" className="mx-auto w-full max-w-[720px] flex-1 px-4 pb-16 pt-8 sm:px-6 sm:pb-24 sm:pt-10">
<Routes>
<Route path="/send" element={<Send />} />
<Route path="/receive" element={<Receive />} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChainSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function ChainSwitcher() {
<select
value={chain}
onChange={(e) => setChain(e.target.value as Chain)}
className="h-8 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary focus:outline-none sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
className="h-8 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
>
{chains.map((c) => (
<option key={c.id} value={c.id}>
Expand Down
6 changes: 4 additions & 2 deletions src/components/CkbSend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,12 @@ export function CkbSend() {
{!txHash && (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="recipient-meta" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Recipient Meta-Address
</label>
<div className="relative">
<input
id="recipient-meta"
type="text"
value={recipient}
onChange={(e) => setRecipient(e.target.value)}
Expand All @@ -153,11 +154,12 @@ export function CkbSend() {
</div>

<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="amount" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Amount (min 95)
</label>
<div className="relative">
<input
id="amount"
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
Expand Down
3 changes: 2 additions & 1 deletion src/components/SolanaReceive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,12 @@ function SolanaStealthRow({

{!withdrawHash && balance && parseFloat(balance) > 0 && (
<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="withdraw-dest" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Withdraw to
</label>
<div className="flex gap-2">
<input
id="withdraw-dest"
type="text"
value={dest}
onChange={(e) => setDest(e.target.value)}
Expand Down
6 changes: 4 additions & 2 deletions src/components/SolanaSend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,12 @@ export function SolanaSend() {
{!stealthResult && (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="recipient-meta" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Recipient Meta-Address
</label>
<div className="relative">
<input
id="recipient-meta"
type="text"
value={recipient}
onChange={(e) => setRecipient(e.target.value)}
Expand All @@ -153,11 +154,12 @@ export function SolanaSend() {
</div>

<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="amount" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Amount
</label>
<div className="relative">
<input
id="amount"
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
Expand Down
106 changes: 54 additions & 52 deletions src/components/StellarReceive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,61 +236,63 @@ function StellarStealthRow({
};

return (
<div className="flex flex-col gap-4 border border-outline-variant bg-surface-container p-5">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<span className="font-mono text-[10px] uppercase tracking-widest text-outline">
Stealth Address
</span>
<div className="mt-0.5 flex items-center gap-2">
<a
href={stellarAddrUrl(match.stealthAddress)}
target="_blank"
rel="noopener noreferrer"
className="block truncate font-mono text-xs text-primary underline"
>
{match.stealthAddress}
</a>
<CopyButton text={match.stealthAddress} />
<div className="flex flex-col gap-4 border border-outline-variant bg-surface-container p-5">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1">
<span className="font-mono text-[10px] uppercase tracking-widest text-outline">
Stealth Address
</span>
<div className="mt-0.5 flex items-center gap-2">
<a
href={stellarAddrUrl(match.stealthAddress)}
target="_blank"
rel="noopener noreferrer"
className="block truncate font-mono text-xs text-primary underline"
>
{match.stealthAddress}
</a>
<CopyButton text={match.stealthAddress} />
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
{loadingBal ? (
<span className="font-mono text-xs text-outline">...</span>
) : balance && parseFloat(balance) > 0 ? (
<>
<span className="inline-block h-1.5 w-1.5 bg-tertiary"></span>
<span className="font-heading text-lg font-bold text-on-surface">{balance} XLM</span>
</>
) : (
<span className="font-mono text-xs text-outline">Empty</span>
)}
</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
{loadingBal ? (
<span className="font-mono text-xs text-outline">...</span>
) : balance && parseFloat(balance) > 0 ? (
<>
<span className="inline-block h-1.5 w-1.5 bg-tertiary"></span>
<span className="font-heading text-lg font-bold text-on-surface">{balance} XLM</span>
</>
) : (
<span className="font-mono text-xs text-outline">Empty</span>

{!withdrawHash && balance && parseFloat(balance) > 0 && (
<div className="flex flex-col gap-1.5">
<label htmlFor="withdraw-dest" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Withdraw to
</label>
<div className="flex gap-2">
<input
id="withdraw-dest"
type="text"
value={dest}
onChange={(e) => setDest(e.target.value)}
placeholder="Destination address (G...)"
className="h-10 flex-1 border border-outline-variant bg-surface px-3 font-mono text-xs text-primary placeholder:text-outline focus:border-primary"
/>
<button
onClick={handleWithdraw}
disabled={!dest || withdrawing}
className="h-10 bg-primary px-4 font-heading text-[10px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
>
{withdrawing ? '...' : 'Withdraw'}
</button>
</div>
</div>
)}
</div>
</div>

{!withdrawHash && balance && parseFloat(balance) > 0 && (
<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
Withdraw to
</label>
<div className="flex gap-2">
<input
type="text"
value={dest}
onChange={(e) => setDest(e.target.value)}
placeholder="Destination address (G...)"
className="h-10 flex-1 border border-outline-variant bg-surface px-3 font-mono text-xs text-primary placeholder:text-outline focus:border-primary"
/>
<button
onClick={handleWithdraw}
disabled={!dest || withdrawing}
className="h-10 bg-primary px-4 font-heading text-[10px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
>
{withdrawing ? '...' : 'Withdraw'}
</button>
</div>
</div>
)}

{error && <p className="text-xs text-error">{error}</p>}

Expand Down
6 changes: 4 additions & 2 deletions src/components/StellarSend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,11 +210,12 @@ export function StellarSend() {
{!stealthResult && (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="recipient-meta" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Recipient Meta-Address
</label>
<div className="relative">
<input
id="recipient-meta"
type="text"
value={recipient}
onChange={(e) => setRecipient(e.target.value)}
Expand All @@ -231,11 +232,12 @@ export function StellarSend() {
</div>

<div className="flex flex-col gap-1.5">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
<label htmlFor="amount" className="font-mono text-[10px] uppercase tracking-widest text-outline">
Amount
</label>
<div className="relative">
<input
id="amount"
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
Expand Down
6 changes: 3 additions & 3 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ body {
}

input::placeholder {
color: #767575;
color: #888888;
}

input:focus {
outline: none;
box-shadow: none;
outline: 2px solid #c6c6c7;
outline-offset: 2px;
}

::-webkit-scrollbar {
Expand Down