mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-08-25 07:42:20 +10:00
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:
@@ -2,6 +2,7 @@ import type { DialogProps } from "../store";
|
|||||||
import { t } from "@lingui/core/macro";
|
import { t } from "@lingui/core/macro";
|
||||||
import { Trans } from "@lingui/react/macro";
|
import { Trans } from "@lingui/react/macro";
|
||||||
import { CopyIcon, PlusIcon } from "@phosphor-icons/react";
|
import { CopyIcon, PlusIcon } from "@phosphor-icons/react";
|
||||||
|
import { useStore } from "@tanstack/react-form";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
@@ -83,6 +84,8 @@ const CreateApiKeyForm = ({ setApiKey }: CreateApiKeyFormProps) => {
|
|||||||
|
|
||||||
useFormBlocker(form);
|
useFormBlocker(form);
|
||||||
|
|
||||||
|
const isSubmitting = useStore(form.store, (state) => state.isSubmitting);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
@@ -176,7 +179,7 @@ const CreateApiKeyForm = ({ setApiKey }: CreateApiKeyFormProps) => {
|
|||||||
</form.Field>
|
</form.Field>
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button type="submit">
|
<Button type="submit" disabled={isSubmitting}>
|
||||||
<Trans comment="Create API key dialog submit action">Create</Trans>
|
<Trans comment="Create API key dialog submit action">Create</Trans>
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
|
|||||||
@@ -254,6 +254,12 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
|
|||||||
<div className="flex items-center gap-x-2">
|
<div className="flex items-center gap-x-2">
|
||||||
<Input readOnly value={secret} className="font-mono text-sm" />
|
<Input readOnly value={secret} className="font-mono text-sm" />
|
||||||
<Button size="icon" variant="ghost" type="button" onClick={handleCopySecret}>
|
<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 />
|
<CopyIcon />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -105,6 +105,7 @@ function TemplateCard({ id, data, metadata, isActive, onSelect }: TemplateCardPr
|
|||||||
onClick={() => onSelect(id)}
|
onClick={() => onSelect(id)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative block aspect-page size-full cursor-pointer overflow-hidden rounded-md bg-popover outline-none",
|
"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",
|
isActive && "ring-2 ring-ring ring-offset-4 ring-offset-background",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user