fix(placement): reuse TextColor/BackgroundColor for "AD" link #11540
Conversation
This file contains 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
caugner
changed the title
LeoMcA
approved these changes
Jul 26, 2024
| font-size: 0.625rem; | ||
| margin: 0.5rem; | ||
| opacity: 0.4; |
There was a problem hiding this comment.
I think opacity messes with contrast detection in Firefox's accessibility tools, but I don't see another way since relative colours don't have wide support (not sure why that page doesn't have a BCD table).
There was a problem hiding this comment.
I just checked and it looks like Firefox DevTools Accessibility Tools take the opacity into consideration, i.e. the opacity: 0.4 does not have enough contrast, but it's kind of by design. (Increasing to opacity: 0.8, for example, resolves the displayed Contrast issue.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
(MP-1400)
Problem
#11498 added custom color support for the new sidebar format, but the color of the "AD" link remained hard-coded, which causes contrast issues.
Solution
Reuse
TextColorfor the link background andBackgroundColorfor the link text, while maintaining the current opacity of 40%.Note: The hover effect stays the same, i.e. the opacity is unset and the underline is removed on hover.
Screenshots
How did you test this change?
Ran
yarn devwithREACT_APP_KUMA_HOST=developer.allizom.organd refreshed http://localhost:3000/en-US/docs/Learn/HTML until a placement using the new sidebar format showed up.