diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts index 2d4731b..4b812db 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 an app-specific name +export { useDebounce as useSearchDebounce } diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index af65c97..b0c1c0a 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -17,14 +17,14 @@ 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 no visible text, so they must expose an accessible + * name via `aria-label` (WCAG 2.2 SC 4.1.2 Name, Role, Value). When `iconOnly` + * is set without an explicit `aria-label`, a fallback label is applied so the + * control is never nameless, and a development-time warning is emitted so the + * caller fixes it properly. */ +const ICON_ONLY_FALLBACK_LABEL = "Button" + export function Button({ children, icon, @@ -34,13 +34,31 @@ export function Button({ onClick, "aria-label": ariaLabel, }: Props) { + const resolvedLabel = iconOnly + ? ariaLabel ?? + (typeof children === "string" ? children : undefined) ?? + ICON_ONLY_FALLBACK_LABEL + : ariaLabel + + if ( + iconOnly && + !ariaLabel && + typeof process !== "undefined" && + process.env.NODE_ENV !== "production" + ) { + console.warn( + "[Button] `iconOnly` was set without an `aria-label`. Icon-only buttons " + + "must have an accessible name (WCAG 2.2 SC 4.1.2). Falling back to " + + `"${ICON_ONLY_FALLBACK_LABEL}".`, + ) + } + return (