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 (formerly useThrottle)
export { useDebounce as useSearchDebounce }
2 changes: 1 addition & 1 deletion bunfig.toml
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
[test]
environment = "happy-dom"
preload = ["./packages/ui/test/setup.ts"]
18 changes: 9 additions & 9 deletions packages/ui/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,8 @@ 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 an `aria-label` is required for an
* accessible name (WCAG 4.1.2). A dev-time warning is logged when it is missing.
*/
export function Button({
children,
Expand All @@ -34,13 +29,18 @@ 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 (WCAG 4.1.2)")
}
// "Button" is a placeholder fallback only; callers should always pass aria-label.
const accessibleName =
ariaLabel || (iconOnly ? (typeof children === "string" ? children : "Button") : 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={accessibleName}
>
{icon && <span className="btn-icon">{icon}</span>}
{!iconOnly && children}
Expand Down
18 changes: 6 additions & 12 deletions packages/utils/src/format/date.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
/**
* 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.
*/
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",
// en-AU orders as D/M/Y but zero-pads the day; build parts to get unpadded day, padded month (e.g. 1/03/2024)
const parts = new Intl.DateTimeFormat("en-AU", {
day: "numeric",
month: "2-digit",
year: "numeric",
}).format(date)
}).formatToParts(date)
const get = (type: string) => parts.find((p) => p.type === type)?.value ?? ""
return `${Number(get("day"))}/${get("month")}/${get("year")}`
}

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