fix(a11y): size external link icon based on browser/OS font-size - #12336
Open
SethFalco wants to merge 1 commit into
Open
fix(a11y): size external link icon based on browser/OS font-size#12336SethFalco wants to merge 1 commit into
SethFalco wants to merge 1 commit into
Conversation
When the client is configured to use a different font-size than the default (i.e. on the OS or in browser settings) the external link icon became disproportionately sized relative to the text. This converts the hardcodes pixel values to rem.
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
See commit message(s)!
Pre-flight checklist
Motivation
I recently tested SVGO.dev with different font-sizes via the OS and browser settings to see how it'd behave.
Ideally anything that depends on the font-size should be sized relative to the font-size (
em/rem), and anything that isn't can use any other unit (%/vw/px/etc.).The external link icon on Docusaurus didn't behave as I expected. I believe this is an example of something that should be based on font-size. Do you see any issue with using
reminstead ofpx?The numbers I used are not the prettiest (as in the code, the UI looks fine), because I wanted the UI to look identical on the default font-size. But I can ofc round them if you'd prefer, though that would leave a subtle visual difference!
Screenshots
To demonstrate this, I'll include screenshots of your footer:
Normal / Default will look identical between before and after. Before the icon didn't scale with font-size, so in Extra Small it looks quite large, and on Extra Large it looked quite small. Now, it always looks proportionate to the text the icon is accompanying.
Test Plan
Test links
Deploy preview: https://deploy-preview-12336--docusaurus-2.netlify.app/
Related issues/PRs
N/A