EL-523: aligned the accordion style more closely with designs, update the dev page (#48)

EL-523: added dev pages for dropdown menu, dialog and alert. Fixed implementation and tests.

EL-523: added a dev page for breadcrubms, rebuilt the page header component to match designs.

EL-523: added button group to the button dev page.

EL-523: refined breadcrumbs dev page

Author: foley-lynn

apps/citizen-portal-web/src/a11y/a11y-catalog.ts

@@ -1,12 +1,18 @@
 import type { ComponentA11yMetadata } from '@repo/ui/a11y-types';
 import uiCatalog from '@repo/ui/a11y-catalog.json';
+import breadcrumbA11y from './breadcrumb.a11y';
 import formElementsA11y from './form-elements-reference-page.a11y';
 import iconA11y from './icon-reference-page.a11y';
 import statusBannerA11y from './status-banner.a11y';
 
 // Components documented in this app but not owned by @repo/ui (app-local components, or
 // /dev pattern pages with no single owning component) — too few to warrant their own generator.
-const appLocalCatalog: ComponentA11yMetadata[] = [statusBannerA11y, iconA11y, formElementsA11y];
+const appLocalCatalog: ComponentA11yMetadata[] = [
+  statusBannerA11y,
+  iconA11y,
+  formElementsA11y,
+  breadcrumbA11y,
+];
 
 const catalog: ComponentA11yMetadata[] = [
   ...(uiCatalog as ComponentA11yMetadata[]),

apps/citizen-portal-web/src/a11y/breadcrumb.a11y.ts

@@ -0,0 +1,37 @@
+import type { ComponentA11yMetadata } from '@repo/ui/a11y-types';
+
+export default {
+  component: 'breadcrumb',
+  wcagCriteria: [
+    { id: '2.4.8', name: 'Location', level: 'AAA' },
+    { id: '1.3.1', name: 'Info and Relationships', level: 'A' },
+    { id: '4.1.2', name: 'Name, Role, Value', level: 'A' },
+  ],
+  ariaPattern: {
+    name: 'Breadcrumb',
+    url: 'https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/',
+  },
+  rules: [
+    {
+      id: 'nav-labelled',
+      description: 'The trail is wrapped in a <nav aria-label="Breadcrumb"> landmark.',
+      severity: 'required',
+    },
+    {
+      id: 'current-page-marked',
+      description:
+        'The last crumb (no href) renders as plain text with aria-current="page" rather than a link, so assistive tech announces it as the current location.',
+      severity: 'required',
+    },
+    {
+      id: 'separator-hidden',
+      description: 'The slash separator icon between crumbs is decorative — aria-hidden={true}.',
+      severity: 'required',
+    },
+  ],
+  commonMisuses: [
+    "Giving the current (last) crumb an href — it should be the plain aria-current='page' span, not a link to the page the user is already on.",
+  ],
+  notes: [],
+  knownExceptions: [],
+} satisfies ComponentA11yMetadata;

apps/citizen-portal-web/src/components/application/consent-gate.tsx

@@ -131,7 +131,7 @@ export function ConsentGate({ agreements, serviceId, onContinue }: ConsentGatePr
                 ) : null}
                 {content ? <RichTextView value={content} /> : null}
                 {/* Gray, visually distinct response section (matches the read-only detail view). */}
-                <div className="-mx-2 -mb-4 flex flex-col gap-2 border-t border-border bg-gray-20 px-4 py-4">
+                <div className="-mx-4 -mb-4 flex flex-col gap-2 border-t border-border bg-gray-20 px-4 py-4">
                   <p className="text-sm font-medium text-muted-foreground">Your response</p>
                   <RadioGroup
                     value={chosen}

apps/citizen-portal-web/src/components/breadcrumb.tsx

@@ -1,20 +1,24 @@
 import { Link } from '@tanstack/react-router';
-import { ChevronRight } from 'lucide-react';
+import { Icon } from '@mdi/react';
+import { mdiSlashForward } from '@mdi/js';
 
 /** A simple breadcrumb trail. Client-side router links so a crumb click doesn't reload the app. */
 export function Breadcrumb({ trail }: { trail: { label: string; href?: string }[] }) {
   return (
     <nav aria-label="Breadcrumb">
-      <ol className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
+      <ol className="flex flex-wrap items-center gap-2 leading-normal">
         {trail.map((crumb, i) => (
-          <li key={`${crumb.label}-${i}`} className="flex items-center gap-1">
-            {i > 0 ? <ChevronRight className="size-3" aria-hidden /> : null}
+          <li key={`${crumb.label}-${i}`} className="flex items-center gap-2">
+            {i > 0 ? <Icon path={mdiSlashForward} size="16px" aria-hidden={true} /> : null}
             {crumb.href ? (
-              <Link to={crumb.href} className="hover:text-foreground hover:underline">
+              <Link
+                to={crumb.href}
+                className="rounded-sm outline-none hover:text-foreground hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring"
+              >
                 {crumb.label}
               </Link>
             ) : (
-              <span aria-current="page" className="text-foreground">
+              <span aria-current="page" className="font-bold">
                 {crumb.label}
               </span>
             )}