FEAT: Value selector component #67
Description
User Story
In order to use a consistent and accessible UI building block
As a customer or content manager
I want to select a specific value (such as a size or product option) from a clear, interactive group of choices.
Acceptance Criteria
- All available options are clearly rendered and visible to the user.
- The currently selected value is visually distinct from the unselected options.
- Selection updates immediately upon user interaction (click or keyboard).
- Keyboard Support: Users can navigate between options using the Tab key and select a value using arrows.
- Accessibility (Group): The selector group is identified by an
aria-labelor linked to a visible label viaaria-labelledby. - Accessibility (Options): Each individual option has a visible label or an internal
aria-label; the chosen option correctly manages thearia-selected="true"attribute. - Component state (value) updates correctly and can be consumed by parent components/callbacks.
- Looks and works consistent across all supported browsers and devices.
- Can be viewed and manipulable in Storybook.
Background & Resources
https://demo.shopin.dev/storybook/?path=/story/selectors-value--default