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.