adds a lookup map to make accessibility reports clickable

Author: philschatz

lib/accessibility-element-view.js

@@ -6,7 +6,8 @@ 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)
@@ -20,11 +21,12 @@ class AccessibilityElementView extends SelectableView {
   render () {
     this.selectorPath.textContent = this.path
 
-    // Add a click-handler that will select the element
+    // Add a click-handler that will select the element.
+    // Uses the `accessibilityAuditMap` defined in accessibility.js
     this.selectorPath.onclick = (evt) => {
       evt.preventDefault()
       chrome.devtools.inspectedWindow.eval(
-        "inspect($$(\"" + this.path.replace('"', '\\"') + "\")[0])",
+        "inspect(window.__devtron.accessibilityAuditMap.get(" + this.pathId + "))",
         function(result, isException) { }
       );
     }

lib/accessibility.js

@@ -4,7 +4,21 @@ exports.audit = () => {
   return Eval.execute(function () {
     const {axs} = window.__devtron
     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,10 @@ exports.audit = () => {
         title: result.rule.heading,
         url: result.rule.url,
         elements: elements.map(function (element) {
-          return window.__devtron.axs.utils.getQuerySelectorText(element)
+          return {
+            selector: window.__devtron.axs.utils.getQuerySelectorText(element),
+            id: element.__accessibilityAuditId
+          }
         })
       }
     }).sort(function (resultA, resultB) {