diff --git a/src/components/atoms/Badge/Badge.tsx b/src/components/atoms/Badge/Badge.tsx index 7273a64..b385403 100644 --- a/src/components/atoms/Badge/Badge.tsx +++ b/src/components/atoms/Badge/Badge.tsx @@ -77,6 +77,9 @@ const softColors: Record { bg: string; text: string }> * Variant options: * - `soft` (default) — tonal background, coloured text. Calmer, preferred for FA. * - `filled` — solid background, white text. For high-priority emphasis. + * + * **Accessibility**: If a Badge contains only an icon (no text children), + * provide an `aria-label` prop so screen readers can announce the status. */ export const Badge = React.forwardRef( ( diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index a0e3418..6612963 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -29,6 +29,10 @@ export interface ButtonProps extends MuiButtonProps { * - `outlined` + `secondary` — Outlined grey (neutral border) * - `text` + `primary` — Ghost / text button (copper text) * - `text` + `secondary` — Ghost secondary (grey text) + * + * **Accessibility**: Icon-only buttons (no visible text) require an + * `aria-label` prop. Without it, screen readers announce nothing. + * Example: `