History mode (#27)

* bump version.

* add sorting of run statistics by impact

* add sorting of run statistics by impact (#17)

* add sorting of run statistics by impact

* fix checkbox layout issues (#18)

* fix checkbox layout issues

* Change mirror (#24)

* Bugfix layout issues (#19)

- add sorting of run statistics by impact (#17)
- fix checkbox layout issues (#18)

---------

Co-authored-by: Sven Kummetz <[email protected]>

* update environment to new axe.min mirro

* remove .idea folder

---------

Co-authored-by: Michael Telgkamp <[email protected]>

* add ability to show and hide results

* add history diff mode

* add prefix to local storage key, fix css minification

---------

Co-authored-by: Michael Telgkamp <[email protected]>

.env

@@ -5,4 +5,4 @@ THEME_NEUTRAL="#323130"
 THEME_NEUTRAL_LIGHT="#656462"
 THEME_NEUTRAL_DARK="#1F1E1D"
 SETTINGS_INFORMATION="<h2>BAAT</h2><div>Bookmarklet Accessibility Audit Tool v@VERSION@</div><p>BAAT is a tool for running automatic accessibility testing scripts directly in the browser and inspecting the results.</p><p>You can find the documentation on the <a href='https://github.com/mindscreen/baat'>BAAT GitHub Page</a>.</p>"
-AXE_MIN_URL="https://cdn.jsdelivr.net/npm/axe-core/axe.min.js"
+AXE_MIN_URL="https://baat.mscr.it/axe.min.js"

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
-intermediate/
+intermediate/
+.idea/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baat",
-  "version": "1.2.1",
+  "version": "1.3-alpha",
   "description": "Axe frontend for running axe-core tests directly in the Browser",
   "main": "index.js",
   "scripts": {

src/config.ts

@@ -3,12 +3,31 @@ export const config = {
     defaultSettings: {
         hiddenTags: [] as string[],
         hiddenImpacts: [ 'moderate', 'minor' ],
+        hiddenResults: [] as string[],
         autorun: false,
+        differenceMode: false,
         developer: false,
         showAdditionalInformation: false,
     },
     size: {
         width: 400,
         height: 650,
     }
-};
+};
+
+export const settingNames = {
+    hiddenTags: 'hiddenTags',
+    hiddenImpacts: 'hiddenImpacts',
+    hiddenResults: 'hiddenResults',
+    autorun: 'autorun',
+    differenceMode: 'differenceMode',
+    developer: 'developer',
+    showAdditionalInformation: 'showAdditionalInformation',
+}
+
+export const localStorageKeys = {
+    coreScript: 'baat_core_script',
+    settings: 'baat_settings',
+    history: 'baat_history',
+    view: 'baat_view',
+}

src/core/BAAT.tsx

@@ -1,10 +1,19 @@
 import { createScript } from '../util/dom'
-import { config } from '../config'
+import {config, localStorageKeys, settingNames} from '../config'
 import { axeExists } from '../util/axe'
 import * as axe from 'axe-core'
-import { AxeRunCompleted, BAATEvent, BAATView, SettingsChanged, ViewChanged, Result, StatusChange } from '../types'
-import { baact } from '../../baact/baact'
+import {
+    AxeRunCompleted,
+    BAATEvent,
+    BAATView,
+    SettingsChanged,
+    ViewChanged,
+    Result,
+    StatusChange,
+    HistoryEntry
+} from '../types'
 import { highlightContainer } from './highlight'
+import {convertViolationToHistoryEntry} from "../util/history";
 
 export class BAAT extends EventTarget {
     private static instance: BAAT;
@@ -21,13 +30,13 @@ export class BAAT extends EventTarget {
         super();
 
         const localStorage = window.localStorage
-        const possibleScript = localStorage.getItem('baat_core_script')
+        const possibleScript = localStorage.getItem(localStorageKeys.coreScript)
 
         try {
-            this.settings = JSON.parse(localStorage.getItem('baat_settings') ?? '{}')
+            this.settings = JSON.parse(localStorage.getItem(localStorageKeys.settings) ?? '{}')
         } catch (e) {}
 
-        this.addEventListener(BAATEvent.ChangeCore, () => { if (this.getSetting('autorun') && axeExists()) { window.setTimeout(() => { this.runAxe() }, 100) }})
+        this.addEventListener(BAATEvent.ChangeCore, () => { if (this.getSetting(settingNames.autorun) && axeExists()) { window.setTimeout(() => { this.runAxe() }, 100) }})
 
         if (possibleScript) {
             this.createScript(possibleScript)
@@ -41,7 +50,7 @@ export class BAAT extends EventTarget {
 
         }
 
-        this._view = BAATView[(localStorage.getItem('baat_view') ?? BAATView.Settings.toString()) as keyof typeof BAATView]
+        this._view = BAATView[(localStorage.getItem(localStorageKeys.view) ?? BAATView.Settings.toString()) as keyof typeof BAATView]
         if (!axeExists()) {
             this._view = BAATView.Settings
         }
@@ -52,7 +61,7 @@ export class BAAT extends EventTarget {
             if (script.includes('axe') && script.endsWith(';')) {
                 new Promise((resolve) => {
                     createScript(script, 'axeScript')
-                    if (writeToStorage) localStorage.setItem('baat_core_script', script)
+                    if (writeToStorage) localStorage.setItem(localStorageKeys.coreScript, script)
                     this.dispatchEvent(new CustomEvent(BAATEvent.ChangeCore, { detail: { source } }))
                     resolve()
                 })
@@ -65,7 +74,7 @@ export class BAAT extends EventTarget {
     unloadAxe() {
         // @ts-ignore
         axe = null
-        localStorage.setItem('baat_core_script', "")
+        localStorage.setItem(localStorageKeys.coreScript, "")
         this.dispatchEvent(new CustomEvent(BAATEvent.ChangeCore, { detail: { source: '' } }))
     }
 
@@ -97,11 +106,28 @@ export class BAAT extends EventTarget {
         }))
 
         new Promise((resolve) => {
-            localStorage.setItem('baat_settings', JSON.stringify(this.settings))
+            localStorage.setItem(localStorageKeys.settings, JSON.stringify(this.settings))
             resolve()
         })
     }
 
+    addHistory(violations: Result[]) {
+        const history = localStorage.getItem(localStorageKeys.history)
+        const historyArray = history ? JSON.parse(history) : []
+        const newEntry: HistoryEntry = convertViolationToHistoryEntry(violations);
+        historyArray.push(newEntry);
+        localStorage.setItem(localStorageKeys.history, JSON.stringify(historyArray))
+    }
+
+    getHistory(): HistoryEntry[] {
+        const history = localStorage.getItem(localStorageKeys.history)
+        return history ? JSON.parse(history) : []
+    }
+
+    clearHistory() {
+        localStorage.setItem(localStorageKeys.history, JSON.stringify([]))
+    }
+
     dispatchStatusEvent(message: string) {
         this.dispatchEvent(new CustomEvent<StatusChange>(BAATEvent.StatusChange, { detail: { message } }))
     }
@@ -135,7 +161,7 @@ export class BAAT extends EventTarget {
                 let violations = results.violations as Result[]
 
                 if (results.violations.length) {
-                    if (this.getSetting('developer'))
+                    if (this.getSetting(settingNames.developer))
                         console.log('violations', violations)
 
                     /*violations.forEach((violation) => {
@@ -151,6 +177,8 @@ export class BAAT extends EventTarget {
 
                 this.dispatchStatusEvent('')
 
+                this.addHistory(violations);
+
                 this.lastResults = violations
                 this.fullReport = results
                 this._hasRun = true;
@@ -165,7 +193,7 @@ export class BAAT extends EventTarget {
     set view(value: BAATView) {
         this._view = value
         this.dispatchEvent(new CustomEvent<ViewChanged>(BAATEvent.ChangeView,{ detail: { view: value }}))
-        localStorage.setItem('baat_view', value.toString())
+        localStorage.setItem(localStorageKeys.view, value.toString())
     }
 
     get hasRun(): boolean {