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
This commit is contained in:
Amruth Pillai
2026-08-09 14:48:46 +02:00
parent b4f245a38e
commit ba1f469950
3 changed files with 11 additions and 1 deletions
@@ -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>