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: Improve Accessibility in Endpoints Menu/Navigation #5123

Merged
merged 3 commits into from
Dec 28, 2024

Conversation

danny-avila
Copy link
Owner

Summary

I improved the accessibility and localization of the navigation components by updating roles, focus management, and text localization.

  • Localized link titles in the Nav component by applying the localize function to link.title.
  • Updated text colors in the Nav component for better readability and accessibility.
  • Changed the role of endpoint menu items to option and added aria-selected attributes for improved screen reader support.
  • Added up/down arrow key focus management in the EndpointsMenu and ModelSpecsMenu components to enhance keyboard navigation.
  • Ensured the "Set API Key" button is focusable and accessible by adding tabIndex, aria-label, and handling keyboard events.
  • Prevented the mobile navigation toggle from being focusable when not in mobile view.
  • Added TypeScript types to the <NavToggle /> component for better type safety and maintainability.

Change Type

  • Bug fix (non-breaking change which fixes an issue)

Testing

To test these changes, I:

  • Navigated through the application using the keyboard to ensure that focus management works as expected.
  • Used a screen reader to verify that all interactive elements have appropriate roles and labels.
  • Tested the navigation components on both mobile and desktop views to confirm that the mobile nav toggle is only focusable in mobile view.
  • Checked that link titles are correctly localized when switching between different languages.
  • Verified that text colors meet accessibility contrast standards for better readability.

Checklist

  • My code adheres to this project's style guidelines
  • I have performed a self-review of my own code
  • I have commented in any complex areas of my code
  • I have made pertinent documentation changes
  • My changes do not introduce new warnings
  • I have written tests demonstrating that my changes are effective or that my feature works
  • Local unit tests pass with my changes
  • Any changes dependent on mine have been merged and published in downstream modules.

@danny-avila danny-avila added the a11y Accessibility label Dec 28, 2024
@danny-avila danny-avila merged commit a423eb8 into main Dec 28, 2024
2 checks passed
@danny-avila danny-avila deleted the fix/a11y-minor-issues branch December 28, 2024 17:58
owengo pushed a commit to openwengo/LibreChat that referenced this pull request Jan 21, 2025
…a#5123)

* fix: prevent mobile nav toggle from being focusable when not in mobile view, add types to <NavToggle/>

* fix: appropriate endpoint menu item role, add up/down focus mgmt, ensure set api key is focusable and accessible

* fix: localize link titles and update text color for improved accessibility in Nav component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility
Projects
None yet
1 participant