diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts index 2d4731b..a391b7b 100644 --- a/apps/web/src/lib/api.ts +++ b/apps/web/src/lib/api.ts @@ -1,15 +1,12 @@ /** * 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`. + * The debounce hook exported by @e2e/utils is `useDebounce` (previously named + * `useThrottle`). It is re-exported below as `useSearchDebounce`, the name the + * rest of the app consumes. */ -// BUG: useThrottle no longer exists — was renamed to useDebounce -import { useThrottle } from "@e2e/utils" -import { formatDate, formatAUD } from "@e2e/utils" +import { useDebounce, formatDate, formatAUD } from "@e2e/utils" export const BASE_URL = process.env.API_URL ?? "http://localhost:3000" @@ -28,5 +25,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 name used across the app +export { useDebounce as useSearchDebounce } diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index af65c97..a78331a 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -14,16 +14,17 @@ type Props = { "aria-label"?: string } +const FALLBACK_ICON_LABEL = "Button" + /** * 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. + * An icon-only button renders no visible text, so it must carry an `aria-label` + * to expose an accessible name to assistive technology (WCAG 2.2 SC 4.1.2 + * Name, Role, Value). When `iconOnly` is set we always emit an `aria-label`: + * the caller-supplied value, a string child if one is present, or a generic + * fallback. A development-time warning is issued when no explicit label was + * given so the omission is caught during authoring rather than by an audit. */ export function Button({ children, @@ -34,13 +35,26 @@ export function Button({ onClick, "aria-label": ariaLabel, }: Props) { + let accessibleLabel = ariaLabel + + if (iconOnly && !accessibleLabel) { + accessibleLabel = typeof children === "string" && children.trim() !== "" ? children : FALLBACK_ICON_LABEL + + if (process.env.NODE_ENV !== "production") { + console.warn( + `Button: an icon-only button was rendered without an "aria-label". ` + + `Falling back to "${accessibleLabel}". Provide an explicit aria-label ` + + `describing the action (WCAG 2.2 SC 4.1.2).`, + ) + } + } + return (