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
12 changes: 3 additions & 9 deletions apps/web/src/lib/api.ts
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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
export { useDebounce as useSearchDebounce }
1 change: 1 addition & 0 deletions bun-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="bun-types" />
25 changes: 15 additions & 10 deletions packages/ui/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
* Icon-only buttons render no visible text, so they must expose an accessible
* name (WCAG 2.2 SC 4.1.2). An explicit `aria-label` is used when provided;
* otherwise string children are promoted to the label, falling back to a
* generic "Button" with a development-mode warning.
*/
export function Button({
children,
Expand All @@ -34,16 +31,24 @@ export function Button({
onClick,
"aria-label": ariaLabel,
}: Props) {
const resolvedAriaLabel =
ariaLabel ?? (iconOnly ? (typeof children === "string" ? children : "Button") : undefined)

if (process.env.NODE_ENV !== "production" && iconOnly && !ariaLabel) {
console.warn(
"Button: `iconOnly` requires an explicit `aria-label` for screen reader users (WCAG 2.2 SC 4.1.2). Falling back to a generic label.",
)
}

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={resolvedAriaLabel}
>
{icon && <span className="btn-icon">{icon}</span>}
{!iconOnly && children}
</button>
)
}
}
18 changes: 8 additions & 10 deletions packages/utils/src/format/date.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
/**
* 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` produces Australian day-first dates (D/MM/YYYY) with an
* unpadded day. The `en-AU` CLDR data coerces `day: 'numeric'` to 2-digit,
* so the day part is stripped of its leading zero via `formatToParts`.
*/
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((p) => (p.type === "day" ? String(Number(p.value)) : p.value))
.join("")
}

export function formatDateTime(date: Date): string {
Expand Down
7 changes: 6 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,10 @@
"@e2e/utils": ["./packages/utils/src/index.ts"]
}
},
"include": ["packages/*/src/**/*", "packages/*/test/**/*", "apps/*/src/**/*"]
"include": [
"bun-env.d.ts",
"packages/*/src/**/*",
"packages/*/test/**/*",
"apps/*/src/**/*"
]
}
Loading