root
2.3 KiB
Interaction Notes
Navigation
Anchor navigation updates the URL hash and lands the target below the sticky header using scroll-margin-block-start. Locale switching preserves only hashes listed for the route. Mobile navigation closes after an internal destination activates. Focus is returned only when the close action does not immediately navigate.
Drawer
closed → opening → open → closing → closed. Opening stores the active element, sets aria-expanded=true, reveals backdrop, makes page landmarks inert, locks body scroll without layout shift, and focuses the close control. Tab and Shift+Tab remain inside. Escape and backdrop close unless a nested blocking dialog is active.
Dialogs
Use native <dialog> when browser support and QA pass; otherwise use a proven accessible primitive. The trigger regains focus on close. Backdrop click is permitted when the form is idle. During submission, closing requires an explicit cancel decision so an in-flight request is not silently duplicated.
Demo validation
Validation occurs on submit, then on change/blur for fields that are already invalid. A form summary uses role=alert or an announced live region. First invalid field receives focus after the summary is updated. Native input semantics remain. Email syntax validation is deliberately modest; the server remains authoritative.
Theme
Apply preference immediately. Persist cookie and storage in one transaction. Broadcast changes through the storage event. In System mode, respond to prefers-color-scheme changes. Never animate the entire page between themes.
Product tour
Opening starts at step one. Back is disabled on the first step. Next becomes Finish on the last. Step heading receives programmatic focus after each change. Progress text is localized and announced politely. Completion does not imply a video was watched.
FAQ
Native details/summary is the baseline. Multiple items may remain open. Do not introduce accordion exclusivity without a content reason and a new decision.
Analytics
Events are emitted through a vendor-neutral adapter after consent. Event payloads contain route, locale, resolved theme, direction, component/source ID, and non-PII state. Form field values and free text are forbidden. Development logs must be disabled in production.