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

Replace locale selector on login page with RcDropdown component #13487

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

rak-phillip
Copy link
Member

@rak-phillip rak-phillip commented Feb 22, 2025

Summary

This replaces the locale selector on the login page with the RcDropdown component.

Fixes #13486

Occurred changes and/or fixed issues

  • Replace locale selector on the login page with RcDropdown component
  • Add ability to focus last item when pressing up on the keyboard after opening menu with the mouse

Technical notes summary

This is a fairly straightforward transfer of the custom dropdown menu to RcDropdown. I opted to use RcDropdown instead of the props-driven RcDropdownMenu component because the existing implementation requires less refactoring for the component-driven approach.

Areas or cases that should be tested

  • Locale selector

Areas which could experience regressions

  • Locale selector

Pay attention to any accessibility enhancements that might have been previously made in recent PRs. We do not want to regress in these areas.

Screenshot/Video

locale-selector-03
locale-selector-02
locale-selector-01

Checklist

  • The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
  • The PR has a Milestone
  • The PR template has been filled out
  • The PR has been self reviewed
  • The PR has a reviewer assigned
  • The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
  • The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

@rak-phillip
Copy link
Member Author

This requires #13485 to fix the keyboard focus behavior when opening the menu with a mouse.

:flip="false"
:container="false"
@focus.capture="openLocaleSelector"
<rc-dropdown v-if="showLocale">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be using the new action drop down?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My reasons for taking this approach are in the description. I chose the component-driven approach because the existing implementation of the locale selector more closely matches this pattern and requires less refactoring.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could potentially replace the implementation in this PR with the new action menu after #13505 merges.

@rak-phillip rak-phillip force-pushed the task/language-dropdown branch 2 times, most recently from e428779 to 414f1e2 Compare February 25, 2025 15:50
Because the locale selector is located at the bottom of the login page, it feels more natural to use the `up` key to select an item after opening the menu with the mouse. The default behavior when opening the menu with the keyboard will remain unchanged.

Signed-off-by: Phillip Rak <[email protected]>
@rak-phillip rak-phillip force-pushed the task/language-dropdown branch from 414f1e2 to 414c5d8 Compare February 25, 2025 22:27
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.

Replace locale selector on login page with dropdown menu
2 participants