Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions apps/web/src/lib/api.ts
Original file line number Diff line number Diff line change
@@ -1,15 +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 { formatDate, formatAUD } from "@e2e/utils"
import { useDebounce, formatDate, formatAUD } from "@e2e/utils"

export const BASE_URL = process.env.API_URL ?? "http://localhost:3000"

Expand All @@ -28,5 +21,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 }
24 changes: 15 additions & 9 deletions packages/ui/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,13 @@ 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.
* An icon-only button renders no visible text, so it must carry an accessible
* name (WCAG 2.2 SC 4.1.2 Name, Role, Value). A supplied `aria-label` is always
* applied; when `iconOnly` is set without one, a fallback label is used and a
* development warning is emitted so the missing label is caught at build time.
*/
const ICON_ONLY_FALLBACK_LABEL = "Button"

export function Button({
children,
icon,
Expand All @@ -34,13 +33,20 @@ export function Button({
onClick,
"aria-label": ariaLabel,
}: Props) {
if (iconOnly && !ariaLabel && process.env.NODE_ENV !== "production") {
console.warn(
"Button: `iconOnly` buttons require an `aria-label` for an accessible name (WCAG 2.2 SC 4.1.2).",
)
}

const label = ariaLabel ?? (iconOnly ? ICON_ONLY_FALLBACK_LABEL : undefined)

return (
<button
className={`btn btn-${variant}`}
disabled={disabled}
onClick={onClick}
// BUG: aria-label is not applied when iconOnly is true and no ariaLabel is passed
// The component should enforce aria-label for icon-only buttons
aria-label={label}
>
{icon && <span className="btn-icon">{icon}</span>}
{!iconOnly && children}
Expand Down
19 changes: 9 additions & 10 deletions packages/utils/src/format/date.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
/**
* Date formatting utilities.
*
* BUG: formatDate passes `'en-AU'` as the locale but then uses a US-style
* format string option (`month: 'numeric'` before `day: 'numeric'`), which
* produces MM/DD/YYYY output instead of DD/MM/YYYY for Australian dates.
*
* Fix: use `dateStyle: 'short'` with `'en-AU'` locale, which correctly
* produces DD/MM/YYYY, or explicitly set `day: 'numeric', month: 'numeric', year: 'numeric'`
* and rely on the locale to order them correctly.
* `formatDate` renders day-first (Australian) order with no leading zero on the
* day — e.g. 1 March 2024 -> "1/03/2024". The `en-AU` pattern is `dd/MM/y`, so
* it widens `day: "numeric"` back to two digits; the day part is trimmed via
* `formatToParts` while the locale keeps control of field order and separators.
*/
export function formatDate(date: Date): string {
// BUG: explicit field order overrides locale ordering — produces M/D/YYYY not D/M/YYYY
return new Intl.DateTimeFormat("en-AU", {
month: "numeric",
day: "numeric",
month: "2-digit",
year: "numeric",
}).format(date)
})
.formatToParts(date)
.map((part) => (part.type === "day" ? String(Number(part.value)) : part.value))
.join("")
}

export function formatDateTime(date: Date): string {
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"types": ["bun-types"],
"paths": {
"@e2e/ui": ["./packages/ui/src/index.ts"],
"@e2e/utils": ["./packages/utils/src/index.ts"]
Expand Down
Loading