Accessible Progress #1089
Merged
Accessible Progress #1089
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
simurai
requested review from
jonrohan,
a team and
emilybrick
and removed request for
a team
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-css/7u3agv9e7 |
jonrohan
approved these changes
May 19, 2020
There was a problem hiding this comment.
Implementation wise 👍🏻
I like the idea of the min-width on the sections, but I'd be curious to what @emilybrick thinks.
| .Progress-item + .Progress-item { | ||
| // stylelint-disable-next-line primer/spacing | ||
| margin-left: 2px; | ||
| } |
There was a problem hiding this comment.
I like how simple this solution is. If only we could do flex gap now. 😩
emilybrick
approved these changes
May 20, 2020
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.
This PR improves accessibility of the
Progresscomponent by adding a2pxgap between multiple values.Why
This makes it easier to see different values that have similar colors.
Alternatives
If there are a lot of very small values, like
0.1%, they might not be visible and it just shows some empty space towards the end:An option would be to show every value with a
min-widthof2px. So that they all show up. Downside it that it makes the values look different than they actually are, so for now this is not included in this PR.API changes
.Progress-itemclass needs to be added for Progress with multiple valuesCloses #1079