Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📱 fix: Resolve Android Device and Accessibility Issues of Sidebar Combobox #3689

Merged
merged 11 commits into from
Aug 18, 2024

Conversation

danny-avila
Copy link
Owner

Summary

The main issue being addressed was a symptom of the stale issue with radix-ui select: radix-ui/primitives#1658

Rather than applying hacky fixes, use of radix-select was abandoned in favor of a more accessible combobox, as it also had a11y issues.

  • Created a new Combobox component (ControlCombobox) with improved a11y and Android device functionality
  • Updated AssistantSwitcher to use the new Combobox component
  • Refactored ModelSwitcher to utilize Combobox for better consistency
  • Improved accessibility by adding aria-labels to select items
  • Enhanced the layout and appearance of the Switcher component
  • Implemented button width calculation for better responsiveness
  • Updated styling for improved visual consistency and user experience
  • Updated the @ariakit/react dependency to version 0.4.8

Other Changes

  • Fixed inconsistent auto-scrolling behavior at message send by setting abortScroll state to false after invoking scrollToEnd

Testing

To test these changes:

  1. Navigate through the application and interact with the AssistantSwitcher and ModelSwitcher components
  2. Verify that the new Combobox functions correctly in both collapsed and expanded states
  3. Test the search functionality within the combobox
  4. Ensure that the components render correctly on different screen sizes
  5. Check that scrolling behavior is smooth and doesn't cause any issues
  6. Test on Android devices to confirm that the Combobox works as expected

Test Configuration:

  • Browser: Latest versions of Chrome, Firefox, and Safari
  • Devices: Desktop, tablet, and mobile (including Android)
  • Screen sizes: Various, from small mobile screens to large desktop displays

@danny-avila danny-avila added the a11y Accessibility label Aug 18, 2024
@danny-avila danny-avila merged commit 87d95a9 into main Aug 18, 2024
2 checks passed
@danny-avila danny-avila deleted the fix/android-select-combobox branch August 18, 2024 23:02
kenshinsamue pushed a commit to intelequia/LibreChat that referenced this pull request Sep 17, 2024
…bobox (danny-avila#3689)

* chore: Update @ariakit/react dependency to version 0.4.8

* refactor: Fix Combobox Android issue with radix-ui

* fix: Improve scrolling behavior by setting abort scroll state to false after scrolling to end

* wip: first pass switcher rewrite

* feat: Add button width calculation for ComboboxComponent

* refactor: Update ComboboxComponent styling for improved layout and appearance

* refactor: Update AssistantSwitcher component to handle null values for assistant names and avatar URLs

* refactor: Update ModelSwitcher component to use SimpleCombobox for improved functionality and styling

* refactor: Update Switcher Separator styling for improved layout and appearance

* refactor: Improve accessibility by adding aria-label to ComboboxComponent select items

* refactor: rename SimpleCombobox -> ControlCombobox
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant