From ad30fe9461e8f31b7258e877ae7771829f530eb3 Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 19:53:09 +0200
Subject: [PATCH 1/8] feat: add additional audits for accessibility and
 usability checks

Co-authored-by: Copilot <copilot@github.com>
---
 src/view/frontend/web/css/toolbar.css         | 28 +++++++--
 src/view/frontend/web/js/toolbar/audits.js    | 20 ++++++
 .../js/toolbar/audits/buttons-without-type.js | 37 +++++++++++
 .../web/js/toolbar/audits/duplicate-ids.js    | 62 +++++++++++++++++++
 .../js/toolbar/audits/empty-interactive.js    | 52 ++++++++++++++++
 .../frontend/web/js/toolbar/audits/index.js   | 17 ++++-
 .../web/js/toolbar/audits/multiple-h1.js      | 41 ++++++++++++
 .../js/toolbar/audits/small-touch-targets.js  | 55 ++++++++++++++++
 .../js/toolbar/audits/unsafe-blank-target.js  | 43 +++++++++++++
 src/view/frontend/web/js/toolbar/ui.js        |  7 ++-
 10 files changed, 353 insertions(+), 9 deletions(-)
 create mode 100644 src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
 create mode 100644 src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
 create mode 100644 src/view/frontend/web/js/toolbar/audits/empty-interactive.js
 create mode 100644 src/view/frontend/web/js/toolbar/audits/multiple-h1.js
 create mode 100644 src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
 create mode 100644 src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js

diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css
index f6f4a38..0262a12 100644
--- a/src/view/frontend/web/css/toolbar.css
+++ b/src/view/frontend/web/css/toolbar.css
@@ -146,12 +146,14 @@
     bottom: calc(100% + 8px);
     left: 0;
     background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%);
-    backdrop-filter: blur(12px);
     border: 1px solid var(--mageforge-border-color);
     border-radius: 10px;
-    box-shadow: 0 -8px 24px var(--mageforge-shadow-lg), 0 4px 8px var(--mageforge-shadow-sm);
-    padding: 6px;
+    box-shadow: 0 -8px 24px var(--mageforge-shadow-lg), 0 6px 10px var(--mageforge-shadow-sm);
+    padding: 0 6px 6px;
     min-width: 350px;
+    max-height: 90vh;
+    overflow-y: auto;
+    overflow-x: hidden;
     font-family: var(--mageforge-font-family);
     display: none;
     opacity: 0;
@@ -177,11 +179,16 @@
 
 .mageforge-toolbar-menu-title {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    padding: 4px 8px 2px;
+    padding: 10px 8px 2px;
     border-bottom: 1px solid var(--mageforge-border-color);
     margin-bottom: 4px;
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+    background: linear-gradient(135deg, var(--mageforge-bg-dark) 0%, var(--mageforge-bg-dark-alt) 100%);
 }
 
 .mageforge-toolbar-menu-title-text {
@@ -194,11 +201,12 @@
     background-image: var(--gradient-brand);
     background-clip: text;
     -webkit-background-clip: text;
+    display: block;
 }
 
 .mageforge-toolbar-menu-close {
     background: none;
-    border: none;
+    border: 1px solid var(--mageforge-border-color);
     cursor: pointer;
     color: var(--mageforge-color-slate-400);
     padding: 6px;
@@ -309,9 +317,17 @@
 }
 
 .mageforge-toolbar-menu-desc {
-    font-size: 10px;
     color: var(--mageforge-color-slate-400);
+    font-size: 11px;
     line-height: 1.3;
+    user-select: text;
+    cursor: text;
+}
+
+.mageforge-toolbar-menu-desc.mageforge-active {
+    color: var(--mageforge-color-orange);
+    font-size: 12px;
+    user-select: text;
 }
 
 .mageforge-toolbar-menu-label-row {
diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js
index 5422089..f2db32f 100644
--- a/src/view/frontend/web/js/toolbar/audits.js
+++ b/src/view/frontend/web/js/toolbar/audits.js
@@ -94,6 +94,26 @@ export const auditMethods = {
         }
     },
 
+    /**
+     * Update the description text of an audit menu item.
+     * Useful for audits that want to surface detail (e.g. which IDs are duplicated).
+     *
+     * @param {string} key
+     * @param {string} text
+     */
+    setAuditDescription(key, text) {
+        if (!this.menu) return;
+        const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+        if (!item) return;
+        const desc = item.querySelector('.mageforge-toolbar-menu-desc');
+        if (!desc) return;
+        const originalText = desc.dataset.originalText ?? desc.textContent;
+        if (!desc.dataset.originalText) desc.dataset.originalText = originalText;
+        const isChanged = text !== originalText;
+        desc.textContent = text;
+        desc.classList.toggle('mageforge-active', isChanged);
+    },
+
     /**
      * Set the inline counter badge of an audit menu item.
      *
diff --git a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
new file mode 100644
index 0000000..ee2cdc4
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
@@ -0,0 +1,37 @@
+/**
+ * MageForge Toolbar Audit – Buttons without type
+ *
+ * A <button> without an explicit type attribute defaults to type="submit",
+ * which can accidentally submit parent forms. Always set type="button",
+ * type="submit", or type="reset" explicitly.
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'button-without-type',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path><path d="M11 11.5a1.5 1.5 0 0 1 3 0v1.5"></path><path d="M14 12a1.5 1.5 0 0 1 3 0v2"></path><path d="M17 13.5a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path></svg>',
+    label: 'Buttons without a type',
+    description: 'Highlight a button missing an explicit type attribute (defaults to submit)',
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            return;
+        }
+
+        const buttons = Array.from(document.querySelectorAll('button:not([type])')).filter(btn => {
+            if (!btn.offsetParent && getComputedStyle(btn).position !== 'fixed') return false;
+            const style = getComputedStyle(btn);
+            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
+            return true;
+        });
+
+        applyHighlight(buttons, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
new file mode 100644
index 0000000..68b765a
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
@@ -0,0 +1,62 @@
+/**
+ * MageForge Toolbar Audit – Duplicate IDs
+ *
+ * IDs must be unique per document. Duplicate IDs break label associations,
+ * aria-labelledby / aria-describedby references, fragment links, and cause
+ * unpredictable behaviour with JavaScript querySelector.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'duplicate-ids',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 8a4 4 0 0 1 4 4a4 4 0 0 1 4 -4"></path><path d="M7 16a4 4 0 0 0 4 -4a4 4 0 0 0 4 4"></path><path d="M9 12h6"></path><path d="M3 12h2"></path><path d="M19 12h2"></path></svg>',
+    label: 'Duplicate IDs',
+    description: 'Highlight elements sharing an ID with at least one other element',
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            context.setAuditDescription(this.key, 'Highlight elements sharing an ID with at least one other element');
+            return;
+        }
+
+        /** @type {Map<string, Element[]>} */
+        const idMap = new Map();
+
+        document.querySelectorAll('[id]').forEach(el => {
+            const id = el.id;
+            if (!id) return;
+            if (!idMap.has(id)) {
+                idMap.set(id, []);
+            }
+            idMap.get(id).push(el);
+        });
+
+        /** @type {string[]} */
+        const duplicateIdNames = [];
+        const duplicates = [];
+        idMap.forEach((els, id) => {
+            if (els.length > 1) {
+                duplicateIdNames.push(`#${id} (×${els.length})`);
+                els.forEach(el => duplicates.push(el));
+            }
+        });
+
+        if (duplicates.length > 0) {
+            context.setAuditDescription(
+                this.key,
+                `Duplicate: ${duplicateIdNames.join(', ')}`
+            );
+        }
+
+        applyHighlight(duplicates, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
new file mode 100644
index 0000000..b8b77a3
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
@@ -0,0 +1,52 @@
+/**
+ * MageForge Toolbar Audit – Empty Links & Buttons
+ *
+ * Links and buttons without an accessible name are unusable for screen
+ * reader and keyboard users (WCAG 2.1 SC 4.1.2, 2.4.6).
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'empty-interactive',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 12h-14"></path><path d="M6 9l-3 3l3 3"></path><path d="M20 6v.01"></path><path d="M20 12v.01"></path><path d="M20 18v.01"></path></svg>',
+    label: 'Empty Links & Buttons',
+    description: 'Highlight links and buttons missing an accessible name',
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            return;
+        }
+
+        const elements = Array.from(document.querySelectorAll('a, button')).filter(el => {
+            // Visibility check
+            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+            const style = getComputedStyle(el);
+            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
+
+            // Accessible name sources
+            if (el.getAttribute('aria-label')?.trim()) return false;
+            if (el.getAttribute('title')?.trim()) return false;
+            if (el.getAttribute('aria-labelledby')?.trim().split(/\s+/).some(id => document.getElementById(id)?.textContent.trim())) return false;
+
+            // Text content (excluding whitespace-only)
+            if (el.textContent.trim()) return false;
+
+            // Child <img> with non-empty alt
+            if (el.querySelector('img[alt]:not([alt=""])')) return false;
+
+            // Child <svg> with a <title> element
+            if (el.querySelector('svg title')?.textContent.trim()) return false;
+
+            return true;
+        });
+
+        applyHighlight(elements, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/index.js b/src/view/frontend/web/js/toolbar/audits/index.js
index 8d6b8f2..86a27aa 100644
--- a/src/view/frontend/web/js/toolbar/audits/index.js
+++ b/src/view/frontend/web/js/toolbar/audits/index.js
@@ -22,17 +22,24 @@
  * @property {string} label - Display name shown as group header
  */
 
+import buttonsWithoutType from './buttons-without-type.js';
+import duplicateIds from './duplicate-ids.js';
+import emptyInteractive from './empty-interactive.js';
 import imagesWithoutAlt from './images-without-alt.js';
 import imagesWithoutDimensions from './images-without-dimensions.js';
 import imagesWithoutLazyLoad from './images-without-lazy-load.js';
 import inputsWithoutLabel from './inputs-without-label.js';
 import lowContrastText from './low-contrast-text.js';
+import multipleH1 from './multiple-h1.js';
+import smallTouchTargets from './small-touch-targets.js';
 import tabOrder from './tab-order.js';
+import unsafeBlankTarget from './unsafe-blank-target.js';
 
 /** @type {AuditGroup[]} */
 export const auditGroups = [
-    { key: 'wcag',        label: 'WCAG Checks' },
-    { key: 'performance', label: 'Performance' },
+    { key: 'wcag',         label: 'WCAG Checks' },
+    { key: 'html-quality', label: 'HTML Quality' },
+    { key: 'performance',  label: 'Performance' },
 ];
 
 /** @type {AuditDefinition[]} */
@@ -41,6 +48,12 @@ export const audits = [
     { ...inputsWithoutLabel,      group: 'wcag' },
     { ...lowContrastText,         group: 'wcag' },
     { ...tabOrder,                group: 'wcag' },
+    { ...multipleH1,              group: 'wcag' },
+    { ...emptyInteractive,        group: 'wcag' },
+    { ...buttonsWithoutType,      group: 'wcag' },
+    { ...smallTouchTargets,       group: 'wcag' },
+    { ...duplicateIds,            group: 'html-quality' },
+    { ...unsafeBlankTarget,       group: 'html-quality' },
     { ...imagesWithoutDimensions, group: 'performance' },
     { ...imagesWithoutLazyLoad,   group: 'performance' },
 ];
diff --git a/src/view/frontend/web/js/toolbar/audits/multiple-h1.js b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
new file mode 100644
index 0000000..b7a8dc7
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
@@ -0,0 +1,41 @@
+/**
+ * MageForge Toolbar Audit – Multiple H1
+ *
+ * A page should have exactly one <h1> element. Multiple H1s confuse screen
+ * readers and harm SEO by diluting the primary heading signal.
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'multiple-h1',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 18v-8l-2 2"></path><path d="M9 18v-8"></path><path d="M5 14h8"></path><path d="M5 10v8"></path></svg>',
+    label: 'Multiple H1',
+    description: 'Highlight pages with more than one H1 heading',
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            return;
+        }
+
+        const h1s = Array.from(document.querySelectorAll('h1')).filter(el => {
+            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+            const style = getComputedStyle(el);
+            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
+            return true;
+        });
+
+        if (h1s.length <= 1) {
+            context.setAuditCounterBadge(this.key, '0', 'success');
+            return;
+        }
+
+        applyHighlight(h1s, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
new file mode 100644
index 0000000..f859ff8
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
@@ -0,0 +1,55 @@
+/**
+ * MageForge Toolbar Audit – Small Touch Targets
+ *
+ * Interactive elements smaller than 44×44 CSS pixels are hard to tap on
+ * touch devices (WCAG 2.5.5 Target Size, Level AAA; WCAG 2.5.8 Level AA).
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+const MIN_SIZE = 44;
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'small-touch-targets',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M15 3l0 4l4 0"></path><path d="M15 7l5 -5"></path></svg>',
+    label: 'Small Touch Targets',
+    description: `Highlight interactive elements smaller than ${MIN_SIZE}×${MIN_SIZE} px (WCAG 2.5.5)`,
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            return;
+        }
+
+        const selector = [
+            'a[href]',
+            'button',
+            '[role="button"]',
+            '[role="link"]',
+            '[role="checkbox"]',
+            '[role="radio"]',
+            '[role="switch"]',
+            'input:not([type="hidden"])',
+            'select',
+            'textarea',
+        ].join(', ');
+
+        const elements = Array.from(document.querySelectorAll(selector)).filter(el => {
+            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+            const style = getComputedStyle(el);
+            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
+
+            const rect = el.getBoundingClientRect();
+            return rect.width < MIN_SIZE || rect.height < MIN_SIZE;
+        });
+
+        applyHighlight(elements, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
new file mode 100644
index 0000000..2ff5343
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
@@ -0,0 +1,43 @@
+/**
+ * MageForge Toolbar Audit – Unsafe target="_blank"
+ *
+ * Links with target="_blank" that are missing rel="noopener" or
+ * rel="noreferrer" are vulnerable to reverse tabnapping: the opened page
+ * can access window.opener and redirect the original tab.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { applyHighlight, clearHighlight } from './highlight.js';
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+    key: 'unsafe-blank-target',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg>',
+    label: 'Unsafe Blank Target',
+    description: 'Highlight links with target="_blank" missing rel="noopener noreferrer"',
+
+    /**
+     * @param {object} context - Alpine toolbar component instance
+     * @param {boolean} active  - true = activate, false = deactivate
+     */
+    run(context, active) {
+        if (!active) {
+            clearHighlight(this.key);
+            return;
+        }
+
+        const elements = Array.from(
+            document.querySelectorAll('a[target="_blank"]')
+        ).filter(el => {
+            if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+            const style = getComputedStyle(el);
+            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
+
+            const rel = (el.getAttribute('rel') || '').toLowerCase().split(/\s+/);
+            return !rel.includes('noopener') && !rel.includes('noreferrer');
+        });
+
+        applyHighlight(elements, this.key, context);
+    },
+};
diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js
index 29cef72..9bb45bc 100644
--- a/src/view/frontend/web/js/toolbar/ui.js
+++ b/src/view/frontend/web/js/toolbar/ui.js
@@ -207,7 +207,12 @@ export const uiMethods = {
         const descEl = document.createElement('span');
         descEl.className = 'mageforge-toolbar-menu-desc';
         descEl.textContent = description;
-
+        descEl.addEventListener('click', e => {
+            if (descEl.classList.contains('mageforge-active')) e.stopPropagation();
+        });
+        descEl.addEventListener('mousedown', e => {
+            if (descEl.classList.contains('mageforge-active')) e.stopPropagation();
+        });
         const textEl = document.createElement('span');
         textEl.className = 'mageforge-toolbar-menu-text';
         textEl.appendChild(labelRowEl);

From 002d30fda814240cbb1122f2823521eb12c64607 Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:14:14 +0200
Subject: [PATCH 2/8] feat: enhance audits for duplicate IDs and interactive
 elements

---
 .../web/js/toolbar/audits/duplicate-ids.js    |  2 +-
 .../js/toolbar/audits/empty-interactive.js    |  2 +-
 .../js/toolbar/audits/small-touch-targets.js  | 21 ++++++++++---------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
index 68b765a..c27d205 100644
--- a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
+++ b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
@@ -24,7 +24,7 @@ export default {
     run(context, active) {
         if (!active) {
             clearHighlight(this.key);
-            context.setAuditDescription(this.key, 'Highlight elements sharing an ID with at least one other element');
+            context.setAuditDescription(this.key, this.description);
             return;
         }
 
diff --git a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
index b8b77a3..7e4202a 100644
--- a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
+++ b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
@@ -24,7 +24,7 @@ export default {
             return;
         }
 
-        const elements = Array.from(document.querySelectorAll('a, button')).filter(el => {
+        const elements = Array.from(document.querySelectorAll('a[href], button')).filter(el => {
             // Visibility check
             if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
             const style = getComputedStyle(el);
diff --git a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
index f859ff8..15d5432 100644
--- a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
+++ b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
@@ -29,19 +29,20 @@ export default {
         }
 
         const selector = [
-            'a[href]',
-            'button',
-            '[role="button"]',
-            '[role="link"]',
-            '[role="checkbox"]',
-            '[role="radio"]',
-            '[role="switch"]',
-            'input:not([type="hidden"])',
-            'select',
-            'textarea',
+            'a[href]:not([aria-disabled="true"])',
+            'button:not([disabled]):not([aria-disabled="true"])',
+            '[role="button"]:not([aria-disabled="true"])',
+            '[role="link"]:not([aria-disabled="true"])',
+            '[role="checkbox"]:not([aria-disabled="true"])',
+            '[role="radio"]:not([aria-disabled="true"])',
+            '[role="switch"]:not([aria-disabled="true"])',
+            'input:not([type="hidden"]):not([disabled]):not([aria-disabled="true"])',
+            'select:not([disabled]):not([aria-disabled="true"])',
+            'textarea:not([disabled]):not([aria-disabled="true"])',
         ].join(', ');
 
         const elements = Array.from(document.querySelectorAll(selector)).filter(el => {
+            if (el.matches('[disabled], [aria-disabled="true"]')) return false;
             if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
             const style = getComputedStyle(el);
             if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;

From d492c1edcb7dc99389f3fadfb59fe8aa5cc6827c Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:17:49 +0200
Subject: [PATCH 3/8] feat: update minimum size for small touch targets audit

Co-authored-by: Copilot <copilot@github.com>
---
 .../frontend/web/js/toolbar/audits/small-touch-targets.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
index 15d5432..e72b745 100644
--- a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
+++ b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
@@ -9,14 +9,14 @@
 
 import { applyHighlight, clearHighlight } from './highlight.js';
 
-const MIN_SIZE = 44;
+const MIN_SIZE = 24;
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
     key: 'small-touch-targets',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M15 3l0 4l4 0"></path><path d="M15 7l5 -5"></path></svg>',
     label: 'Small Touch Targets',
-    description: `Highlight interactive elements smaller than ${MIN_SIZE}×${MIN_SIZE} px (WCAG 2.5.5)`,
+    description: `Highlight interactive elements smaller than ${MIN_SIZE}×${MIN_SIZE} px (WCAG 2.5.8 AA)`,
 
     /**
      * @param {object} context - Alpine toolbar component instance

From 81ae5e42b782c2a619503a6ee9c0e8dc598af7ea Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:19:54 +0200
Subject: [PATCH 4/8] feat: update touch target size description for
 accessibility audit

Co-authored-by: Copilot <copilot@github.com>
---
 .../frontend/web/js/toolbar/audits/small-touch-targets.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
index e72b745..71286ed 100644
--- a/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
+++ b/src/view/frontend/web/js/toolbar/audits/small-touch-targets.js
@@ -1,8 +1,8 @@
 /**
  * MageForge Toolbar Audit – Small Touch Targets
  *
- * Interactive elements smaller than 44×44 CSS pixels are hard to tap on
- * touch devices (WCAG 2.5.5 Target Size, Level AAA; WCAG 2.5.8 Level AA).
+ * Interactive elements smaller than 24×24 CSS pixels fail the minimum touch
+ * target size for touch devices (WCAG 2.5.8 Target Size Minimum, Level AA).
  *
  * Icon source: Tabler Icons (MIT)
  */

From bfdcc29a6362cb0b8a2085f66228b30aaa9d9236 Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:32:14 +0200
Subject: [PATCH 5/8] feat: exclude toolbar elements from highlight application

---
 src/view/frontend/web/js/toolbar/audits/highlight.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/view/frontend/web/js/toolbar/audits/highlight.js b/src/view/frontend/web/js/toolbar/audits/highlight.js
index 53c7d17..d4d457b 100644
--- a/src/view/frontend/web/js/toolbar/audits/highlight.js
+++ b/src/view/frontend/web/js/toolbar/audits/highlight.js
@@ -127,6 +127,9 @@ export function clearHighlight(key) {
  * @param {object}     context  - Alpine toolbar component instance
  */
 export function applyHighlight(elements, key, context) {
+    // Never flag elements that are part of the MageForge Toolbar itself
+    elements = elements.filter(el => !el.closest('.mageforge-toolbar'));
+
     if (elements.length === 0) {
         context.setAuditCounterBadge(key, '0', 'success');
         return;

From 2df5ff2f5ce91adbd48ed8d094da5ecfc5f8036a Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:33:20 +0200
Subject: [PATCH 6/8] feat: clarify description for unsafe target="_blank"
 audit

---
 .../frontend/web/js/toolbar/audits/unsafe-blank-target.js    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
index 2ff5343..7886d13 100644
--- a/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
+++ b/src/view/frontend/web/js/toolbar/audits/unsafe-blank-target.js
@@ -1,9 +1,10 @@
 /**
  * MageForge Toolbar Audit – Unsafe target="_blank"
  *
- * Links with target="_blank" that are missing rel="noopener" or
+ * Links with target="_blank" that have neither rel="noopener" nor
  * rel="noreferrer" are vulnerable to reverse tabnapping: the opened page
  * can access window.opener and redirect the original tab.
+ * Either token alone is sufficient to prevent the attack.
  *
  * Icon source: Tabler Icons (MIT)
  */
@@ -15,7 +16,7 @@ export default {
     key: 'unsafe-blank-target',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg>',
     label: 'Unsafe Blank Target',
-    description: 'Highlight links with target="_blank" missing rel="noopener noreferrer"',
+    description: 'Highlight target="_blank" links with neither rel="noopener" nor rel="noreferrer"',
 
     /**
      * @param {object} context - Alpine toolbar component instance

From 877edcd5269bdee8eb04429d1b493479113722b5 Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:35:12 +0200
Subject: [PATCH 7/8] feat: add additional check for elements within the
 toolbar

---
 src/view/frontend/web/js/toolbar/audits/duplicate-ids.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
index c27d205..8bf8f92 100644
--- a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
+++ b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
@@ -34,6 +34,7 @@ export default {
         document.querySelectorAll('[id]').forEach(el => {
             const id = el.id;
             if (!id) return;
+            if (el.closest('.mageforge-toolbar')) return;
             if (!idMap.has(id)) {
                 idMap.set(id, []);
             }

From cfab08ac520451ddefac021f4594f433917bdf2f Mon Sep 17 00:00:00 2001
From: Mathias Elle <m.elle@e3n.de>
Date: Fri, 24 Apr 2026 20:46:06 +0200
Subject: [PATCH 8/8] feat: add warning styles and enhance audit checks for
 toolbar elements

Co-authored-by: Copilot <copilot@github.com>
---
 src/view/frontend/web/css/toolbar.css         | 23 ++++++++++++++
 src/view/frontend/web/js/toolbar/audits.js    |  3 +-
 .../js/toolbar/audits/buttons-without-type.js |  6 ++--
 .../web/js/toolbar/audits/duplicate-ids.js    |  2 ++
 .../js/toolbar/audits/empty-interactive.js    |  4 +--
 .../web/js/toolbar/audits/highlight.js        | 28 +++++++++++------
 .../js/toolbar/audits/images-without-alt.js   | 30 ++++++++++++++++---
 7 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css
index 0262a12..35959ff 100644
--- a/src/view/frontend/web/css/toolbar.css
+++ b/src/view/frontend/web/css/toolbar.css
@@ -23,6 +23,8 @@
     --mageforge-color-orange: #fb923c;
     --mageforge-color-pink: #C850C0;
     --mageforge-color-amber: #edb04d;
+    --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15);
+    --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35);
     --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
     --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
     --mageforge-border-color: rgba(148, 163, 184, 0.15);
@@ -262,6 +264,15 @@
     color: var(--mageforge-color-red);
 }
 
+.mageforge-toolbar-menu-item.mageforge-active--warning {
+    background: var(--mageforge-color-amber-alpha-15);
+    border-color: var(--mageforge-color-amber-alpha-35);
+}
+
+.mageforge-toolbar-menu-item.mageforge-active--warning .mageforge-toolbar-menu-label {
+    color: var(--mageforge-color-amber);
+}
+
 .mageforge-toolbar-menu-icon {
     font-size: 16px;
     flex-shrink: 0;
@@ -367,6 +378,12 @@
     border: 1px solid var(--mageforge-color-red-alpha-35);
 }
 
+.mageforge-toolbar-menu-status--warning {
+    color: var(--mageforge-color-amber);
+    background: var(--mageforge-color-amber-alpha-15);
+    border: 1px solid var(--mageforge-color-amber-alpha-35);
+}
+
 /* ============================================================================
    Menu Groups
    ========================================================================== */
@@ -437,6 +454,12 @@
     z-index: 9999997;
 }
 
+.mageforge-audit-overlay--warning {
+    background-color: var(--mageforge-color-amber-alpha-35);
+    outline-color: var(--mageforge-color-amber);
+    outline-style: dashed;
+}
+
 /* ============================================================================
    Feedback Toast
    ========================================================================== */
diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js
index f2db32f..9429f37 100644
--- a/src/view/frontend/web/js/toolbar/audits.js
+++ b/src/view/frontend/web/js/toolbar/audits.js
@@ -129,7 +129,8 @@ export const auditMethods = {
         if (!status) return;
         status.textContent = message;
         status.className = `mageforge-toolbar-menu-status mageforge-toolbar-menu-status--${type}`;
-        // Reflect error/success on the active item background
+        // Reflect error/warning/success on the active item background
         item.classList.toggle('mageforge-active--error', type === 'error');
+        item.classList.toggle('mageforge-active--warning', type === 'warning');
     },
 };
diff --git a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
index ee2cdc4..2c3a24d 100644
--- a/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
+++ b/src/view/frontend/web/js/toolbar/audits/buttons-without-type.js
@@ -10,7 +10,7 @@ import { applyHighlight, clearHighlight } from './highlight.js';
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'button-without-type',
+    key: 'buttons-without-type',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path><path d="M11 11.5a1.5 1.5 0 0 1 3 0v1.5"></path><path d="M14 12a1.5 1.5 0 0 1 3 0v2"></path><path d="M17 13.5a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path></svg>',
     label: 'Buttons without a type',
     description: 'Highlight a button missing an explicit type attribute (defaults to submit)',
@@ -25,7 +25,9 @@ export default {
             return;
         }
 
-        const buttons = Array.from(document.querySelectorAll('button:not([type])')).filter(btn => {
+        const buttons = Array.from(document.querySelectorAll('button')).filter(btn => {
+            const type = btn.getAttribute('type');
+            if (type !== null && type.trim() !== '') return false;
             if (!btn.offsetParent && getComputedStyle(btn).position !== 'fixed') return false;
             const style = getComputedStyle(btn);
             if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
diff --git a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
index 8bf8f92..82d035b 100644
--- a/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
+++ b/src/view/frontend/web/js/toolbar/audits/duplicate-ids.js
@@ -56,6 +56,8 @@ export default {
                 this.key,
                 `Duplicate: ${duplicateIdNames.join(', ')}`
             );
+        } else {
+            context.setAuditDescription(this.key, this.description);
         }
 
         applyHighlight(duplicates, this.key, context);
diff --git a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
index 7e4202a..6c6242e 100644
--- a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
+++ b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
@@ -38,8 +38,8 @@ export default {
             // Text content (excluding whitespace-only)
             if (el.textContent.trim()) return false;
 
-            // Child <img> with non-empty alt
-            if (el.querySelector('img[alt]:not([alt=""])')) return false;
+            // Child <img> with non-empty alt (trimmed)
+            if (Array.from(el.querySelectorAll('img[alt]')).some(img => img.getAttribute('alt')?.trim())) return false;
 
             // Child <svg> with a <title> element
             if (el.querySelector('svg title')?.textContent.trim()) return false;
diff --git a/src/view/frontend/web/js/toolbar/audits/highlight.js b/src/view/frontend/web/js/toolbar/audits/highlight.js
index d4d457b..7189e3b 100644
--- a/src/view/frontend/web/js/toolbar/audits/highlight.js
+++ b/src/view/frontend/web/js/toolbar/audits/highlight.js
@@ -50,11 +50,13 @@ function scheduleUpdate() {
  * Returns a cleanup function that removes the overlay and deregisters it.
  *
  * @param {Element} el
+ * @param {'error'|'warning'} [severity='error']
  * @returns {function} cleanup
  */
-function createOverlay(el) {
+function createOverlay(el, severity = 'error') {
     const overlay = document.createElement('span');
     overlay.className = AUDIT_OVERLAY_CLASS;
+    if (severity === 'warning') overlay.classList.add('mageforge-audit-overlay--warning');
     document.body.appendChild(overlay);
 
     function update() {
@@ -122,16 +124,22 @@ export function clearHighlight(key) {
  * the first result, and updates the counter badge on the toolbar menu item.
  * Works for any element type – no special casing required in audit code.
  *
- * @param {Element[]}  elements - Elements to mark
- * @param {string}     key      - Audit key (e.g. 'images-without-alt')
- * @param {object}     context  - Alpine toolbar component instance
+ * @param {Element[]}  elements        - Elements to mark
+ * @param {string}     key             - Audit key (e.g. 'images-without-alt')
+ * @param {object}     context         - Alpine toolbar component instance
+ * @param {object}     [options={}]    - Options
+ * @param {'error'|'warning'} [options.severity='error'] - Visual severity level
+ * @param {boolean}    [options.skipBadge=false]  - Skip badge + scroll update
  */
-export function applyHighlight(elements, key, context) {
+export function applyHighlight(elements, key, context, options = {}) {
+    const severity = options.severity ?? 'error';
+    const skipBadge = options.skipBadge ?? false;
+
     // Never flag elements that are part of the MageForge Toolbar itself
     elements = elements.filter(el => !el.closest('.mageforge-toolbar'));
 
     if (elements.length === 0) {
-        context.setAuditCounterBadge(key, '0', 'success');
+        if (!skipBadge) context.setAuditCounterBadge(key, '0', 'success');
         return;
     }
     const cls = `mageforge-audit-${key}`;
@@ -142,11 +150,13 @@ export function applyHighlight(elements, key, context) {
             existing.keys.add(key);
         } else {
             overlayRegistry.set(el, {
-                cleanup: createOverlay(el),
+                cleanup: createOverlay(el, severity),
                 keys: new Set([key]),
             });
         }
     });
-    elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
-    context.setAuditCounterBadge(key, `${elements.length}`, 'error');
+    if (!skipBadge) {
+        elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        context.setAuditCounterBadge(key, `${elements.length}`, severity);
+    }
 }
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
index ba7c1e2..2ef41ae 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-alt.js
@@ -21,13 +21,35 @@ export default {
             return;
         }
 
-        const images = Array.from(document.querySelectorAll('img')).filter(img => {
+        const visible = Array.from(document.querySelectorAll('img')).filter(img => {
             if (!img.offsetParent && getComputedStyle(img).position !== 'fixed') return false;
             const style = getComputedStyle(img);
-            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
-            return !img.hasAttribute('alt') || img.getAttribute('alt').trim() === '';
+            return style.visibility !== 'hidden' && style.display !== 'none' && style.opacity !== '0';
         });
 
-        applyHighlight(images, this.key, context);
+        // Errors: missing alt attribute or whitespace-only alt (e.g. alt="  ")
+        const errors = visible.filter(img => {
+            if (!img.hasAttribute('alt')) return true;
+            const val = img.getAttribute('alt');
+            return val.length > 0 && val.trim() === '';
+        });
+
+        // Warnings: explicit alt="" – intentionally decorative, but flagged for review
+        const warnings = visible.filter(img => img.getAttribute('alt') === '');
+
+        const total = errors.length + warnings.length;
+        if (total === 0) {
+            context.setAuditCounterBadge(this.key, '0', 'success');
+            return;
+        }
+
+        applyHighlight(errors,   this.key, context, { skipBadge: true });
+        applyHighlight(warnings, this.key, context, { severity: 'warning', skipBadge: true });
+
+        // Scroll to first issue (errors take priority)
+        const first = errors[0] ?? warnings[0];
+        if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+        context.setAuditCounterBadge(this.key, `${total}`, errors.length > 0 ? 'error' : 'warning');
     },
 };