43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
## ADDED 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: reduce` is 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-contrast` theme 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
|