Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-css/8elhoc1su |
auareyou
approved these changes
Jul 1, 2020
Contributor
auareyou
left a comment
auareyou
left a comment
There was a problem hiding this comment.
Love your solution for the changes graph! <3
vdepizzol
reviewed
Sep 8, 2020
| &:focus { | ||
| text-decoration: none; | ||
| border-bottom-color: $border-gray-dark; | ||
| outline: 1px dotted transparent; // Support Firfox custom colors |
Contributor
There was a problem hiding this comment.
@simurai doesn't adding outline-color: transparent to the :focus state break accessibility in all other browsers or when users don't use custom colors?
This was referenced Jan 8, 2023
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
3 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.
A few more accessibility improvements to the component refresh before releasing it as Primer CSS
15.0.0.1. Increase contrast for
$text-greengreen-500green-600#28a745#22863a3.13❌4.63✅2. Increase contrast for placeholders
Overriding the
opacity: 0.54toopacity: 1will make sure the$text-gray-lightis opaque and the contrast ratio should now be4.82(recommendation is4.5). Improves https://github.com/github/github/issues/1318942.06❌4.82✅3. More accessible
.ProgresscomponentThis makes sure the
.Progressbar is visible when enabling custom colors in Firefox. Improves https://github.com/github/github/issues/131895. The transparent outline/border won't be visible by default. But when custom colors are enabled in Firefox, it will make the outline/border the same color as the text color. And they magically appear. ✨4. More accessible
.StatecomponentSame as above ☝️ .
5. More accessible
.CountercomponentSame as above ☝️ .
6. More accessible
.diffstatcomponentSame as above ☝️ .
7. More accessible
.btncomponent when focusedSame as above ☝️ . Improves https://github.com/github/github/issues/131885
8. More accessible
.UnderlineNavcomponentSame as above ☝️ .