Improve Accessibility Panel

lib/accessibility-element-view.js

@@ -1,12 +1,14 @@
 'use strict'
 
 const SelectableView = require('./selectable-view')
+const Eval = require('./eval')
 
 class AccessibilityElementView extends SelectableView {
   constructor (element, parent) {
     super('element-row')
 
-    this.path = element
+    this.path = element.selector
+    this.pathId = element.id
     parent.appendChild(this.element)
     this.render()
     this.handleEvents(parent)
@@ -19,6 +21,13 @@ class AccessibilityElementView extends SelectableView {
 
   render () {
     this.selectorPath.textContent = this.path
+
+    // Add a click-handler that will select the element.
+    // Uses the `accessibilityAuditMap` defined in accessibility.js
+    this.selectorPath.onclick = (evt) => {
+      evt.stopPropagation()
+      Eval.execute(`inspect(window.__devtron.accessibilityAuditMap.get(${this.pathId}))`)
+    }
   }
 
   filter (searchText) {

lib/accessibility.js

@@ -2,9 +2,23 @@ const Eval = require('./eval')
 
 exports.audit = () => {
   return Eval.execute(function () {
-    const {axs} = window.__devtron
+    const {axs} = window.__devtron // defined in browser-globals.js
     const config = new axs.AuditConfiguration({showUnsupportedRulesWarning: false})
-    return axs.Audit.run(config).map(function (result) {
+    const results = axs.Audit.run(config)
+
+    // Create a lookup map so users can click on an element to inspect it
+    let idCounter = 0
+    window.__devtron.accessibilityAuditMap = new Map()
+    results.forEach(function (result) {
+      const elements = result.elements || []
+      elements.forEach(function (element) {
+        const id = idCounter++
+        element.__accessibilityAuditId = id
+        window.__devtron.accessibilityAuditMap.set(id, element)
+      })
+    })
+
+    return results.map(function (result) {
       const elements = result.elements || []
       let status = 'N/A'
       if (result.result === 'PASS') {
@@ -19,7 +33,14 @@ exports.audit = () => {
         title: result.rule.heading,
         url: result.rule.url,
         elements: elements.map(function (element) {
-          return window.__devtron.axs.utils.getQuerySelectorText(element)
+          let selector = element.tagName.toLowerCase()
+          if (element.className) {
+            selector += '.' + element.className.split(' ').join('.')
+          }
+          return {
+            selector: selector,
+            id: element.__accessibilityAuditId
+          }
         })
       }
     }).sort(function (resultA, resultB) {

lib/browser-globals.js

@@ -0,0 +1,8 @@
+// This defines globals that will be used in the browser context
+// (via the content_scripts definition in manifest.json)
+//
+// It is generated via `npm run-script prepublish`
+const axs = require('accessibility-developer-tools')
+
+window.__devtron = window.__devtron || {}
+window.__devtron.axs = axs

manifest.json

@@ -5,7 +5,7 @@
   "content_scripts": [
     {
       "matches": ["*"],
-      "js": ["vendor/axs.js"]
+      "js": ["out/browser-globals.js"]
     }
   ]
 }

package.json

@@ -4,8 +4,8 @@
   "description": "Electron DevTools Extension",
   "main": "./api.js",
   "scripts": {
-    "prepublish": "browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js",
-    "start": "watchify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js --verbose",
+    "prepublish": "browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js && browserify lib/browser-globals.js -o out/browser-globals.js",
+    "start": "browserify lib/browser-globals.js -o out/browser-globals.js && watchify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js --verbose",
     "test": "mocha test/unit/*-test.js test/integration/*-test.js && standard"
   },
   "repository": {
@@ -39,6 +39,7 @@
     "watchify": "^3.7.0"
   },
   "dependencies": {
+    "accessibility-developer-tools": "^2.11.0",
     "highlight.js": "^9.3.0",
     "humanize-plus": "^1.8.1"
   },

static/devtron.css

@@ -130,6 +130,13 @@ tbody:focus,
   padding-left: 45px;
 }
 
+.row-element-path a {
+  cursor: pointer;
+}
+tr.active .row-element-path a {
+  color: white;
+}
+
 .active .sidebar-icon {
   background-color: white;
 }

static/index.html

@@ -90,7 +90,7 @@
         <td></td>
         <td></td>
         <td class="row-element-path">
-          <span data-field="selectorPath"></span>
+          <a data-field="selectorPath" href="#"></a>
         </td>
       </tr>
     </template>