search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.42k stars 285 forks source link

A11y metatip color swatches (+ click to copy to clipboard) #505

Closed hchiam closed 3 years ago

hchiam commented 3 years ago

For #496 demo-1 As a simple fix to side-step contrast issues, I went with a text outline, instead of using mix-blend-mode: difference (which i think could end up with gray on gray). if you'd like, i can look further into how pika dynamically shows just black xor white text depending on the swatch color, which would require fancier js logic. Maybe i could also add some js logic to make the "copied!" message stay a bit longer. lemme know your thoughts! First time contributing to VisBug :)

argyleink commented 3 years ago

oh yeah! and tinycolor is available. you could use it's api to find out if white/black are better (so you dont need all the text shadows), here's the api https://www.npmjs.com/package/@ctrl/tinycolor. you might even be able to get more creative than than black/white, it's a powerful color tool 👍🏻

hchiam commented 3 years ago

demo-2 demo-3

the other 2 things i'll need to look into are simply rearranging the AA, AA+, AAA, AAA+ section and hopefully fix the one failing test

argyleink commented 3 years ago

It's lookin so good! There's 2 remaining questions/tasks before this merges into main (which will cause a build and deploy to the app store!)

  1. ~match the presentation that pika has for the ratio scores. I put ~ in there because I don't think we need to 100% rip the design, like right now visbug is smart enough to choose between AA or AAA. We should keep that, but adopt nice parts of Pika's. thoughts?
  2. figure out how to show aria information and other accessibility meta data that visbug scrapes from elements. it should probably go under the contrast scores? it's an open design task.

you feeling up to these last items? you've done a great set of work here and I don't want to exhaust you! 🙂 how you feelin?

if it's helpful, i could create a design or 2 to show the direction i'm thinking (solve the design task), creating a focused engineering task?

hchiam commented 3 years ago

no worries, it's been fun! a design/mock would be helpful to make sure I'm on track. but yeah, feel free to make a separate branch that i can merge this PR into instead of main, for you to add to. meanwhile i'll think about the design and see how far i get

hchiam commented 3 years ago
sizing+order+alignment
argyleink commented 3 years ago

you've done so much, it looks sooo good 🙂
when you're done, let me know and I'll merge this! I'll create a new PR once I've rounded out some of those remaining design items 👍🏻

I've updated this PRs base to merge into an "ally metatip v2" branch, so i/we can collaborate a bit easier and get it perfect before merging into main 💯

hchiam commented 3 years ago

thanks! Sounds good, go ahead