Completed login screen transition, and started the spec work on design file info
This commit is contained in:
@@ -0,0 +1,162 @@
|
||||
# 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 Inter 400, 14px, 36px row height.
|
||||
|
||||
### Login Screen Typing
|
||||
- The username types character-by-character (30ms per character).
|
||||
- The password dots appear faster (20ms per dot).
|
||||
- A blinking cursor appears in the active field (530ms blink interval).
|
||||
- The "Log In" button shows a brief active/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
|
||||
Reference in New Issue
Block a user