Atlas/Showcase

Demo Pages

OverviewAuthDataFormFlagsObservabilityA11y & ThemeConsent
Demo Mode

Data is mocked and in-memory only.

A11y & Theme Demo

Demonstrates accessibility patterns and theming with light/dark/system modes.

Theme Selection
Toggle between light, dark, and system themes

Current Theme

Preference: system → Resolved: light

light
Or use the built-in toggle:
Keyboard Navigation
Use arrow keys to navigate between items. Try Tab, Arrow keys, Home, and End.

Keyboard shortcuts:

  • ↑ ↓ - Navigate up/down
  • ← → - Navigate left/right
  • Home - Go to first
  • End - Go to last
Focus Visible States
Tab through these elements to see focus rings. They only appear on keyboard navigation.

Notice how the focus ring only appears when using keyboard navigation (Tab), not on mouse click. This is the focus-visible pattern.

Accessible Modal
Modal with focus trap, keyboard dismissal, and ARIA attributes
  • Focus is trapped inside the modal
  • Escape closes the modal
  • Focus returns to trigger on close
  • Proper role and ARIA attributes
Semantic Patterns
Correct usage of buttons vs links based on their purpose

✓ Button for actions

Triggers JavaScript action, no navigation

✓ Link for navigation

Go to Demo Home

Navigates to a URL, can be opened in new tab

✗ Anti-pattern

Don't use <div onClick> or <span onClick> for interactive elements. They lack keyboard support and ARIA semantics.