diff --git a/src/components/QRCode.test.tsx b/src/components/QRCode.test.tsx
index 95d9e1f..a88839a 100644
--- a/src/components/QRCode.test.tsx
+++ b/src/components/QRCode.test.tsx
@@ -81,4 +81,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 include the address", () => {
+ render();
+ expect(screen.getByRole("img", { name: `QR code for address ${value}` })).toBeInTheDocument();
+ });
});
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index 1be2aa7..7acd966 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -15,6 +15,12 @@ interface QRCodeProps {
size?: number;
className?: string;
label?: string;
+ /**
+ * Accessible name for the QR code, announced by screen readers. A `