quailjs / quail

Accessibility testing in the browser and on the server.
http://quailjs.org
Other
300 stars 44 forks source link

Reenable the focusIndicatorVisible test in the master branch. #377

Open jessebeach opened 9 years ago

jessebeach commented 9 years ago

Reenable the focusIndicatorVisible test in the master branch.

https://github.com/quailjs/quail/blob/master/lib/assessments/focusIndicatorVisible.js

!! Important !!

You'll need to go into tests.yml and uncomment the focusIndicatorVisible test, then rebuild quail in order for this assessment to be available. Run:

grunt dev
node-debug ./test/assessmentSpecs/testRunner.js -I focusIndicatorVisible

in the CLI, and you're off to the races.

jessebeach commented 9 years ago

In the Mocha test file, you get access to the client and the test results from Quail.

https://github.com/quailjs/quail/blob/master/test/assessmentSpecs/specs/focusIndicatorVisible/focusIndicatorVisibleSpec.js

Presumably, we need to then

  1. look at the results
  2. get the pending cases
  3. get their associated elements
  4. use the client to trigger focus on each one
  5. register a callback for each client action
  6. maybe (?) update the test runner to deal with this new level of async action
  7. assert the styling once the action callback is fired.
mlewand commented 9 years ago

Jesse, are you sure we need all of this? Calling DOM focus() method will in fact apply CSS properly, and the CSS can be retreived e.g. with getComputedStyle. You might check it at focus() + getComputedStyle() demo.

Adding an extra states like peding, will add more complexity to this solution, while we can stick to vanilla JS.

jessebeach commented 9 years ago

haha!

So, this is really silly. Thanks for calling this out. What I was doing, was calling $0.focus() on elements from the Inspector...BUT...if the inspector has focus, then nothing in the page has focus. So calling focus from the inspector, although it sets document.activeElement doesn't appear to change the styling.

I set up a call to focus in setTimeout then moved focus to the page. Sure enough, the styling is triggered on Focus.

Derp derp derp.

mlewand commented 9 years ago

Cool! And you're right, browsers do drop focus presentation the moment you minimize the browser. That makes integration tests for JS so much more painful. :)