# Reference: Interactions, Responsive Design, and Accessibility

> Extracted from goal.md — Interactions, Responsive Strategy, and Accessibility sections.

---

## Interactions and Micro-interactions

### Sidebar Navigation
- Clicking a sidebar item instantly swaps the main content area. No crossfade, no transition — just an immediate swap. This matches clinical system behavior exactly: navigation is instant.
- The active sidebar item updates its left border (3px, NHS blue) and background tint simultaneously, with no animation (instant state change).

### Consultation Expand / Collapse
- Clicking a consultation entry toggles between collapsed and expanded states.
- The expand animation: height grows from 0 to content height over 200ms, ease-out. Content opacity transitions from 0 to 1 over the same duration.
- Only one consultation can be expanded at a time. Expanding a new entry collapses the previous one.
- The expand chevron rotates 180 degrees (pointing up when expanded).

### Medication Row Hover
- Hovering a medication table row changes its background to `#EFF6FF` (subtle blue tint).
- No transform, no elevation change. Just color.

### Table Column Sorting
- Clicking a table column header sorts by that column. An arrow indicator (up/down) appears in the header.
- Clicking the same header again reverses sort direction.
- Sorting is instant (no animation on row reordering).

### Patient Banner Scroll Condensation
- As the user scrolls past 100px of content, the patient banner smoothly transitions from full (80px) to condensed (48px) over 200ms.
- The condensed banner shows only: name, NHS number, status dot, and action buttons.
- Scrolling back to top restores the full banner.
- Uses `position: sticky` with an `IntersectionObserver` to trigger the condensation.

### Alert Acknowledge
- Clicking "Acknowledge" on a clinical alert:
  1. The warning icon cross-fades to a green checkmark (200ms)
  2. After a 200ms hold, the alert's height animates to 0 (200ms, ease-out)
  3. Content below shifts upward to fill the space (same 200ms timing)

### Search
- A search input in the sidebar header ("Search record...") provides fuzzy matching across all PMR sections.
- Typing shows a dropdown of results grouped by section (Consultations, Medications, Problems, etc.).
- Each result shows the section icon, the matching text, and a relevance indicator.
- Pressing Enter or clicking a result navigates to that section with the matching item highlighted/expanded.
- Implementation: fuse.js for fuzzy search across a pre-built index of all content.

### Context Menus
- Right-clicking (desktop) or long-pressing (mobile) on certain elements reveals a context menu:
  - On a consultation entry: "Expand", "Copy to clipboard", "View coded entries"
  - On a medication row: "View prescribing history", "Copy to clipboard"
  - On a problem entry: "View linked consultations", "Copy to clipboard"
- Context menus styled: white background, `1px solid #E5E7EB` border, 4px radius, `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`. Items in [UI font] 400, 14px, 36px row height.

### Login Screen Typing
- The username types character-by-character at a natural reading pace (80ms per character).
- The password dots appear at a deliberate pace (60ms per dot).
- A blinking cursor appears in the active field (530ms blink interval).
- After typing completes, the "Log In" button becomes clearly interactive (full opacity, hover state). The user clicks it to proceed — this is NOT auto-triggered.
- On click, the button shows a brief pressed state before the interface materializes.

---

## Responsive Strategy

### Desktop (>1024px)
The full PMR experience. This is the design's primary target — clinical systems are desktop applications.
- Sidebar: 220px, always visible, dark blue-gray
- Patient banner: full width, 80px height, condensing to 48px on scroll
- Main content: fills remaining width (no max-width constraint)
- Tables: full column display, alternating row colors, sort controls
- Consultations: full History/Examination/Plan expanded view
- Search: integrated in sidebar header

### Tablet (768-1024px)
Sidebar collapses to icon-only mode (56px width). Hovering or tapping an icon shows the label as a tooltip.
- Patient banner: condensed to single-line format always (no full/condensed toggle)
- Main content: nearly full width
- Tables: may horizontally scroll if columns exceed available width
- Context menus: triggered by long-press instead of right-click

### Mobile (<768px)
The sidebar becomes a **bottom navigation bar** with 7 icon buttons.

**Bottom nav layout:**
```
[Summary] [Consult] [Meds] [Problems] [Invest] [Docs] [Refer]
```

Each icon from Lucide, 20px, with the active item highlighted in NHS blue with a label below. Height: 56px with safe area padding.

**Patient banner on mobile:** Minimal top bar: `CHARLWOOD, A (Mr) | 2211810 | (dot)` — action buttons collapse into "..." overflow menu.

**Content adaptations:**
- Tables switch to card layout: each row becomes a small card with fields stacked vertically
- Consultation entries: tap-to-expand pattern with larger tap targets (48px minimum height)
- Medications: table becomes stacked card list
- Referral form: full-width inputs, generous touch targets
- Search: moves to top of each view as a search bar

**Back navigation:** Each view has a back arrow returning to Summary.

### Breakpoint Summary

| Element | Desktop (>1024) | Tablet (768-1024) | Mobile (<768) |
|---------|-----------------|-------------------|---------------|
| Sidebar | 220px, full labels | 56px, icons only | Bottom nav bar |
| Patient banner | 80px full / 48px sticky | 48px always | Minimal top bar |
| Tables | Full columns, horizontal | Scroll if needed | Card layout (stacked) |
| Search | Sidebar header | Sidebar header | Top of each view |
| Context menus | Right-click | Long-press | Long-press |

---

## Accessibility

### Semantic HTML
- Sidebar: `<nav role="navigation" aria-label="Clinical record navigation">` with `<ul>` and `<li>` items. Active item uses `aria-current="page"`.
- Patient banner: `<header role="banner">` containing patient demographics.
- Main content area: `<main>` element with `aria-label` matching the current view name.
- Tables: Proper `<table>`, `<thead>`, `<th>`, `<tbody>`, `<tr>`, `<td>` markup. Column headers use `scope="col"`.
- Consultation entries: `<article>` elements with `<button>` for expand/collapse, `aria-expanded` attribute.

### Keyboard Navigation
- `Tab` moves between: sidebar items, patient banner buttons, main content interactive elements
- `ArrowUp` / `ArrowDown` within the sidebar moves between navigation items (roving tabindex)
- `Enter` / `Space` on sidebar items activates that view
- `Enter` / `Space` on consultation entries toggles expand/collapse
- `Alt+1` through `Alt+7` directly activates sidebar items
- `Escape` closes expanded items, context menus, and search dropdown
- Search input focusable with `/` key

### Screen Reader Experience
1. After login, announces: "Patient Record for Charlwood, Andrew. Summary view."
2. Clinical alert announced via `role="alert"`: full alert text
3. Tables announced with column headers
4. Expandable items announce expanded/collapsed state
5. Breadcrumb uses `<nav aria-label="Breadcrumb">`

### Alert Accessibility
- Uses `role="alert"` and `aria-live="assertive"`
- Acknowledge button: `aria-label="Acknowledge clinical alert"`
- Removal is smooth (element removes from accessibility tree)

### Focus Management
- After login: focus moves to first sidebar item (Summary)
- After navigating to new view: focus moves to first heading in main content
- After expanding consultation: focus moves to HISTORY heading
- After closing context menu: focus returns to trigger element
- After acknowledging alert: focus moves to main content first interactive element

### Color and Contrast
- All text meets WCAG 2.1 AA contrast requirements
- Traffic lights never sole communicator — always with text labels
- NHS blue on white: ~7.3:1 contrast ratio
- Amber alert text on amber bg: ~5.8:1 contrast ratio

### Motion Preferences
When `prefers-reduced-motion: reduce`:
- Login typing completes instantly
- Alert appears without slide
- Expand/collapse is instant
- Banner condensation is instant
- Hover background-color changes remain
