Skip to content

TEST(Dropdown): expose selected multi values to screen readers - #3407

Draft
Mordech wants to merge 1 commit into
masterfrom
cursor/dropdown-selected-items-a11y
Draft

TEST(Dropdown): expose selected multi values to screen readers#3407
Mordech wants to merge 1 commit into
masterfrom
cursor/dropdown-selected-items-a11y

Conversation

@Mordech

@Mordech Mordech commented Jun 11, 2026

Copy link
Copy Markdown
Member

Updates Dropdown multi-select accessibility so selected values are exposed to assistive technologies without using generated Downshift ids as spoken labels.

What changed

  • Adds hidden selected-item summary text for searchable multi-select Dropdowns and connects it via aria-describedby.
  • Keeps the Dropdown field label as the accessible name via aria-labelledby.
  • Stops using generated Downshift label ids as fallback literal aria-label values.
  • Updates the Storybook multi-select example to be searchable with a visible Pokémon label and Pokémon option names.

Verification

  • yarn workspace @vibe/core test src/components/Dropdown/__tests__/Dropdown.test.tsx

  • git diff --check

  • yarn workspace @vibe/core lint (passes with existing warnings)

  • I have read the Contribution Guide for this project.

Resolves #

Made with Cursor

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

Copy link
Copy Markdown
Contributor

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
@vibe/button 17.35KB 17.28KB -75B 🟢
@vibe/clickable 5.96KB 5.97KB +19B 🔺
@vibe/dialog 52.22KB 52.18KB -47B 🟢
@vibe/icon-button 66.1KB 66.08KB -29B 🟢
@vibe/icon 12.89KB 12.87KB -25B 🟢
@vibe/layer 2.96KB 2.96KB 0B ➖
@vibe/layout 9.82KB 9.82KB -6B 🟢
@vibe/loader 5.63KB 5.65KB +13B 🔺
@vibe/tooltip 61.32KB 61.29KB -27B 🟢
@vibe/typography 63.5KB 63.46KB -42B 🟢
Accordion 6.3KB 6.29KB -15B 🟢
AccordionItem 66.53KB 66.46KB -73B 🟢
AlertBanner 70.93KB 70.81KB -124B 🟢
AlertBannerButton 18.79KB 18.78KB -11B 🟢
AlertBannerLink 15.29KB 15.25KB -39B 🟢
AlertBannerText 64KB 63.93KB -72B 🟢
AttentionBox 74.31KB 74.28KB -37B 🟢
Avatar 66.75KB 66.77KB +26B 🔺
AvatarGroup 93.28KB 93.33KB +55B 🔺
Badge 43.22KB 43.21KB -10B 🟢
BreadcrumbItem 64.69KB 64.72KB +26B 🔺
BreadcrumbMenu 68.61KB 68.62KB +6B 🔺
BreadcrumbMenuItem 77.15KB 77.04KB -111B 🟢
BreadcrumbsBar 5.68KB 5.69KB +7B 🔺
ButtonGroup 68.32KB 68.39KB +64B 🔺
Checkbox 66.87KB 66.94KB +70B 🔺
Chips 75.11KB 75.03KB -83B 🟢
ColorPicker 74.45KB 74.43KB -19B 🟢
ColorPickerContent 73.78KB 73.83KB +49B 🔺
Combobox 84.1KB 84.03KB -71B 🟢
Counter 42.19KB 42.23KB +35B 🔺
DatePicker 112.51KB 112.67KB +164B 🔺
Divider 5.45KB 5.44KB -10B 🟢
Dropdown 95.26KB 95.45KB +194B 🔺
EditableHeading 66.59KB 66.65KB +57B 🔺
EditableText 66.48KB 66.54KB +60B 🔺
EmptyState 70.52KB 70.42KB -100B 🟢
ExpandCollapse 66.31KB 66.24KB -70B 🟢
FormattedNumber 5.82KB 5.84KB +14B 🔺
GridKeyboardNavigationContext 4.65KB 4.65KB -4B 🟢
HiddenText 5.4KB 5.39KB -13B 🟢
Info 72.15KB 72.06KB -95B 🟢
Label 68.69KB 68.67KB -25B 🟢
Link 14.89KB 14.88KB -11B 🟢
List 72.98KB 72.87KB -110B 🟢
ListItem 65.5KB 65.53KB +30B 🔺
ListItemAvatar 66.92KB 66.92KB -6B 🟢
ListItemIcon 14.02KB 14.02KB -4B 🟢
ListTitle 65.03KB 65.06KB +32B 🔺
Menu 8.64KB 8.65KB +15B 🔺
MenuDivider 5.56KB 5.56KB -1B 🟢
MenuGridItem 7.16KB 7.19KB +36B 🔺
MenuItem 76.95KB 76.97KB +17B 🔺
MenuItemButton 70.04KB 70.15KB +118B 🔺
MenuTitle 65.39KB 65.27KB -117B 🟢
MenuButton 66.15KB 66.21KB +65B 🔺
Modal 79.11KB 79.13KB +18B 🔺
ModalContent 4.72KB 4.71KB -1B 🟢
ModalHeader 65.86KB 65.79KB -76B 🟢
ModalMedia 7.51KB 7.47KB -37B 🟢
ModalFooter 67.76KB 67.7KB -64B 🟢
ModalFooterWizard 68.69KB 68.61KB -86B 🟢
ModalBasicLayout 8.93KB 8.94KB +3B 🔺
ModalMediaLayout 8.07KB 8.06KB -8B 🟢
ModalSideBySideLayout 6.3KB 6.31KB +12B 🔺
MultiStepIndicator 52.98KB 52.93KB -50B 🟢
NumberField 72.84KB 72.85KB +16B 🔺
ProgressBar 7.32KB 7.34KB +19B 🔺
RadioButton 65.88KB 65.95KB +67B 🔺
Search 70.68KB 70.71KB +25B 🔺
Skeleton 5.99KB 6.01KB +18B 🔺
Slider 73.82KB 73.81KB -15B 🟢
SplitButton 66.52KB 66.53KB +8B 🔺
SplitButtonMenu 8.8KB 8.78KB -23B 🟢
Steps 71.45KB 71.34KB -118B 🟢
Table 7.24KB 7.24KB +2B 🔺
TableBody 66.79KB 66.78KB -15B 🟢
TableCell 65.31KB 65.19KB -132B 🟢
TableContainer 5.31KB 5.32KB +3B 🔺
TableHeader 5.63KB 5.63KB +3B 🔺
TableHeaderCell 72.22KB 72.17KB -46B 🟢
TableRow 5.55KB 5.54KB -5B 🟢
TableRowMenu 68.84KB 68.8KB -37B 🟢
TableVirtualizedBody 71.42KB 71.43KB +8B 🔺
Tab 64.02KB 64.05KB +37B 🔺
TabList 8.9KB 8.85KB -54B 🟢
TabPanel 5.31KB 5.29KB -21B 🟢
TabPanels 5.83KB 5.84KB +6B 🔺
TabsContext 5.48KB 5.51KB +29B 🔺
TextArea 66.37KB 66.39KB +12B 🔺
TextField 69.4KB 69.4KB -5B 🟢
TextWithHighlight 64.4KB 64.26KB -142B 🟢
ThemeProvider 4.36KB 4.36KB -1B 🟢
Tipseen 71.21KB 71.1KB -118B 🟢
TipseenContent 71.72KB 71.71KB -16B 🟢
TipseenMedia 71.36KB 71.38KB +21B 🔺
TipseenWizard 73.92KB 73.86KB -60B 🟢
Toast 74.01KB 74.08KB +64B 🔺
ToastButton 18.6KB 18.61KB +7B 🔺
ToastLink 15.08KB 15.09KB +17B 🔺
Toggle 66.68KB 66.64KB -38B 🟢
TransitionView 5.44KB 5.44KB -4B 🟢
VirtualizedGrid 12.54KB 12.53KB -10B 🟢
VirtualizedList 12.29KB 12.28KB -4B 🟢
List (Next) 8.16KB 8.15KB -10B 🟢
ListItem (Next) 69.88KB 69.94KB +58B 🔺
ListTitle (Next) 65.36KB 65.34KB -16B 🟢

📊 Summary:

  • Total Base Size: 4.75MB
  • Total PR Size: 4.75MB
  • Total Difference: 1.04KB

@Mordech Mordech changed the title fix(Dropdown): expose selected multi values to screen readers TEST(Dropdown): expose selected multi values to screen readers Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant