Render language picker as collapsed by default in markup#7236
Merged
Conversation
changelog: Bug Fixes, Page Layout, Avoid flickering language picker appearance on page load
Contributor
|
Should we pick this onto RC 222 before deploying? |
zachmargolis
approved these changes
Oct 27, 2022
Contributor
Author
Eh, we can, but it's not a huge issue IMO if it's more trouble to cherry-pick. In practice it's a bit of brief flickering on page load. |
zachmargolis
pushed a commit
that referenced
this pull request
Oct 27, 2022
* Collapse language picker by default changelog: Bug Fixes, Page Layout, Avoid flickering language picker appearance on page load * Add spec for language picker accessible relation * Add spec for language options (cherry picked from commit 1b71195)
Contributor
Done, see fe15105 (thanks to |
Merged
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
2 participants
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 of changes
As a follow-on improvement (minor regression fix) to #7188, this updates the language picker component to render as collapsed by default in the initial markup.
While previously the language picker would become collapsed by default, it wouldn't occur until JavaScript had initialized, which could result in some brief flickering of the language picker while the page is loading.
It could be argued that the collapsing should occur in JavaScript in order to support no-JavaScript browsers, however (a) this is not how it behaved prior to #7188 and the changes here seek to restore the original behavior, and (b) due to the styling of the language picker, it's possible for the options to overlap page content in such a way that may worsen the experience for no-JavaScript users. Future work could explore improvements to the no-JavaScript language picker experience.
This also resolves a styling issue where the arrow caret would rely on the presence of
aria-expandedattribute to display the correct icon, which was not assigned previously in markup and would display incorrectly both for no-JavaScript users and until initialization occurred.📜 Testing Plan
👀 Screenshots