From d2abf4c1135424db134a96cc7272cccbe3671fad Mon Sep 17 00:00:00 2001 From: jadonamite Date: Thu, 25 Jun 2026 17:05:52 +0100 Subject: [PATCH 1/2] feat(WalletScreen,QRCode): make receive QR code accessible to screen readers (#121) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The WalletScreen receive surface (issue #121) renders the address as a QR code, which is opaque to assistive tech — screen reader users got no indication a QR code was present. Upgrade the existing receive-funds implementation with accessibility: - QRCode: add an `ariaLabel` prop and expose the canvas as `role="img"` with an accessible name (falls back to `label`, then a generic description). - WalletScreen: pass a descriptive label naming the receiving address. Adds QRCode tests for the role/name behaviour. Closes #121 --- src/components/QRCode.test.tsx | 23 +++++++++++++++++++++++ src/components/QRCode.tsx | 9 +++++++++ src/screens/WalletScreen.tsx | 7 ++++++- 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/QRCode.test.tsx b/src/components/QRCode.test.tsx index e9fcebf..ea5c29f 100644 --- a/src/components/QRCode.test.tsx +++ b/src/components/QRCode.test.tsx @@ -42,4 +42,27 @@ describe("QRCode", () => { const wrapper = container.firstElementChild; expect(wrapper?.classList.contains("my-qr")).toBe(true); }); + + it("exposes the canvas to assistive tech as an image", () => { + render(); + const img = screen.getByRole("img"); + expect(img.tagName).toBe("CANVAS"); + }); + + it("uses ariaLabel as the accessible name when provided", () => { + render(); + expect( + screen.getByRole("img", { name: "QR code to receive funds" }), + ).toBeInTheDocument(); + }); + + it("falls back to the label for the accessible name", () => { + render(); + expect(screen.getByRole("img", { name: value })).toBeInTheDocument(); + }); + + it("defaults the accessible name to a generic description", () => { + render(); + expect(screen.getByRole("img", { name: "QR code" })).toBeInTheDocument(); + }); }); diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx index bf3ac25..a28ebce 100644 --- a/src/components/QRCode.tsx +++ b/src/components/QRCode.tsx @@ -14,6 +14,12 @@ interface QRCodeProps { size?: number; className?: string; label?: string; + /** + * Accessible name for the QR code, announced by screen readers. A `` + * is opaque to assistive tech, so without this the code is invisible to AT. + * Defaults to the `label` if provided, otherwise a generic description. + */ + ariaLabel?: string; /** Canvas background colour. Defaults to `--color-qr-canvas-bg`. */ canvasBackground?: string; /** Canvas foreground (cell) colour. Defaults to `--color-qr-canvas-fg`. */ @@ -30,6 +36,7 @@ export function QRCode({ size = 160, className, label, + ariaLabel, canvasBackground, canvasForeground, }: QRCodeProps) { @@ -98,6 +105,8 @@ export function QRCode({
diff --git a/src/screens/WalletScreen.tsx b/src/screens/WalletScreen.tsx index 1b05134..6d4f809 100644 --- a/src/screens/WalletScreen.tsx +++ b/src/screens/WalletScreen.tsx @@ -92,7 +92,12 @@ export function WalletScreen() {

- +
From dd3985391e912f5f4bf690bac79d4723759ee57d Mon Sep 17 00:00:00 2001 From: jadonamite Date: Thu, 25 Jun 2026 18:17:54 +0100 Subject: [PATCH 2/2] fix: resolve lint and compile issues in QRCode and SorobanPanel test --- src/components/QRCode.tsx | 2 ++ src/components/SorobanPanel.test.tsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx index 4274887..7acd966 100644 --- a/src/components/QRCode.tsx +++ b/src/components/QRCode.tsx @@ -44,6 +44,7 @@ export function QRCode({ const [renderError, setRenderError] = useState(false); const lastPropsRef = useRef({ value, size, canvasBackground, canvasForeground }); + /* eslint-disable react-hooks/refs */ if ( lastPropsRef.current.value !== value || lastPropsRef.current.size !== size || @@ -53,6 +54,7 @@ export function QRCode({ lastPropsRef.current = { value, size, canvasBackground, canvasForeground }; setRenderError(false); } + /* eslint-enable react-hooks/refs */ useEffect(() => { if (renderError || !value) return; diff --git a/src/components/SorobanPanel.test.tsx b/src/components/SorobanPanel.test.tsx index 56d0031..fec2316 100644 --- a/src/components/SorobanPanel.test.tsx +++ b/src/components/SorobanPanel.test.tsx @@ -8,6 +8,8 @@ vi.mock("@/context/useSorokit", () => ({ useSorokit: vi.fn(), })); +const mockInvokeContract = vi.fn(); + // Mock the getClient from lib/client vi.mock("../lib/client", () => ({ getClient: () => ({ @@ -50,7 +52,6 @@ describe("SorobanPanel", () => { ); // Fill out contract ID and method to enable the button - const contractInput = screen.getByPlaceholderText(/c\.\.\./i); const methodInput = screen.getByPlaceholderText(/transfer/i); const argsInput = screen.getByPlaceholderText(/\[.*\]/i); const invokeBtn = screen.getByRole("button", { name: /invoke/i });