Improve Accessibility Panel

[philschatz]

Thanks for adding tools to help make electron apps more accessible!

I stumbled upon this while fixing accessibility-developer-tools#291 and as a long-time Atom user/hacker, thought I'd leave this repository a little better off than how I found it.

TODO

• make the results elements clickable so they open in the Element Inspector
  • similar to this example
• use the now-working accessibility-developer-tools module instead of using vendor/axs.js
  • this is non-trivial because accessibility.js uses a private function named axs.utils.getQuerySelectorText(element)

[kevinsawicki]

There is a internal helper that is promise-based instead of callback-based you might want to use here.

https://github.com/electron/devtron/blob/master/lib/eval.js#L4

[philschatz]

Oops, I missed that 😊 . Fixed

[kevinsawicki]

make the results elements clickable so they open in the Element Inspector

This is great 👍

use the now-working accessibility-developer-tools module instead of using vendor/axs.js

Is the path forward here to open up a pull request upstream to make this a public API?

[philschatz]

Thanks!

Yes, that might work but... the method generates selectors for an element and seems to only be used internally to generate error messages.

Before creating an Issue, I thought I'd solicit feedback on an approach that does not require exposing axs.utils.getQuerySelectorText(element).

I just pushed a commit (7f1d782) that is more accurate than relying on a generated CSS selector. It is also similar to how react-devtools solved the same problem.

If that strategy seems convoluted or more difficult to maintain I submitted can submit an Issue to GoogleChrome/accessibility-developer-tools#305

Getting access to the package in the browser

I was unable to get the electron app access to require('accessibility-developer-tools') so instead of the code looking like this:

// This code does not work

exports.audit = () => {
  return Eval.execute(function () {
    // This code is serialized and runs in the browser. 
    // It currently relies on the content_scripts in manifest.json to get access to axs via the window.__devtron.axs global
    const axs = require('accessibility-developer-tools')
    const config = new axs.AuditConfiguration({showUnsupportedRulesWarning: false})

... I added out/browserGlobals.js which is built using browserify and defined in the manifest.json (see ddaa402)

There is probably a better way that I missed, but I could not figure it out.

[kevinsawicki]

I think the filename here should be browser-globals.js to match the naming convention of the other files in this project.

[philschatz]

Oops, 😊 . Fixed!

[kevinsawicki]

Really cool, thanks for this 👍

[kevinsawicki]

Published in 1.4.0 🎉

[zeke]

This seems kinda blog-worthy.