Get proper contrast when hovering over svg (#388)

* get fill & stroke colors for checking a11y of svg

* hide a11y tooltip when mouseover svg node

* check whether element can have fill & stroke for real

* change variable name to `foreground` to go with `background`

* add test cases for a11y tool

* fix unchnaged variables causing error

* get coordinates in test based on target element

app/features/accessibility.js

@@ -34,7 +34,8 @@ export function Accessibility() {
 const mouseMove = e => {
   const target = deepElementFromPoint(e.clientX, e.clientY)
 
-  if (isOffBounds(target) || target.nodeName === 'VISBUG-ALLYTIP' || target.hasAttribute('data-allytip')) { // aka: mouse out
+  if (isOffBounds(target) || target.nodeName.toUpperCase() === 'SVG' ||
+      target.nodeName === 'VISBUG-ALLYTIP' || target.hasAttribute('data-allytip')) { // aka: mouse out
     if (state.active.tip) {
       wipe({
         tip: state.active.tip,
@@ -151,23 +152,26 @@ const render = (el, tip = document.createElement('visbug-ally')) => {
 const determineColorContrast = el => {
   // question: how to know if the current node is actually a black background?
   // question: is there an api for composited values?
-  const text      = getStyle(el, 'color')
+  const foreground = el instanceof SVGElement
+    ? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
+    : getStyle(el, 'color')
+
   const textSize  = getWCAG2TextSize(el)
 
   let background  = getComputedBackgroundColor(el)
 
   const [ aa_contrast, aaa_contrast ] = [
-    isReadable(background, text, { level: "AA", size: textSize.toLowerCase() }),
-    isReadable(background, text, { level: "AAA", size: textSize.toLowerCase() })
+    isReadable(background, foreground, { level: "AA", size: textSize.toLowerCase() }),
+    isReadable(background, foreground, { level: "AAA", size: textSize.toLowerCase() })
   ]
 
   return `
     <span prop>Color contrast</span>
     <span value contrast>
       <span style="
         background-color:${background};
-        color:${text};
-      ">${Math.floor(readability(background, text)  * 100) / 100}</span>
+        color:${foreground};
+      ">${Math.floor(readability(background, foreground)  * 100) / 100}</span>
     </span>
     <span prop>› AA ${textSize}</span>
     <span value style="${aa_contrast ? 'color:green;' : 'color:red'}">${aa_contrast ? '✓' : '×'}</span>

app/features/accessibility.test.js

@@ -0,0 +1,62 @@
+import test from 'ava'
+import { setupPptrTab, teardownPptrTab, getActiveTool, changeMode } from '../../tests/helpers'
+
+test.beforeEach(setupPptrTab)
+
+const contrastValueSelector = `document.querySelector('visbug-ally').$shadow.querySelector('span[contrast]').textContent.trim()`
+
+test('Can be activated', async t => {
+  const {page} = t.context;
+  await changeMode({page, tool: 'accessibility'})
+
+  t.is(await getActiveTool(page), 'accessibility')
+  t.pass()
+})
+
+test('Can reveal color contrasts between html nodes and backgrounds', async t => {
+  const {page} = t.context;
+  await changeMode({page, tool: 'accessibility'})
+
+  await page.hover('.google-blue')
+  const blueContrastValue = await page.evaluate(contrastValueSelector)
+  t.is(blueContrastValue, "3.56")
+  t.pass()
+
+
+  await page.hover('.google-red')
+  const redContrastValue = await page.evaluate(contrastValueSelector)
+  t.is(redContrastValue, "4.29")
+  t.pass()
+
+  await page.hover('.google-yellow')
+  const yellowContrastValue = await page.evaluate(contrastValueSelector)
+  t.is(yellowContrastValue, "1.84")
+  t.pass()
+})
+
+test('Does not show a11y tooltip on <svg> node', async t => {
+  const {page} = t.context;
+  await changeMode({page, tool: 'accessibility'})
+
+  const svgEl = await page.$('svg')
+  const {x, y} = await svgEl.boundingBox()
+  await page.mouse.click(x + 1, y + 1) // an empty space of the first svg element
+  const targetNodeName = await page.$eval('visbug-label', el => el.$shadow.querySelector('a[node]') .textContent)
+  t.is(targetNodeName, 'svg')
+  t.pass()
+
+  t.is(await page.$('visbug-ally'), null)
+  t.pass()
+})
+
+test('Gets fill or stroke value first if the target is one of svg elements', async t => {
+  const {page} = t.context;
+  await changeMode({page, tool: 'accessibility'})
+
+  await page.hover('svg')
+  const pathContrastValue = await page.evaluate(contrastValueSelector)
+  t.not(pathContrastValue, "10.44")
+  t.pass()
+})
+
+test.afterEach(teardownPptrTab)