From 1942dccaadcd4891f9b84a5117d6a64ecd3c18fa Mon Sep 17 00:00:00 2001 From: QuantCode Agent Date: Thu, 27 Aug 2026 19:54:47 +0000 Subject: [PATCH] fix: repair cross-package imports, DOM test setup, a11y label, and date locale - api.ts: correct stale import (useThrottle -> useDebounce backing useSearchDebounce) - bunfig.toml: register happy-dom via preload so DOM is available for ui tests - tsconfig.json: add bun-types so 'bun:test' resolves for tsc --noEmit - date.ts: use en-GB so day is not zero-padded (1/03/2024, not 01/03/2024) - Button.tsx: apply aria-label for icon-only buttons with honest fallback [WCAG-4.1.2] - DataTable.tsx: functional setState in sort handler (robust under batching) - package.json: drop duplicate --preload flag now provided by bunfig.toml --- apps/web/src/lib/api.ts | 12 +++------- bunfig.toml | 2 +- package.json | 2 +- packages/ui/src/components/Button/Button.tsx | 22 +++++++++++-------- .../ui/src/components/DataTable/DataTable.tsx | 11 +--------- packages/utils/src/format/date.ts | 19 ++++++++-------- tsconfig.json | 1 + 7 files changed, 29 insertions(+), 40 deletions(-) diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts index 2d4731b..d9c4314 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-facing name +export { useDebounce as useSearchDebounce } diff --git a/bunfig.toml b/bunfig.toml index 3258d71..0b64f7c 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"] diff --git a/package.json b/package.json index 75a6e10..8520f7c 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "apps/*" ], "scripts": { - "test": "bun test packages/utils/test packages/ui/test apps/web/test --preload ./packages/ui/test/setup.ts", + "test": "bun test packages/utils/test packages/ui/test apps/web/test", "typecheck": "tsc --noEmit" }, "devDependencies": { diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index af65c97..780d19c 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -17,13 +17,9 @@ 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. + * Icon-only buttons render without visible text, so they must be given an + * `aria-label` to expose an accessible name (WCAG 2.2 SC 4.1.2 Name, Role, Value). + * A development-time warning is emitted when one is missing. */ export function Button({ children, @@ -34,13 +30,21 @@ export function Button({ onClick, "aria-label": ariaLabel, }: Props) { + const derived = typeof children === "string" ? children : undefined + const resolvedLabel = ariaLabel ?? (iconOnly ? derived ?? "icon button" : undefined) + + if (process.env.NODE_ENV !== "production" && iconOnly && !ariaLabel && !derived) { + console.warn( + "Button: `iconOnly` buttons require an `aria-label` to provide an accessible name (WCAG 2.2 SC 4.1.2)." + ) + } + return (