feat: Additional Language Selector updates and fixes#3534
Open
brandonlenz wants to merge 3 commits into
Open
Conversation
…s USWDS more closely: * Close on blur * Close on escape * Update click listener container condition so that clicking "outside" the element in Safari still works * Update tests to use userEvent across the board
* Use the id to allow unique ids for multiple language selectors on a single page * Do not recompute the className in LanguageSelectorDropdown
brandonlenz
commented
Jul 8, 2026
| expect(getByTestId(languages[0].attr)).not.toBeVisible() | ||
| }) | ||
|
|
||
| it('closes the list when an outside click handler stops propagation', async () => { |
Contributor
Author
There was a problem hiding this comment.
This test validates and confirms the { capture: true } addition to the click event listener
brandonlenz
commented
Jul 8, 2026
Comment on lines
-77
to
-83
| const classes = classnames( | ||
| 'usa-language-container', | ||
| { | ||
| [`usa-language--small`]: small !== undefined, | ||
| }, | ||
| className | ||
| ) |
Contributor
Author
There was a problem hiding this comment.
This was previously repeated twice. Now just passing the classes in from LanguageSelector
brandonlenz
commented
Jul 8, 2026
Comment on lines
+107
to
+108
| onBlur={closeOnFocusOut} | ||
| onKeyDown={closeOnEscape} |
Contributor
Author
There was a problem hiding this comment.
For the additional ways that the USWDS LanguageSelector closes
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Was reviewing #3528, which works and looks great. It did cause me to deep dive on the USWDS implementation, which I noticed has additional close conditions we were not capturing:
So I added those.
There was also weird behavior in Safari that I just happened to stumble on. Safari does not focus the element on click, and our click listener to close the modal was pinned to the container div (which spans horizontally across the screen). So in Safari, if you were to click next to the language selector, it would not close. The USWDS implementation works in Safari just fine, so I updated the click event listener to match their implementation more closely and look for clicks outside of the button itself.
While updating the tests, also moved us from fireEvent to userEvent to take care of a little tech debt there.
Finally, the language-options dropdown previously had a static
id, meaning that if (for whatever reason) someone included 2 language selectors on a single page, they'd run into some potential issues not being able to set unique ids. Now, if an id is passed to the LanguageSelector, the dropdown will use the id as a prefix.Related Issues or PRs
#3528
How To Test
Added unit tests
Tested via storybook. Importantly, in Safari
Author & Maintainer checklist
idchange could be in rare circumstances where someone was passing an id and relying on the hardcoded dropdown optionsid, but I'm going to make a judgment call and call this non-breaking still.