From b04974cdb3b9a0802ff8c1c8be1e021154c44548 Mon Sep 17 00:00:00 2001 From: QuantCode Agent Date: Sat, 5 Sep 2026 16:35:56 +0000 Subject: [PATCH] fix: repair DOM test env, stale hook import, button a11y, date format, bun-types - bunfig.toml: replace unsupported `environment` key with `preload` so the happy-dom global registrator loads (fixes `document is not defined`) - api.ts: useThrottle -> useDebounce after the hook was renamed in @e2e/utils (public useSearchDebounce name preserved) - Button: apply aria-label to the element and fall back to string children before "Button"; dev-only warn when icon-only lacks a label [WCAG 4.1.2] - date.ts: strip en-AU locale zero-padding via formatToParts -> D/MM/YYYY - tsconfig.json: wire already-installed bun-types so `bun:test` resolves bun test: 13 pass / 0 fail. tsc --noEmit: exit 0. --- apps/web/src/lib/api.ts | 12 +++------ bunfig.toml | 2 +- packages/ui/src/components/Button/Button.tsx | 24 +++++++++++------- packages/utils/src/format/date.ts | 26 +++++++++++--------- tsconfig.json | 1 + 5 files changed, 35 insertions(+), 30 deletions(-) diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts index 2d4731b..a1d9b7b 100644 --- a/apps/web/src/lib/api.ts +++ b/apps/web/src/lib/api.ts @@ -1,14 +1,8 @@ /** * API client utilities for the web app. - * - * BUG: imports `useThrottle` from @e2e/utils, but that hook was renamed to - * `useDebounce`. This causes a TypeScript error and a runtime crash. - * - * Fix: change the import to `useDebounce`. */ -// BUG: useThrottle no longer exists — was renamed to useDebounce -import { useThrottle } from "@e2e/utils" +import { useDebounce } from "@e2e/utils" import { formatDate, formatAUD } from "@e2e/utils" export const BASE_URL = process.env.API_URL ?? "http://localhost:3000" @@ -28,5 +22,5 @@ export async function fetchPosts() { // Re-export formatting utilities used throughout the app export { formatDate, formatAUD } -// Re-export the debounce hook (currently broken import) -export { useThrottle as useSearchDebounce } +// Re-export the debounce hook under the app's public name +export { useDebounce as useSearchDebounce } diff --git a/bunfig.toml b/bunfig.toml index 3258d71..1cb73b3 100644 --- a/bunfig.toml +++ b/bunfig.toml @@ -1,2 +1,2 @@ [test] -environment = "happy-dom" \ No newline at end of file +preload = ["./packages/ui/test/setup.ts"] \ No newline at end of file diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index af65c97..04e47a9 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -17,13 +17,10 @@ type Props = { /** * Button component. * - * BUG: When `iconOnly` is true, the button renders without visible text. - * An `aria-label` is required for screen reader accessibility (WCAG 2.1 SC 4.1.2), - * but the component does not enforce or warn about its absence. - * - * The test in Button.test.tsx checks that an icon-only button has an accessible name. - * Fix: throw/warn in development when `iconOnly && !aria-label`, or always render - * the aria-label attribute when iconOnly is true. + * When `iconOnly` is true the button renders no visible text, so an `aria-label` + * is required to give it an accessible name (WCAG 2.2 SC 4.1.2 Name, Role, Value). + * If one is omitted we warn in development and fall back to a generic name so the + * control is never completely unnamed to screen readers. */ export function Button({ children, @@ -34,13 +31,22 @@ export function Button({ onClick, "aria-label": ariaLabel, }: Props) { + if (process.env.NODE_ENV !== "production" && iconOnly && !ariaLabel) { + console.warn( + "Button: an `iconOnly` button must be given an `aria-label` so screen " + + "readers can announce it (WCAG 2.2 SC 4.1.2 Name, Role, Value)." + ) + } + + const fallback = typeof children === "string" ? children : "Button" + const accessibleName = ariaLabel ?? (iconOnly ? fallback : undefined) + return (