Prerequisites checklist for the audit workflow

docs/accessibility.md

@@ -14,6 +14,7 @@ automatically, what was fixed, and what still needs a manual pass.
 | Screen reader | Landmarks, a single `h1`, and named navigation links | `tests/visual/accessibility.spec.ts` |
 | Screen reader | Command selector is a labelled group of toggle buttons | `src/App.test.tsx`, `tests/visual/accessibility.spec.ts` |
 | Screen reader | Copy results are announced through a polite live region | `src/App.test.tsx`, `tests/visual/accessibility.spec.ts` |
+| Screen reader | Audit prerequisites are a labelled fieldset of checkboxes, each with its own accessible name | `src/App.test.tsx` |
 | Zoom | No horizontal page scroll and no clipped controls at 640px and 320px CSS widths | `tests/visual/accessibility.spec.ts` |
 
 These checks read the accessibility tree and computed styles. They do not

src/App.test.tsx

@@ -230,6 +230,20 @@ describe("Soroban workflow documentation and prerequisites", () => {
   });
 });
 
+describe("Audit workflow prerequisites checklist (#91)", () => {
+  it("lets a user check off audit prerequisites, each with its own accessible name", () => {
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Show tutorial" }));
+
+    const item = screen.getByRole("checkbox", { name: /testkit cli installed/i });
+    expect(item).not.toBeChecked();
+
+    fireEvent.click(item);
+    expect(item).toBeChecked();
+  });
+});
+
 describe("Command builder enhancements", () => {
   it("allows optional coverage arguments to be reordered", () => {
     render(<App />);

src/App.tsx

@@ -115,6 +115,15 @@ const installationSteps = [
   },
 ];
 
+// Things worth confirming before running an audit scan (#91). Local-only
+// checklist state; nothing here is persisted or sent anywhere.
+const auditPrerequisites = [
+  { id: "rust", label: "Rust toolchain installed via rustup" },
+  { id: "wasm-target", label: "wasm32v1-none compilation target added" },
+  { id: "testkit-cli", label: "Testkit CLI installed and on your PATH" },
+  { id: "builds-clean", label: "Contract builds without warnings before scanning" },
+];
+
 function summarizeConfiguration(options: CommandOptions): SummaryRow[] {
   const rows: SummaryRow[] = [{ label: "Workflow", value: options.command }];
   if (options.path) rows.push({ label: "Path", value: options.path });
@@ -241,6 +250,7 @@ export default function App() {
   const [configB, setConfigB] = useState<CommandOptions | null>(null);
   const [coverageGuideOpen, setCoverageGuideOpen] = useState(false);
   const [auditGuideOpen, setAuditGuideOpen] = useState(false);
+  const [checkedPrerequisites, setCheckedPrerequisites] = useState<Record<string, boolean>>({});
   const comparePanelRef = useRef<HTMLDivElement>(null);
   const [activeSection, setActiveSection] = useActiveSection(navSectionIds);
 
@@ -1245,6 +1255,23 @@ export default function App() {
           </div>
           {auditGuideOpen && (
             <div id="audit-guide-panel" className="guide-panel">
+              <fieldset className="audit-prerequisites">
+                <legend>Prerequisites</legend>
+                {auditPrerequisites.map((item) => (
+                  <label key={item.id} className="check">
+                    <span className="check-content">
+                      <input
+                        type="checkbox"
+                        checked={checkedPrerequisites[item.id] ?? false}
+                        onChange={(event) =>
+                          setCheckedPrerequisites((prev) => ({ ...prev, [item.id]: event.target.checked }))
+                        }
+                      />
+                      <span>{item.label}</span>
+                    </span>
+                  </label>
+                ))}
+              </fieldset>
               <ol>
                 <li>Point the audit at the contract source directory or workspace root most relevant to the change.</li>
                 <li>