From ba1f46995067ac834ab90c64855393731625c4c6 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Sun, 9 Aug 2026 14:48:46 +0200
Subject: [PATCH] fix(a11y): label 2FA copy button, restore template focus
 ring, guard API-key double-submit

- Add an sr-only "Copy secret" label to the icon-only copy button in the 2FA
  enable dialog; it was previously announced as an unlabeled button.
- Add a focus-visible ring to template gallery cards. The only ring was gated
  on the selected state, so keyboard focus was invisible while tabbing.
- Disable the API-key create submit button while the request is in flight to
  prevent duplicate keys from a double-click.

Surfaced by a shadscan UI audit. The remaining ~95 findings were false
positives from the auditor not understanding the pnpm monorepo and the
TanStack Start root-route shell, and were waived.

Claude-Session: https://claude.ai/code/session_01JYTniVDeA56o1kGhdoCUoD
---
 apps/web/src/dialogs/api-key/create.tsx          | 5 ++++-
 apps/web/src/dialogs/auth/enable-two-factor.tsx  | 6 ++++++
 apps/web/src/dialogs/resume/template/gallery.tsx | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/dialogs/api-key/create.tsx b/apps/web/src/dialogs/api-key/create.tsx
index 439652ede..d8a9471f8 100644
--- a/apps/web/src/dialogs/api-key/create.tsx
+++ b/apps/web/src/dialogs/api-key/create.tsx
@@ -2,6 +2,7 @@ import type { DialogProps } from "../store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { CopyIcon, PlusIcon } from "@phosphor-icons/react";
+import { useStore } from "@tanstack/react-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -83,6 +84,8 @@ const CreateApiKeyForm = ({ setApiKey }: CreateApiKeyFormProps) => {
 
 	useFormBlocker(form);
 
+	const isSubmitting = useStore(form.store, (state) => state.isSubmitting);
+
 	return (
 		<DialogContent>
 			<DialogHeader>
@@ -176,7 +179,7 @@ const CreateApiKeyForm = ({ setApiKey }: CreateApiKeyFormProps) => {
 				</form.Field>
 
 				<DialogFooter>
-					<Button type="submit">
+					<Button type="submit" disabled={isSubmitting}>
 						<Trans comment="Create API key dialog submit action">Create</Trans>
 					</Button>
 				</DialogFooter>
diff --git a/apps/web/src/dialogs/auth/enable-two-factor.tsx b/apps/web/src/dialogs/auth/enable-two-factor.tsx
index ccda50d04..23e13b247 100644
--- a/apps/web/src/dialogs/auth/enable-two-factor.tsx
+++ b/apps/web/src/dialogs/auth/enable-two-factor.tsx
@@ -254,6 +254,12 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
 									<div className="flex items-center gap-x-2">
 										<Input readOnly value={secret} className="font-mono text-sm" />
 										<Button size="icon" variant="ghost" type="button" onClick={handleCopySecret}>
+											<span className="sr-only">
+												{t({
+													comment: "Accessible label for the button that copies the two-factor secret key",
+													message: "Copy secret",
+												})}
+											</span>
 											<CopyIcon />
 										</Button>
 									</div>
diff --git a/apps/web/src/dialogs/resume/template/gallery.tsx b/apps/web/src/dialogs/resume/template/gallery.tsx
index fa3742858..4de51dddf 100644
--- a/apps/web/src/dialogs/resume/template/gallery.tsx
+++ b/apps/web/src/dialogs/resume/template/gallery.tsx
@@ -105,6 +105,7 @@ function TemplateCard({ id, data, metadata, isActive, onSelect }: TemplateCardPr
 				onClick={() => onSelect(id)}
 				className={cn(
 					"relative block aspect-page size-full cursor-pointer overflow-hidden rounded-md bg-popover outline-none",
+					"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 					isActive && "ring-2 ring-ring ring-offset-4 ring-offset-background",
 				)}
 			>