From 3b07f0affd18dd89bcd050e89f76f60b73952996 Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Mon, 26 Sep 2016 19:40:29 -0400 Subject: [PATCH 1/7] click to inspect the element from accessibility report --- lib/accessibility-element-view.js | 9 +++++++++ static/devtron.css | 7 +++++++ static/index.html | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/accessibility-element-view.js b/lib/accessibility-element-view.js index b8af706..de308b6 100644 --- a/lib/accessibility-element-view.js +++ b/lib/accessibility-element-view.js @@ -19,6 +19,15 @@ class AccessibilityElementView extends SelectableView { render () { this.selectorPath.textContent = this.path + + // Add a click-handler that will select the element + this.selectorPath.onclick = (evt) => { + evt.preventDefault() + chrome.devtools.inspectedWindow.eval( + "inspect($$(\"" + this.path.replace('"', '\\"') + "\")[0])", + function(result, isException) { } + ); + } } filter (searchText) { diff --git a/static/devtron.css b/static/devtron.css index 5c9d1de..8284887 100644 --- a/static/devtron.css +++ b/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; } diff --git a/static/index.html b/static/index.html index 8e12752..d4fd3ee 100644 --- a/static/index.html +++ b/static/index.html @@ -90,7 +90,7 @@ - + From 7f1d782f41b9c9756c09e93bc12aace16e9259f2 Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Tue, 27 Sep 2016 21:18:07 -0400 Subject: [PATCH 2/7] adds a lookup map to make accessibility reports clickable --- lib/accessibility-element-view.js | 8 +++++--- lib/accessibility.js | 21 +++++++++++++++++++-- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/lib/accessibility-element-view.js b/lib/accessibility-element-view.js index de308b6..41b95fd 100644 --- a/lib/accessibility-element-view.js +++ b/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) { } ); } diff --git a/lib/accessibility.js b/lib/accessibility.js index 80b6f0f..1122f64 100644 --- a/lib/accessibility.js +++ b/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) { From 0faef96a34e1da93d99990be1eaf3e3bb3d0527a Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Tue, 27 Sep 2016 21:30:08 -0400 Subject: [PATCH 3/7] fixup! click to inspect the element from accessibility report --- lib/accessibility-element-view.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/accessibility-element-view.js b/lib/accessibility-element-view.js index 41b95fd..b2db147 100644 --- a/lib/accessibility-element-view.js +++ b/lib/accessibility-element-view.js @@ -1,6 +1,7 @@ 'use strict' const SelectableView = require('./selectable-view') +const Eval = require('./eval') class AccessibilityElementView extends SelectableView { constructor (element, parent) { @@ -25,10 +26,7 @@ class AccessibilityElementView extends SelectableView { // Uses the `accessibilityAuditMap` defined in accessibility.js this.selectorPath.onclick = (evt) => { evt.preventDefault() - chrome.devtools.inspectedWindow.eval( - "inspect(window.__devtron.accessibilityAuditMap.get(" + this.pathId + "))", - function(result, isException) { } - ); + Eval.execute(`inspect(window.__devtron.accessibilityAuditMap.get(${this.pathId}))`) } } From 9d0c9803a3bf25fabec65de66c04109042b02ecf Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Wed, 28 Sep 2016 11:22:06 -0400 Subject: [PATCH 4/7] fixup! click to inspect the element from accessibility report --- lib/accessibility-element-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/accessibility-element-view.js b/lib/accessibility-element-view.js index b2db147..f4b5581 100644 --- a/lib/accessibility-element-view.js +++ b/lib/accessibility-element-view.js @@ -25,7 +25,7 @@ class AccessibilityElementView extends SelectableView { // Add a click-handler that will select the element. // Uses the `accessibilityAuditMap` defined in accessibility.js this.selectorPath.onclick = (evt) => { - evt.preventDefault() + evt.stopPropagation() Eval.execute(`inspect(window.__devtron.accessibilityAuditMap.get(${this.pathId}))`) } } From d3e361c6c2149959809ae4637b01f90da69cf572 Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Wed, 28 Sep 2016 11:25:11 -0400 Subject: [PATCH 5/7] use accessibility-developer-tools instead of vendor version --- lib/accessibility.js | 8 +- manifest.json | 2 +- package.json | 1 + vendor/axs.js | 2284 ------------------------------------------ 4 files changed, 8 insertions(+), 2287 deletions(-) delete mode 100644 vendor/axs.js diff --git a/lib/accessibility.js b/lib/accessibility.js index 1122f64..5f73ac2 100644 --- a/lib/accessibility.js +++ b/lib/accessibility.js @@ -2,7 +2,7 @@ const Eval = require('./eval') exports.audit = () => { return Eval.execute(function () { - const {axs} = window.__devtron + const {axs} = window const config = new axs.AuditConfiguration({showUnsupportedRulesWarning: false}) const results = axs.Audit.run(config) @@ -33,8 +33,12 @@ exports.audit = () => { title: result.rule.heading, url: result.rule.url, elements: elements.map(function (element) { + let selector = element.tagName.toLowerCase() + if (element.className) { + selector += '.' + element.className.split(' ').join('.') + } return { - selector: window.__devtron.axs.utils.getQuerySelectorText(element), + selector: selector, id: element.__accessibilityAuditId } }) diff --git a/manifest.json b/manifest.json index ef4c62a..b7ebd0d 100644 --- a/manifest.json +++ b/manifest.json @@ -5,7 +5,7 @@ "content_scripts": [ { "matches": ["*"], - "js": ["vendor/axs.js"] + "js": ["node_modules/accessibility-developer-tools/dist/js/axs_testing.js"] } ] } diff --git a/package.json b/package.json index 63c7dd0..8da4890 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/vendor/axs.js b/vendor/axs.js deleted file mode 100644 index 2df078e..0000000 --- a/vendor/axs.js +++ /dev/null @@ -1,2284 +0,0 @@ -/* - * Copyright 2016 Google Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * Generated from http://github.com/GoogleChrome/accessibility-developer-tools/tree/582ba71c124ed834d640ce2109dcd91b7864922f - * - * See project README for build steps. - */ - -// AUTO-GENERATED CONTENT BELOW: DO NOT EDIT! See above for details. - -window.__devtron = window.__devtron || {} - -window.__devtron.axs = (function() { - var COMPILED = !0, goog = goog || {}; -goog.global = this; -goog.isDef = function(a) { - return void 0 !== a; -}; -goog.exportPath_ = function(a, b, c) { - a = a.split("."); - c = c || goog.global; - a[0] in c || !c.execScript || c.execScript("var " + a[0]); - for (var d;a.length && (d = a.shift());) { - !a.length && goog.isDef(b) ? c[d] = b : c = c[d] ? c[d] : c[d] = {}; - } -}; -goog.define = function(a, b) { - var c = b; - COMPILED || (goog.global.CLOSURE_UNCOMPILED_DEFINES && Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_UNCOMPILED_DEFINES, a) ? c = goog.global.CLOSURE_UNCOMPILED_DEFINES[a] : goog.global.CLOSURE_DEFINES && Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_DEFINES, a) && (c = goog.global.CLOSURE_DEFINES[a])); - goog.exportPath_(a, c); -}; -goog.DEBUG = !0; -goog.LOCALE = "en"; -goog.TRUSTED_SITE = !0; -goog.STRICT_MODE_COMPATIBLE = !1; -goog.provide = function(a) { - if (!COMPILED) { - if (goog.isProvided_(a)) { - throw Error('Namespace "' + a + '" already declared.'); - } - delete goog.implicitNamespaces_[a]; - for (var b = a;(b = b.substring(0, b.lastIndexOf("."))) && !goog.getObjectByName(b);) { - goog.implicitNamespaces_[b] = !0; - } - } - goog.exportPath_(a); -}; -goog.setTestOnly = function(a) { - if (COMPILED && !goog.DEBUG) { - throw a = a || "", Error("Importing test-only code into non-debug environment" + a ? ": " + a : "."); - } -}; -goog.forwardDeclare = function(a) { -}; -COMPILED || (goog.isProvided_ = function(a) { - return !goog.implicitNamespaces_[a] && goog.isDefAndNotNull(goog.getObjectByName(a)); -}, goog.implicitNamespaces_ = {}); -goog.getObjectByName = function(a, b) { - for (var c = a.split("."), d = b || goog.global, e;e = c.shift();) { - if (goog.isDefAndNotNull(d[e])) { - d = d[e]; - } else { - return null; - } - } - return d; -}; -goog.globalize = function(a, b) { - var c = b || goog.global, d; - for (d in a) { - c[d] = a[d]; - } -}; -goog.addDependency = function(a, b, c) { - if (goog.DEPENDENCIES_ENABLED) { - var d; - a = a.replace(/\\/g, "/"); - for (var e = goog.dependencies_, f = 0;d = b[f];f++) { - e.nameToPath[d] = a, a in e.pathToNames || (e.pathToNames[a] = {}), e.pathToNames[a][d] = !0; - } - for (d = 0;b = c[d];d++) { - a in e.requires || (e.requires[a] = {}), e.requires[a][b] = !0; - } - } -}; -goog.ENABLE_DEBUG_LOADER = !0; -goog.require = function(a) { - if (!COMPILED && !goog.isProvided_(a)) { - if (goog.ENABLE_DEBUG_LOADER) { - var b = goog.getPathFromDeps_(a); - if (b) { - goog.included_[b] = !0; - goog.writeScripts_(); - return; - } - } - a = "goog.require could not find: " + a; - goog.global.console && goog.global.console.error(a); - throw Error(a); - } -}; -goog.basePath = ""; -goog.nullFunction = function() { -}; -goog.identityFunction = function(a, b) { - return a; -}; -goog.abstractMethod = function() { - throw Error("unimplemented abstract method"); -}; -goog.addSingletonGetter = function(a) { - a.getInstance = function() { - if (a.instance_) { - return a.instance_; - } - goog.DEBUG && (goog.instantiatedSingletons_[goog.instantiatedSingletons_.length] = a); - return a.instance_ = new a; - }; -}; -goog.instantiatedSingletons_ = []; -goog.DEPENDENCIES_ENABLED = !COMPILED && goog.ENABLE_DEBUG_LOADER; -goog.DEPENDENCIES_ENABLED && (goog.included_ = {}, goog.dependencies_ = {pathToNames:{}, nameToPath:{}, requires:{}, visited:{}, written:{}}, goog.inHtmlDocument_ = function() { - var a = goog.global.document; - return "undefined" != typeof a && "write" in a; -}, goog.findBasePath_ = function() { - if (goog.global.CLOSURE_BASE_PATH) { - goog.basePath = goog.global.CLOSURE_BASE_PATH; - } else { - if (goog.inHtmlDocument_()) { - for (var a = goog.global.document.getElementsByTagName("script"), b = a.length - 1;0 <= b;--b) { - var c = a[b].src, d = c.lastIndexOf("?"), d = -1 == d ? c.length : d; - if ("base.js" == c.substr(d - 7, 7)) { - goog.basePath = c.substr(0, d - 7); - break; - } - } - } - } -}, goog.importScript_ = function(a) { - var b = goog.global.CLOSURE_IMPORT_SCRIPT || goog.writeScriptTag_; - !goog.dependencies_.written[a] && b(a) && (goog.dependencies_.written[a] = !0); -}, goog.writeScriptTag_ = function(a) { - if (goog.inHtmlDocument_()) { - var b = goog.global.document; - if ("complete" == b.readyState) { - if (/\bdeps.js$/.test(a)) { - return !1; - } - throw Error('Cannot write "' + a + '" after document load'); - } - b.write('