2.0 KiB
Purpose
Define the requirements for a floating, accessible theme switcher notch anchored to the right side of the viewport.
Requirements
Requirement: Floating theme switcher notch
The site MUST provide a floating theme switcher control anchored to the right side of the viewport.
The control MUST be positioned below the primary navigation bar and MUST leave sufficient vertical space for secondary navigation.
Scenario: Notch positioned below header
- WHEN the page loads
- THEN the theme switcher notch is visible on the right side and does not overlap the sticky header or sub-navigation
Requirement: Notch interaction and animation
The notch MUST provide a hover affordance (a small, tasteful animation) that indicates it is interactive.
The hover animation MUST be disabled or substantially reduced under prefers-reduced-motion: reduce.
Scenario: Hover animation present
- WHEN a pointer user hovers the notch
- THEN the notch animates in a way that suggests it can be expanded or interacted with
Scenario: Reduced motion disables hover animation
- WHEN
prefers-reduced-motion: reduceis set - THEN hovering the notch does not trigger a noticeable animation
Requirement: Theme selection UI
The notch MUST expose the three theme options (dark, light, high-contrast) and allow the user to select one.
The control MUST be keyboard accessible:
- it MUST be reachable via
Tab - it MUST have a visible focus indicator
- selection MUST be possible using keyboard input
Scenario: Keyboard selects theme
- WHEN a keyboard user focuses the notch and selects
high-contrast - THEN the site updates to the
high-contrasttheme and the selection is persisted
Requirement: Accessibility labels
The notch and theme options MUST have accessible labels.
Scenario: Screen reader announces theme switcher
- WHEN a screen reader user focuses the theme switcher control
- THEN it announces an appropriate label (e.g., "Theme" or "Theme switcher") and the currently selected theme