UI hardening: Staging Dock a11y, mobile drawer, reduced motion, shared shell

[DHCross]

UI Hardening: Staging Dock, Accessibility, Motion, and Surface Shell

This issue captures the current Raven / Planner / Astro Pages UI hardening pass. The visual redesign is strong, but the interaction layer needs to catch up so the instrument feels as intentional as it looks.

Summary

The current surfaces are strong on:

• mobile scroll behavior
• safe areas
• atmospheric design
• progressive disclosure
• symbolic / operational separation

The weak points are mostly interaction and systemization:

• Staging Dock controls are not yet proper accessible form controls
• mobile drawer behaves visually like a modal but not semantically like one
• reduced motion support is incomplete outside CSS animations
• focus rings are inconsistent on newly polished controls
• Astro section tabs lack proper tab semantics
• shared navigation vocabulary is not fully centralized
• Planner and Astro shells duplicate page chrome
• symbolic read output does not yet hand off cleanly into dock action

P1 — Fix first: user-facing friction and accessibility

1. Make Staging Dock a real form surface

Duration and work-type selectors should not be plain button groups without semantic state.

Tasks:

• Add shared labels for each control group.
• Use role="radiogroup" where the interaction is single-select.
• Use role="radio" + aria-checked, or native radio inputs visually styled as pills.
• If staying with buttons, at minimum add aria-pressed, but radiogroup semantics are preferred for mutually exclusive choices.
• Wire text inputs with id / htmlFor.
• Ensure keyboard navigation is sane: Tab into the group, arrow keys if using true radiogroup pattern, Space/Enter selects.
• Add visible focus-visible treatment matching the chat components.

Acceptance checks:

• Screen reader announces the group label and selected value.
• Keyboard-only user can select duration and work type without losing visible focus.
• No regression to the current visual style.

2. Complete the mobile staging drawer modal behavior

The mobile drawer currently locks body overflow, but it is only half a modal.

Tasks:

• Add role="dialog" and aria-modal="true".
• Add an accessible label via aria-labelledby or aria-label.
• Trap focus inside the drawer while open.
• Close on Escape.
• Return focus to the FAB / opener when closed.
• Prevent background controls from being reachable while drawer is open.

Acceptance checks:

• Opening drawer moves focus inside it.
• Escape closes it.
• Closing returns focus to the opener.
• VoiceOver / screen reader users understand it as a dialog.

3. Honor prefers-reduced-motion in React motion surfaces

CSS celestial animations already honor reduced motion, but motion/react transitions still animate.

Tasks:

• Add a shared reduced-motion hook or utility.
• Apply it to OrientationHome, AstroPagesShell, tab switches, page slides/fades, and any motion/react components.
• Prefer instant state changes or opacity-only minimal transitions when reduced motion is enabled.

Acceptance checks:

• With reduced motion enabled, no slide/fade flourish remains on major route/surface transitions.
• The UI still changes clearly without feeling broken.

4. Normalize focus-visible treatments

Chat controls are better than the newer Planner / Orientation / Astro surfaces.

Tasks:

• Add focus-visible rings to:
  • Planner dock pills
  • Orientation door cards
  • Orientation CTAs
  • Astro tab buttons
  • mobile subnav buttons
  • glossary / metric chips where interactive
• Use a shared class/token if available.

Acceptance checks:

• Keyboard path through each polished surface is visible and consistent.

5. Add tab semantics to Astro Pages section tabs

CosmicSeismograph already does this correctly. Bring the main Bridge / Chart / Archive nav up to that standard.

Tasks:

• Use role="tablist" on the container.
• Use role="tab" on section buttons.
• Add aria-selected.
• Add aria-controls if panels are present.
• Consider roving tabindex if the tab implementation warrants it.

Acceptance checks:

• Screen reader announces tab position and selected state.
• Keyboard interaction is consistent with existing correct CosmicSeismograph tabs.

6. Audit mobile touch targets

Several controls are visually elegant but physically small.

Tasks:

• Audit text-[9px] / text-[10px] controls and py-1 / py-2 pills.
• Raise effective hit area toward 44px where practical.
• Preserve visual compactness by increasing invisible padding if needed.

Acceptance checks:

• Mobile taps feel reliable on subnav, glossary, metric glosses, week strip, and small pills.

P2 — Design system gaps

7. Make SURFACE_NAV the real source of truth

Planner and Astro mobile subnavs still hardcode labels like:

• Chat
• Planner
• Astro Pages
• Vault

Tasks:

• Extract shared SurfaceMobileSubnav.
• Source labels and routes from SURFACE_NAV / surfaceNavLabels.
• Remove duplicated nav vocabulary from Planner and Astro shell files.

Acceptance checks:

• A rename in SURFACE_NAV updates all relevant surface navs.

8. Extract shared surface shell pieces

Planner and Astro duplicate page chrome.

Tasks:

• Extract shared components where the shape is stable:
  • SurfacePageHeader
  • SurfaceMobileSubnav
  • shared breadcrumb/back-link treatment
  • optional surface page chrome wrapper

Do this after the P1 accessibility fixes, not before. Don’t let abstraction delay user-facing repairs.

9. Tokenize typography instead of continuing ad hoc font mixing

The typography is part of the identity, but it is currently under-governed.

Tasks:

• Identify recurring label styles:
  • tiny uppercase labels
  • serif hero statements
  • numeric instrument readouts
  • mono diagnostic captions
• Convert repeated styles into named utility classes or design tokens.
• Avoid adding more one-off tracking-[0.22em] style fragments.

10. Improve loading states for instrument surfaces

Planner loading currently feels too thin for a diagnostic instrument.

Tasks:

• Add skeleton/pulse states for:
  • metric cards
  • today strip / week strip
  • dock controls
  • important numeric readouts
• Keep dock disabled during loading if the data required to stage intelligently is not ready.

Acceptance checks:

• Loading looks structured, not like disconnected text morphing over missing numbers.

11. Scrub remaining vocabulary seams

Clean up small register collisions:

• Place a Block vs Place a block
• Open Woven Map vs Vault
• Calendar sync
• Copy Link

Tasks:

• Centralize strings where possible.
• Decide where plain operational language is acceptable and where symbolic language should carry the surface.
• Avoid corporate/productivity phrases bleeding into the symbolic dock unless deliberately framed.

12. Close the read → action loop

The symbolic read and dock still require the user to translate insight into action manually.

Tasks:

• Make best-task chips or read suggestions capable of pre-selecting dock category/work type.
• Example: tapping “The Forge” on the read side pre-fills the dock’s work type/category.
• Keep the action reversible and visible.

Acceptance checks:

• A user can move from symbolic read to staged block without mentally translating the recommendation into dock settings.

P3 — Longer-term hygiene

13. Reduce page.tsx blast radius

The 11k-line page monolith makes UI evolution risky.

Tasks:

• Extract stable sections gradually.
• Do not attempt a giant rewrite.
• Prioritize components already touched by accessibility fixes.

14. Add route-level loading.tsx / error.tsx

Planner and Astro Pages need route-level fallbacks, not only client fetch state.

15. Add skip link and global toast pattern

Tasks:

• Add a skip link for keyboard users.
• Create a global toast/notice pattern for success/failure feedback.
• Avoid important success states being trapped inside a drawer that just closed.

16. Improve font loading strategy

Tasks:

• Consider next/font.
• Trim unused families.
• Subset where practical.
• Preserve brand feel while improving first paint.

Recommended implementation order

1. Staging Dock accessibility pass.
2. Mobile drawer modal completion.
3. Reduced-motion support for motion/react transitions.
4. Focus-visible normalization.
5. Astro tab semantics.
6. Shared SurfaceMobileSubnav using SURFACE_NAV.
7. Loading skeletons for Planner instrument areas.
8. Read → dock handoff.
9. Vocabulary scrub.
10. Shared surface shell components.
11. Typography tokens.
12. Font loading cleanup.

Guardrails

• This is a hardening pass, not a redesign.
• Preserve the current visual atmosphere.
• Do not sacrifice accessibility for elegance.
• Prefer small, testable diffs.
• Fix user-facing keyboard/screen-reader/motion issues before extracting broad abstractions.

Bottom line

The redesign moved clutter into better places. Now the interaction layer needs to become as intentional as the visual layer.

Start with the Staging Dock and mobile drawer. Those are small diffs with high payoff. Then extract shared navigation and shell components so future surface work stops becoming whack-a-mole.