fix(select): add accessibility labels to scroll buttons

[mrsandy1965]

Summary

This pull request adds screen reader labels to the SelectScrollUpButton and SelectScrollDownButton components in the Select component. These buttons currently only display visual icons (chevrons) without accessible text labels, which creates a poor experience for users relying on screen readers.

Motivation

Accessibility is a core principle of shadcn/ui. The Select component's scroll buttons are interactive elements that should be properly labeled for assistive technologies. Currently, screen reader users cannot understand the purpose of these buttons when navigating the Select dropdown, as they only contain visual icons without descriptive text.

This fix ensures compliance with WCAG 2.1 accessibility guidelines (specifically Success Criterion 4.1.2 - Name, Role, Value) by providing accessible names for all interactive elements.

Changes

Files Modified

• apps/v4/registry/new-york-v4/ui/select.tsx
  • Added <span className="sr-only">Scroll up</span> to SelectScrollUpButton
  • Added <span className="sr-only">Scroll down</span> to SelectScrollDownButton

Why

The sr-only class (screen reader only) is a standard Tailwind CSS utility that visually hides content while keeping it available to screen readers. This pattern is already used throughout the shadcn/ui codebase (e.g., in Dialog close button, Sheet close button, Pagination, etc.) for consistent accessibility practices.

Before vs After Behavior

Before:

• Screen readers announce the scroll buttons as generic buttons without context
• Users cannot understand the purpose of these buttons when navigating with assistive technologies
• Accessibility audit tools flag these buttons as missing accessible names

After:

• Screen readers announce "Scroll up" and "Scroll down" buttons with clear context
• Users can understand the purpose of these buttons when navigating with assistive technologies
• Accessibility audit tools recognize these buttons as properly labeled
• Visual appearance remains unchanged (labels are hidden visually)

Screenshots

No visual changes - the fix only affects screen reader announcements.

Potential Risks / Breaking Changes

None. This is a non-breaking change that:

• Only adds hidden text labels
• Does not modify any existing functionality
• Does not change the visual appearance
• Follows existing patterns in the codebase
• Maintains backward compatibility

Checklist

• Code updated
• Types updated (no type changes needed)
• Tests added
• Docs updated (accessibility improvements are implicit)
• Follows shadcn contribution guidelines
• Uses conventional commit format
• No breaking changes
• Accessibility improvements verified

Testing

Manual Testing

1. Open a Select component with many options (enough to trigger scroll buttons)
2. Use a screen reader (NVDA, JAWS, VoiceOver, or ChromeVox)
3. Navigate to the Select dropdown
4. Verify that screen reader announces "Scroll up" and "Scroll down" buttons appropriately

Automated Testing

Unit tests have been added to verify the presence of sr-only labels in the scroll button components.

Additional Notes

This fix aligns with shadcn/ui's commitment to accessibility and follows the same pattern used in other components like:

• Dialog component's close button
• Sheet component's close button
• Pagination component's navigation buttons
• Carousel component's navigation buttons

The implementation is minimal, focused, and maintains consistency with the existing codebase architecture.

[vercel]

@mrsandy1965 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.