Get proper contrast when hovering over svg

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.48k stars 289 forks source link

Get proper contrast when hovering over svg #388

Closed adhrinae closed 5 years ago

adhrinae commented 5 years ago

Resolve #384

For the node which has fill or stroke (possibly path tag) attribute, use that value first.
Otherwise use color attribute instead.
If the mouseover target node is SVG, hide a11y tooltip.

I assumed calling getStyle function 3 times might be better than calling getStyles and checking attributes(fill, stroke, color) at once for performance perspective.

Since SVG node doesn't have any attribute related to the color, I think an a11y tooltip for svg doesn't have to appear.

argyleink commented 5 years ago

sick work, here's your PR deployed to glitch for testing/QA https://svg-contrast.glitch.me

also, made a quick gif of me using it

svg-contrast

Works great! I'll do a code review here soon

argyleink commented 5 years ago

before i accept and merge, do you have interest in writing tests for the feature you implemented?

adhrinae commented 5 years ago

Sure! I'll try for that.

argyleink commented 5 years ago

cool!

here's a few resources to help ya (and you can always ping me too)

getting started: https://github.com/GoogleChromeLabs/ProjectVisBug/wiki/Testing
a healthy example to kick you off: https://github.com/GoogleChromeLabs/ProjectVisBug/blob/master/app/features/guides.test.js

adhrinae commented 5 years ago

I've written some tests focusing on color contrast values. Perhaps I can write more tests for the a11y tool later, like checking aria-* properties, etc.

adhrinae commented 5 years ago

About my testing challenge experience

Wiki was just a little bit helpful. only for npm commands. I already knew how good ava & puppeteer are.
I have an experience writing UI tests (not e2e tho), however, to a person who has never written tests It is quite hard to write tests only referencing this wiki.
During testing, My main issue was the testing environment. It's a headless chrome so that I couldn't see how things are going on. as I mentioned the comment by LOC.
But puppeteer offers enough amounts of APIs for testing. so I had fun with reading API docs and trying them.
I recommend to list up 'good testing tips' in the wiki. like-
- links to ava & puppeteer API docs
- commonly used helper functions in tests
- how to grab the DOM node I want exactly
- escape hatch (visual testing, like the script I wrote above)

adhrinae commented 5 years ago

@argyleink hey 👋 I understand you've been busy, so here's a gentle reminder for this PR. Please let me know if there's anything I should do more.

argyleink commented 5 years ago

yes, thanks for the nudge, you rock!