Building Frontend UI — A11y, Tokens & Anti-Vibe Audit

Summary. The project already has a design system, so its tokens and components set the rules here. The fix is mostly reuse. Dialog and Button already provide the focus handling, Esc, loading state and styling that this modal rebuilds badly. Two problems are serious. projectName goes into innerHTML (an XSS risk), and any click inside the panel bubbles up to the backdrop and closes the modal.

Step 0 audit

Tokens: tailwind.config.ts (text-fg, text-fg-muted, bg-surface, text-danger). The component hardcodes #fff, #E11D48, 13px and 10px.

Reused: Dialog provides the native <dialog>, Esc, focus trap, focus restore and title. Button provides the danger variant and the loading state.

i18n: react-i18next with en and es. Every string below goes through t/Trans, and each new key is added to both locale files.

Findings, in the skill's priority order

Refactored component (src/features/projects/delete-project-dialog.tsx)

import { Trans, useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";

interface DeleteProjectDialogProps {
  open: boolean;
  projectName: string;
  isDeleting: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}

export function DeleteProjectDialog({
  open,
  projectName,
  isDeleting,
  onCancel,
  onConfirm,
}: DeleteProjectDialogProps) {
  const { t } = useTranslation("common");

  return (
    <Dialog open={open} onClose={onCancel} title={t("deleteProject.title")}>
      <p className="text-fg-muted">
        <Trans
          ns="common"
          i18nKey="deleteProject.body"
          values={{ projectName }}
          components={{ strong: <strong className="text-fg" /> }}
        />
      </p>
      <div className="mt-6 flex justify-end gap-2">
        <Button variant="secondary" onClick={onCancel} disabled={isDeleting}>
          {t("deleteProject.cancel")}
        </Button>
        <Button variant="danger" onClick={onConfirm} loading={isDeleting}>
          {t("deleteProject.confirm")}
        </Button>
      </div>
    </Dialog>
  );
}

The component was renamed from DeleteProjectModal to DeleteProjectDialog, and its props changed: onClose became onCancel, isLoading became isDeleting, and isDanger/isSmall were removed. Update the call sites.

Locale keys (add to both files)

// src/locales/en/common.json
"deleteProject": {
  "title": "Delete project?",
  "body": "<strong>{{projectName}}</strong> and all its data will be permanently deleted. This can’t be undone.",
  "cancel": "Cancel",
  "confirm": "Delete project"
}

// src/locales/es/common.json
"deleteProject": {
  "title": "¿Eliminar el proyecto?",
  "body": "<strong>{{projectName}}</strong> y todos sus datos se eliminarán de forma permanente. Esta acción no se puede deshacer.",
  "cancel": "Cancelar",
  "confirm": "Eliminar proyecto"
}

The Spanish copy is a draft. Have a native speaker review it before release. The body text also states that the project's data is deleted. Confirm that this matches what the backend actually does.

Tests to add (delete-project-dialog.test.tsx, Testing Library + jest-axe)

it("should call onConfirm once when confirm is clicked", async () => { /* click "Delete project", expect onConfirm called 1x */ });
it("should not call onConfirm again while deleting", async () => { /* isDeleting=true, click, expect 0 calls */ });
it("should render the project name as text when it contains HTML", () => {
  /* projectName='<img src=x onerror=alert(1)>' -> getByText contains the literal string, no <img> in the DOM */
});
it("should call onCancel when Escape is pressed", async () => { /* relies on Dialog's Esc handling */ });
it("should have no axe violations when open", async () => { /* expect(await axe(container)).toHaveNoViolations() */ });

These are specified but have not been run. Run them with your test command, for example npx vitest run delete-project-dialog.

Pre-delivery checklist

• Reuses Dialog, Button and tokens. No hardcoded hex, px or font sizes.
• Keyboard-operable with semantic buttons. Focus is handled by Dialog, and every control has a label.
• Loading state handled, with double submit blocked. A long projectName wraps inside the <p>. Check the truncation rule with a 200-character name.
• No unsanitized HTML and no client-side secrets.
• Typed props, a single responsibility, no boolean-flag explosion.
• i18n: no hardcoded strings, and the keys exist in both en and es.
• Tests written and passing. Not run yet (see above).

Next steps

1. Update the call sites to the new name and props.
2. Run the tests above, then check the open state at 375px to confirm the buttons stay at least 44px tall and don't overflow.
3. If Dialog doesn't move focus to the least destructive action (Cancel) when it opens, raise it as a Dialog change, not as a local workaround.