1# Interaction Design
2 
3## The Eight Interactive States
4 
5Every interactive element needs these states designed:
6 
7| State | When | Visual Treatment |
8|-------|------|------------------|
9| **Default** | At rest | Base styling |
10| **Hover** | Pointer over (not touch) | Subtle lift, color shift |
11| **Focus** | Keyboard/programmatic focus | Visible ring (see below) |
12| **Active** | Being pressed | Pressed in, darker |
13| **Disabled** | Not interactive | Reduced opacity, no pointer |
14| **Loading** | Processing | Spinner, skeleton |
15| **Error** | Invalid state | Red border, icon, message |
16| **Success** | Completed | Green check, confirmation |
17 
18**The common miss**: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states.
19 
20## Focus Rings: Do Them Right
21 
22**Never `outline: none` without replacement.** It's an accessibility violation. Instead, use `:focus-visible` to show focus only for keyboard users:
23 
24```css
25/* Hide focus ring for mouse/touch */
26button:focus {
27  outline: none;
28}
29 
30/* Show focus ring for keyboard */
31button:focus-visible {
32  outline: 2px solid var(--color-accent);
33  outline-offset: 2px;
34}
35```
36 
37**Focus ring design**:
38- High contrast (3:1 minimum against adjacent colors)
39- 2-3px thick
40- Offset from element (not inside it)
41- Consistent across all interactive elements
42 
43## Form Design: The Non-Obvious
44 
45**Placeholders aren't labels.** They disappear on input. Always use visible `<label>` elements. **Validate on blur**, not on every keystroke (exception: password strength). Place errors **below** fields with `aria-describedby` connecting them.
46 
47## Loading States
48 
49**Optimistic updates**: Show success immediately, rollback on failure. Use for low-stakes actions (likes, follows), not payments or destructive actions. **Skeleton screens > spinners**: they preview content shape and feel faster than generic spinners.
50 
51## Modals: The Inert Approach
52 
53Focus trapping in modals used to require complex JavaScript. Now use the `inert` attribute:
54 
55```html
56<!-- When modal is open -->
57<main inert>
58  <!-- Content behind modal can't be focused or clicked -->
59</main>
60<dialog open>
61  <h2>Modal Title</h2>
62  <!-- Focus stays inside modal -->
63</dialog>
64```
65 
66Or use the native `<dialog>` element:
67 
68```javascript
69const dialog = document.querySelector('dialog');
70dialog.showModal();  // Opens with focus trap, closes on Escape
71```
72 
73## The Popover API
74 
75For tooltips, dropdowns, and non-modal overlays, use native popovers:
76 
77```html
78<button popovertarget="menu">Open menu</button>
79<div id="menu" popover>
80  <button>Option 1</button>
81  <button>Option 2</button>
82</div>
83```
84 
85**Benefits**: Light-dismiss (click outside closes), proper stacking, no z-index wars, accessible by default.
86 
87## Dropdown & Overlay Positioning
88 
89Dropdowns rendered with `position: absolute` inside a container that has `overflow: hidden` or `overflow: auto` will be clipped. This is the single most common dropdown bug in generated code.
90 
91### CSS Anchor Positioning
92 
93The modern solution uses the CSS Anchor Positioning API to tether an overlay to its trigger without JavaScript:
94 
95```css
96.trigger {
97  anchor-name: --menu-trigger;
98}
99 
100.dropdown {
101  position: fixed;
102  position-anchor: --menu-trigger;
103  position-area: block-end span-inline-end;
104  margin-top: 4px;
105}
106 
107/* Flip above if no room below */
108@position-try --flip-above {
109  position-area: block-start span-inline-end;
110  margin-bottom: 4px;
111}
112```
113 
114Because the dropdown uses `position: fixed`, it escapes any `overflow` clipping on ancestor elements. The `@position-try` block handles viewport edges automatically. **Browser support**: Chrome 125+, Edge 125+. Not yet in Firefox or Safari - use a fallback for those browsers.
115 
116### Popover + Anchor Combo
117 
118Combining the Popover API with anchor positioning gives you stacking, light-dismiss, accessibility, and correct positioning in one pattern:
119 
120```html
121<button popovertarget="menu" class="trigger">Open</button>
122<div id="menu" popover class="dropdown">
123  <button>Option 1</button>
124  <button>Option 2</button>
125</div>
126```
127 
128The `popover` attribute places the element in the **top layer**, which sits above all other content regardless of z-index or overflow. No portal needed.
129 
130### Portal / Teleport Pattern
131 
132In component frameworks, render the dropdown at the document root and position it with JavaScript:
133 
134- **React**: `createPortal(dropdown, document.body)`
135- **Vue**: `<Teleport to="body">`
136- **Svelte**: Use a portal library or mount to `document.body`
137 
138Calculate position from the trigger's `getBoundingClientRect()`, then apply `position: fixed` with `top` and `left` values. Recalculate on scroll and resize.
139 
140### Fixed Positioning Fallback
141 
142For browsers without anchor positioning support, `position: fixed` with manual coordinates avoids overflow clipping:
143 
144```css
145.dropdown {
146  position: fixed;
147  /* top/left set via JS from trigger's getBoundingClientRect() */
148}
149```
150 
151Check viewport boundaries before rendering. If the dropdown would overflow the bottom edge, flip it above the trigger. If it would overflow the right edge, align it to the trigger's right side instead.
152 
153### Anti-Patterns
154 
155- **`position: absolute` inside `overflow: hidden`** - The dropdown will be clipped. Use `position: fixed` or the top layer instead.
156- **Arbitrary z-index values** like `z-index: 9999` - Use a semantic z-index scale: `dropdown (100) -> sticky (200) -> modal-backdrop (300) -> modal (400) -> toast (500) -> tooltip (600)`.
157- **Rendering dropdown markup inline** without an escape hatch from the parent's stacking context. Either use `popover` (top layer), a portal, or `position: fixed`.
158 
159## Destructive Actions: Undo > Confirm
160 
161**Undo is better than confirmation dialogs.** Users click through confirmations mindlessly. Remove from UI immediately, show undo toast, actually delete after toast expires. Use confirmation only for truly irreversible actions (account deletion), high-cost actions, or batch operations.
162 
163## Keyboard Navigation Patterns
164 
165### Roving Tabindex
166 
167For component groups (tabs, menu items, radio groups), one item is tabbable; arrow keys move within:
168 
169```html
170<div role="tablist">
171  <button role="tab" tabindex="0">Tab 1</button>
172  <button role="tab" tabindex="-1">Tab 2</button>
173  <button role="tab" tabindex="-1">Tab 3</button>
174</div>
175```
176 
177Arrow keys move `tabindex="0"` between items. Tab moves to the next component entirely.
178 
179### Skip Links
180 
181Provide skip links (`<a href="#main-content">Skip to main content</a>`) for keyboard users to jump past navigation. Hide off-screen, show on focus.
182 
183## Gesture Discoverability
184 
185Swipe-to-delete and similar gestures are invisible. Hint at their existence:
186 
187- **Partially reveal**: Show delete button peeking from edge
188- **Onboarding**: Coach marks on first use
189- **Alternative**: Always provide a visible fallback (menu with "Delete")
190 
191Don't rely on gestures as the only way to perform actions.
192 
193---
194 
195**Avoid**: Removing focus indicators without alternatives. Using placeholder text as labels. Touch targets <44x44px. Generic error messages. Custom controls without ARIA/keyboard support.
196