add ability to highlight specific violations via URL parameters

.env

@@ -5,4 +5,5 @@ THEME_NEUTRAL="#323130"
 THEME_NEUTRAL_LIGHT="#656462"
 THEME_NEUTRAL_DARK="#1F1E1D"
 AXE_MIN_URL="https://tools.caat.report/axe-core/axe.min.js"
-AXE_LOCALE_URL="https://tools.caat.report/axe-core/locales/i18n('baat.lang').json"
+AXE_LOCALE_URL="https://tools.caat.report/axe-core/locales/i18n('baat.lang').json"
+BAAT_HOMEPAGE_URL="https://tools.caat.report/baat/"

extras/userscript-header.js

@@ -5,6 +5,21 @@
 // @description  Run axe-core from the browser
 // @author       Mindscreen GmbH
 // @match        *://*/*
-// @grant        none
+// @grant        GM_registerMenuCommand
+// @homepage     <%= homepage %>
 // ==/UserScript==
 
+(function() {
+    'use strict';
+
+    function run() {
+// baat
+    }
+
+    GM_registerMenuCommand('Run BAAT', run);
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('baat-show-id')) {
+        run();
+    }
+})();

gulpfile.js

@@ -7,6 +7,7 @@ const gulpHtmlI18n = require('gulp-html-i18n');
 const {nodeResolve} = require('@rollup/plugin-node-resolve')
 const externalGlobals = require("rollup-plugin-external-globals")
 const { default: minifyHTML } = require('rollup-plugin-minify-html-literals')
+const through2 = require('through2')
 const header = require('gulp-header')
 const footer = require('gulp-footer')
 const pkg = require('./package.json')
@@ -97,11 +98,23 @@ gulp.task('rollup-userscript', function () {
                 {
                     file: 'userscript.js',
                     name: 'baat',
-                    format: 'iife',
+                    format: 'es',
                 },
             ],
         }))
-        .pipe(header(fs.readFileSync('extras/userscript-header.js', 'utf8'), {version: pkg.version}))
+        .pipe(through2.obj(function (file, enc, cb) {
+            const template = fs.readFileSync('extras/userscript-header.js', 'utf8')
+                .replace('<%= version %>', pkg.version)
+                .replace('<%= homepage %=>', String(process.env.BAAT_HOMEPAGE_URL));
+            const bundledCode = file.contents.toString()
+                .split('\n')
+                .map(line => line ? '        ' + line : line)
+                .join('\n');
+            file.contents = Buffer.from(
+                template.replace('// baat', bundledCode)
+            );
+            cb(null, file);
+        }))
         .pipe(gulp.dest('./intermediate/bundled/'));
 });
 gulp.task('rollup-bookmarklet', function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baat",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Bookmarklet for running axe-core tests directly in the Browser",
   "main": "index.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "gulp-uglify": "^3.0.2",
     "rollup-plugin-external-globals": "^0.6.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
+    "through2": "^4.0.2",
     "typescript": "^4.4.3"
   },
   "dependencies": {

src/config.ts

@@ -31,4 +31,9 @@ export const localStorageKeys = {
     settings: 'baat_settings',
     history: 'baat_history',
     view: 'baat_view',
+}
+
+export const urlParams = {
+    id: 'baat-show-id',
+    target: 'baat-show-target',
 }

src/core/translate.ts

@@ -1,6 +1,6 @@
 import * as axe from 'axe-core';
 
-export const translateImpact = (impact: axe.ImpactValue) : string => {
+export const translateImpact = (impact: axe.ImpactValue | 'none') : string => {
     switch (impact) {
         case 'critical': return "i18n('baat.impact.critical')";
         case 'serious': return "i18n('baat.impact.serious')";

src/elements/Accordion/Accordion.tsx

@@ -114,7 +114,7 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
         }
     }
 
-    static get observedAttributes(): (keyof IAccordionAccessor)[] { return [ 'folded', 'fixed', 'nestedRoot', 'textColor' ] }
+    static get observedAttributes(): (keyof IAccordionAccessor)[] { return [ 'folded', 'fixed', 'nestedRoot', 'textColor', 'color' ] }
 
     constructor() {
         super()

src/elements/NodeResultLink/NodeResultLink.tsx

@@ -7,7 +7,7 @@ import { removeAllChildren } from '../../util/dom'
 import { baatSymbol } from '../../core/BAAT'
 import { BAATEvent, HighlightElement, SettingsChanged } from '../../types'
 import { Icon } from '../Icon/Icon'
-import { settingNames } from "../../config";
+import {settingNames, urlParams} from '../../config';
 import { getElementFromNodeResult, getNameFromNodeResult } from '../../util/axe';
 
 const padding = `${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller}`;
@@ -39,6 +39,9 @@ const styles = css`
     button:hover {
         background-color: ${theme.palette.grayLight};
     }
+    button.highlighted {
+        background-color: ${theme.palette.none};
+    }
 `
 
 interface INodeLinkAccessor {
@@ -75,6 +78,15 @@ export class NodeResultLink extends BaseHTMLElement<INodeLinkAccessor> implement
         this.buttonRef.value.appendChild(<Icon width="16" height="16"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4.65"><circle cx="24" cy="24" r="16.3"/><path d="m24 2.5v11"/><path d="m24 35v10.5"/><path d="m45.5 24h-10.5"/><path d="m13.5 24h-11"/></g></Icon>)
 
         this.buttonRef.value.appendChild(document.createTextNode(name))
+
+        const searchParams = new URLSearchParams(window.location.search);
+        const target = typeof this.result?.target[0] === 'string'
+            ? this.result.target[0]
+            : "";
+
+        if (searchParams.has(urlParams.target) && searchParams.get(urlParams.target) === target) {
+            this.buttonRef.value.classList.add('highlighted')
+        }
     }
 
     initialize() {

src/elements/Violation/Violation.tsx

@@ -6,17 +6,16 @@ import { css } from '../../util/taggedString'
 import { theme } from '../../theme'
 import { baact, createRef } from '../../../baact/baact'
 import { Accordion } from '../Accordion/Accordion'
-import { NodeResult, Result } from '../../types'
+import {BAATEvent, HighlightElement, NodeResult, Result} from '../../types';
 import { hideHighlight, showHighlight } from '../../core/highlight'
 import { Icon } from '../Icon/Icon'
 import { baatSymbol } from "../../core/BAAT";
-import { settingNames } from "../../config";
+import {settingNames, urlParams} from '../../config';
 import { getElementFromNodeResult, getNameFromNodeResult, transformInfoToHTMLLists } from '../../util/axe';
 import { isHidden } from '../../util/dom';
 import { partition } from '../../util/array';
 import { link } from '../../styles/link';
-import {capitlizeFirstLetter} from '../../util/string';
-import {translateImpact} from '../../core/translate';
+import { translateImpact } from '../../core/translate';
 
 const padding = `${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller}`;
 
@@ -107,6 +106,9 @@ const styles = css`
     #hideButton {
         margin-top: 1.25rem;
     }
+    .highlighted {
+        background-color: ${theme.palette.grayLight};
+    }
 `;
 
 interface IViolationAccessor {
@@ -133,6 +135,7 @@ export class Violation extends BaseHTMLElement<IViolationAccessor> implements IV
     private infoRef = createRef<HTMLDivElement>()
     private highlightTitleRef = createRef<HTMLHeadingElement>()
     private otherTitleRef = createRef<HTMLHeadingElement>()
+    private accordionRef = createRef<Accordion>()
 
     attributeChangedCallback<T extends keyof IViolationAccessor>(name: T, oldValue: IViolationAccessor[T], newValue: IViolationAccessor[T]) {
         switch (name) {
@@ -161,7 +164,7 @@ export class Violation extends BaseHTMLElement<IViolationAccessor> implements IV
             this.infoRef.value.innerHTML = '';
         } else {
             this.titleRef.value.innerText = this.result.help;
-            this.impactRef.value.innerText = translateImpact(this.result.impact);
+            this.impactRef.value.innerText = translateImpact(this.result.impact ?? 'none');
             this.impactRef.value.className = "chip "+this.result.impact;
             this.descriptionRef.value.innerText = this.result.description;
 
@@ -190,6 +193,31 @@ export class Violation extends BaseHTMLElement<IViolationAccessor> implements IV
             if (this.result.helpUrl && this.result.helpUrl !== "") {
                 this.linkRef.value.innerHTML = `<h3>i18n('baat.violation.helpForError')</h3><a href="${this.result.helpUrl}" target="_blank" rel="noreferrer">${this.result.id} i18n('baat.violation.onDequeUniversity')</a>`
             }
+
+            const searchParams = new URLSearchParams(window.location.search);
+            if (searchParams.has(urlParams.id) && searchParams.get(urlParams.id) === this.result.id) {
+                this.accordionRef.value.setAttribute('folded', false);
+                window.setTimeout(() => {
+                    this.accordionRef.value.scrollIntoView();
+                }, 0);
+                this.accordionRef.value.focus();
+                this.accordionRef.value.setAttribute('color', theme.palette.none);
+
+                const result = (searchParams.has(urlParams.target) &&
+                    linkedResults.find((result) => {
+                        const target = typeof result.target[0] === 'string'
+                            ? result.target[0]
+                            : "";
+                        return target === searchParams.get(urlParams.target)
+                    })) ||
+                    linkedResults[0];
+
+                const element = getElementFromNodeResult(result)
+
+                if (element) {
+                    window[baatSymbol].dispatchEvent(new CustomEvent<HighlightElement>(BAATEvent.HighlightElement, {detail: {element: element}}));
+                }
+            }
         }
     }
 
@@ -205,7 +233,7 @@ export class Violation extends BaseHTMLElement<IViolationAccessor> implements IV
         }
 
         this.shadowRoot?.appendChild(
-            <Accordion id='container' onChange={handleFoldChange}>
+            <Accordion id='container' onChange={handleFoldChange} ref={this.accordionRef}>
                 <div id='heading' slot={Accordion.slots.heading}>
                     <div>
                         <h2 id='title' ref={this.titleRef} lang="en"></h2>

testing/index.html

@@ -52,8 +52,14 @@
             langSelect.value = lang;
             langSelect.ariaLabel = 'BAAT Language';
 
+            const searchParams = new URLSearchParams(window.location.search)
+            if (!searchParams.has('baat-show-id'))
+                window.history.replaceState({}, '', `?baat-show-id=empty`);
+
             document.getElementById('controls').appendChild(langSelect);
         });
+
+        function GM_registerMenuCommand() {}
     </script>
     <body>
         <div id="controls">