} Keys of currently active audits */
activeAudits: new Set(),
- /** @type {Set
} Keys of currently collapsed groups */
- collapsedGroups: new Set(),
+ /** @type {string} Key of the currently active tab */
+ activeTab: "home",
/** @type {HTMLDivElement|null} */
container: null,
@@ -33,26 +33,38 @@ function _registerMageforgeToolbar() {
/** @type {HTMLDivElement|null} */
resetButton: null,
+ /** @type {'dark'|'auto'|'light'} Active colour scheme */
+ currentTheme: "dark",
+
+ /** @type {Function|null} Global keydown handler for keyboard shortcuts */
+ _keyboardShortcutHandler: null,
+
// ====================================================================
// Lifecycle
// ====================================================================
init() {
- try {
- const saved = localStorage.getItem(
- "mageforge-toolbar-collapsed-groups",
- );
- if (saved) {
- try {
- JSON.parse(saved).forEach((key) => this.collapsedGroups.add(key));
- } catch (_) {}
- }
- } catch (_) {}
this.createToolbar();
+ this.currentTheme = this.$el?.getAttribute("data-theme") || "dark";
+ this.setTheme(this.currentTheme);
+
+ // Global keyboard shortcut: Ctrl/Cmd+Shift+A → toggle all audits
+ this._keyboardShortcutHandler = (e) => {
+ if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "A") {
+ e.preventDefault();
+ this.toggleAllAudits();
+ }
+ };
+ document.addEventListener("keydown", this._keyboardShortcutHandler);
},
destroy() {
+ if (this._keyboardShortcutHandler) {
+ document.removeEventListener("keydown", this._keyboardShortcutHandler);
+ this._keyboardShortcutHandler = null;
+ }
this.deactivateAllAudits();
+ this.activeAudits.clear();
this.destroyToolbar();
},
diff --git a/src/view/frontend/web/js/toolbar/audits.js b/src/view/frontend/web/js/toolbar/audits.js
index c008c527..9756aa40 100644
--- a/src/view/frontend/web/js/toolbar/audits.js
+++ b/src/view/frontend/web/js/toolbar/audits.js
@@ -4,6 +4,10 @@
import { audits, auditGroups } from "./audits/index.js";
+// Allow async DOM mutations to settle; 200ms gives async audits enough
+// time to finish after synchronous mutations (typically 1–2 frames = 16ms).
+const AUDIT_SETTLE_DELAY_MS = 200;
+
export const auditMethods = {
/**
* Toggles an audit on/off and updates the menu item state.
@@ -16,14 +20,30 @@ export const auditMethods = {
const isActive = this.activeAudits.has(auditKey);
if (isActive) {
- this.activeAudits.delete(auditKey);
- audit.run(this, false);
- this.setAuditCounterBadge(auditKey, "", "success");
+ try {
+ audit.run(this, false);
+ this.activeAudits.delete(auditKey);
+ this.setAuditCounterBadge(auditKey, "", "success");
+ } catch (err) {
+ console.warn(
+ `[MageForge] Audit "${auditKey}" failed on deactivate:`,
+ err,
+ );
+ // Restore prior active state – do not deactivate if cleanup failed
+ }
} else {
this.activeAudits.add(auditKey);
- audit.run(this, true);
+ try {
+ audit.run(this, true);
+ } catch (err) {
+ console.warn(
+ `[MageForge] Audit "${auditKey}" failed on activate:`,
+ err,
+ );
+ this.activeAudits.delete(auditKey);
+ }
}
- this.setAuditActive(auditKey, !isActive);
+ this.setAuditActive(auditKey, this.activeAudits.has(auditKey));
},
/**
@@ -42,11 +62,41 @@ export const auditMethods = {
}
},
+ /**
+ * Calculate a 0–100 score for the given audit list based on current DOM state.
+ *
+ * @param {import('./audits/index.js').AuditDefinition[]} auditList
+ * @returns {number}
+ */
+ _calcScore(auditList) {
+ let total = 0;
+ let max = 0;
+ auditList.forEach((audit) => {
+ const item = this.menu?.querySelector(`[data-audit-key="${audit.key}"]`);
+ if (!item) return;
+ max += 100;
+ const status = item.querySelector(".mageforge-toolbar-menu-status");
+ if (!status || !status.textContent.trim()) {
+ total += 100;
+ } else if (
+ status.classList.contains("mageforge-toolbar-menu-status--success")
+ ) {
+ total += 100;
+ } else if (
+ status.classList.contains("mageforge-toolbar-menu-status--warning")
+ ) {
+ total += 50;
+ }
+ });
+ return max > 0 ? Math.round((total / max) * 100) : 100;
+ },
+
/**
* Run every audit, wait for the DOM to settle, then compute and display
* an overall health score (0–100) in the footer gauge.
*/
async runAllAuditsForScore() {
+ if (this._batchRunning) return;
const btn = this.runAllButton;
if (!btn) return;
btn.disabled = true;
@@ -63,34 +113,66 @@ export const auditMethods = {
});
// Allow async DOM mutations to settle
- await new Promise((resolve) => setTimeout(resolve, 200));
+ await new Promise((resolve) =>
+ setTimeout(resolve, AUDIT_SETTLE_DELAY_MS),
+ );
- let totalPoints = 0;
- let maxPoints = 0;
- audits.forEach((audit) => {
- const item = this.menu?.querySelector(
- `[data-audit-key="${audit.key}"]`,
- );
- if (!item) return;
- maxPoints += 100;
- const status = item.querySelector(".mageforge-toolbar-menu-status");
- if (!status || !status.textContent.trim()) {
- totalPoints += 100;
- } else if (
- status.classList.contains("mageforge-toolbar-menu-status--success")
- ) {
- totalPoints += 100;
- } else if (
- status.classList.contains("mageforge-toolbar-menu-status--warning")
- ) {
- totalPoints += 50;
+ this.updateHealthScore(this._calcScore(audits));
+
+ // Update per-group scores on the dashboard
+ const grouped = {};
+ audits.forEach((a) => {
+ if (a.group) (grouped[a.group] = grouped[a.group] ?? []).push(a);
+ });
+ Object.entries(grouped).forEach(([groupKey, groupAudits]) => {
+ this.updateGroupScore(groupKey, this._calcScore(groupAudits));
+ });
+
+ this.updateHomeSummary();
+ } finally {
+ this._batchRunning = false;
+ btn.disabled = false;
+ btn.classList.remove("mageforge-running");
+ }
+ },
+
+ /**
+ * Run all audits for a specific group, wait for the DOM to settle, then
+ * compute and display a score (0–100) in that panel's ring.
+ */
+ async runGroupAuditsForScore(groupKey) {
+ if (this._batchRunning) return;
+ const btn = this[`runGroupButton-${groupKey}`];
+ if (!btn) return;
+ btn.disabled = true;
+ btn.classList.add("mageforge-running");
+
+ try {
+ this._batchRunning = true;
+ const groupAudits = audits.filter((a) => a.group === groupKey);
+
+ // Deactivate existing audits in this group
+ groupAudits.forEach((audit) => {
+ if (this.activeAudits.has(audit.key)) {
+ this.activeAudits.delete(audit.key);
+ audit.run(this, false);
+ }
+ });
+
+ // Run all audits in the group
+ groupAudits.forEach((audit) => {
+ if (!this.activeAudits.has(audit.key)) {
+ this.runAudit(audit.key);
}
- // error = 0 points (default)
});
- const score =
- maxPoints > 0 ? Math.round((totalPoints / maxPoints) * 100) : 100;
- this.updateHealthScore(score);
+ // Allow async DOM mutations to settle
+ await new Promise((resolve) =>
+ setTimeout(resolve, AUDIT_SETTLE_DELAY_MS),
+ );
+
+ this.updateGroupScore(groupKey, this._calcScore(groupAudits));
+ this.updateHomeSummary();
} finally {
this._batchRunning = false;
btn.disabled = false;
@@ -98,6 +180,24 @@ export const auditMethods = {
}
},
+ /**
+ * Reset all audits for a specific group (deactivate + hide score).
+ */
+ resetGroupAudits(groupKey) {
+ const groupAudits = audits.filter((a) => a.group === groupKey);
+ groupAudits.forEach((audit) => {
+ if (this.activeAudits.has(audit.key)) {
+ this.activeAudits.delete(audit.key);
+ audit.run(this, false);
+ this.setAuditCounterBadge(audit.key, "", "success");
+ this.setAuditActive(audit.key, false);
+ }
+ });
+
+ // Reset score ring
+ this.updateGroupScore(groupKey, 0);
+ },
+
/**
* Deactivates all currently active audits (called when closing the toolbar).
*/
@@ -110,6 +210,7 @@ export const auditMethods = {
this.setAuditCounterBadge(key, "", "success");
this.setAuditActive(key, false);
});
+
this.updateToggleAllButton();
},
@@ -132,33 +233,214 @@ export const auditMethods = {
},
/**
- * Toggle collapsed state of a menu group.
+ * Collect the current audit state into a plain data structure shared by
+ * all export formatters.
*
- * @param {string} key
+ * @returns {{ timestamp: string, url: string, audits: Array }}
+ */
+ _collectExportData() {
+ const data = {
+ timestamp: new Date().toISOString(),
+ url: location.href,
+ audits: [],
+ };
+ audits.forEach((audit) => {
+ if (!this.activeAudits.has(audit.key)) return;
+ const item = this.menu?.querySelector(`[data-audit-key="${audit.key}"]`);
+ if (!item) return;
+
+ // Extract per-element selectors stored in the findings list DOM
+ const findings = Array.from(
+ item.querySelectorAll(".mageforge-audit-finding"),
+ ).map((row) => ({
+ selector:
+ row
+ .querySelector(".mageforge-finding-selector")
+ ?.textContent?.trim() ?? "",
+ severity: row.classList.contains("mageforge-audit-finding--warning")
+ ? "warning"
+ : "error",
+ }));
+
+ data.audits.push({
+ key: audit.key,
+ label: audit.label,
+ group: audit.group ?? null,
+ errors: parseInt(item.dataset.findingErrors || "0", 10),
+ warnings: parseInt(item.dataset.findingWarnings || "0", 10),
+ badge:
+ item
+ .querySelector(".mageforge-toolbar-menu-status")
+ ?.textContent?.trim() ?? "",
+ findings,
+ });
+ });
+ return data;
+ },
+
+ /**
+ * Export all active audit findings in the given format.
+ *
+ * @param {'json'|'md'|'txt'} [format='json']
*/
- toggleGroup(key) {
- if (this.collapsedGroups.has(key)) {
- this.collapsedGroups.delete(key);
+ exportFindings(format = "json") {
+ const data = this._collectExportData();
+ const ts = Date.now();
+ let content, mimeType, ext;
+
+ if (format === "md") {
+ content = this._exportAsMd(data);
+ mimeType = "text/markdown";
+ ext = "md";
+ } else if (format === "txt") {
+ content = this._exportAsTxt(data);
+ mimeType = "text/plain";
+ ext = "txt";
} else {
- this.collapsedGroups.add(key);
+ content = JSON.stringify(data, null, 2);
+ mimeType = "application/json";
+ ext = "json";
}
- localStorage.setItem(
- "mageforge-toolbar-collapsed-groups",
- JSON.stringify([...this.collapsedGroups]),
- );
- if (!this.menu) return;
- const group = this.menu.querySelector(`[data-group-key="${key}"]`);
- if (group) {
- const isCollapsed = this.collapsedGroups.has(key);
- group.classList.toggle(
- "mageforge-toolbar-menu-group--collapsed",
- isCollapsed,
+
+ const blob = new Blob([content], { type: mimeType });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `mageforge-audit-${ts}.${ext}`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ setTimeout(() => URL.revokeObjectURL(url), 1000);
+ },
+
+ /**
+ * Format audit data as Markdown.
+ *
+ * @param {object} data
+ * @returns {string}
+ */
+ _exportAsMd(data) {
+ const lines = [
+ "# MageForge Audit Report",
+ "",
+ `**Date:** ${data.timestamp}`,
+ `**URL:** ${data.url}`,
+ "",
+ "## Summary",
+ "",
+ ];
+
+ if (!data.audits.length) {
+ lines.push("_No active audits._");
+ } else {
+ lines.push("| Audit | Group | Errors | Warnings |");
+ lines.push("|-------|-------|-------:|---------:|");
+ data.audits.forEach(({ label, group, errors, warnings }) => {
+ lines.push(`| ${label} | ${group ?? "—"} | ${errors} | ${warnings} |`);
+ });
+
+ const totalErrors = data.audits.reduce((s, a) => s + a.errors, 0);
+ const totalWarnings = data.audits.reduce((s, a) => s + a.warnings, 0);
+ lines.push(
+ "",
+ `**Total errors:** ${totalErrors} · **Total warnings:** ${totalWarnings}`,
+ "",
+ "## Details",
+ );
+
+ data.audits.forEach(
+ ({ label, group, errors, warnings, badge, findings }) => {
+ const icon = errors > 0 ? "❌" : warnings > 0 ? "⚠️" : "✅";
+ const groupNote = group ? ` \`${group}\`` : "";
+ lines.push("", `### ${icon} ${label}${groupNote}`, "");
+
+ if (findings.length > 0) {
+ lines.push("| Selector | Severity |");
+ lines.push("|----------|----------|");
+ findings.forEach(({ selector, severity }) => {
+ lines.push(`| \`${selector}\` | ${severity} |`);
+ });
+ } else {
+ // Page-level audit: badge only, no element selectors
+ const detail = badge ? `badge: ${badge}` : "passed";
+ lines.push(`_Page-level check — ${detail}_`);
+ }
+ },
);
- const header = group.querySelector(
- ".mageforge-toolbar-menu-group-header",
+ }
+
+ lines.push(
+ "",
+ "---",
+ "",
+ "_Generated by [MageForge](https://github.com/OpenForgeProject/mageforge)_",
+ );
+ return lines.join("\n");
+ },
+
+ /**
+ * Format audit data as plain text.
+ *
+ * @param {object} data
+ * @returns {string}
+ */
+ _exportAsTxt(data) {
+ const sep = "=".repeat(50);
+ const lines = [
+ "MageForge Audit Report",
+ sep,
+ `Date : ${data.timestamp}`,
+ `URL : ${data.url}`,
+ sep,
+ "",
+ ];
+
+ if (!data.audits.length) {
+ lines.push("No active audits.");
+ } else {
+ // Group audits by their group key
+ const groups = {};
+ data.audits.forEach((audit) => {
+ const g = audit.group ?? "other";
+ (groups[g] = groups[g] ?? []).push(audit);
+ });
+
+ Object.entries(groups).forEach(([groupKey, groupAudits]) => {
+ lines.push(groupKey.toUpperCase(), "-".repeat(30));
+ groupAudits.forEach(({ label, errors, warnings, badge, findings }) => {
+ const status =
+ errors > 0 ? "[ERROR]" : warnings > 0 ? "[WARN] " : "[OK] ";
+ const detail =
+ errors > 0
+ ? `${errors} error(s)`
+ : warnings > 0
+ ? `${warnings} warning(s)`
+ : badge || "passed";
+ lines.push(` ${status} ${label}: ${detail}`);
+
+ // Render element selectors as indented tree
+ findings.forEach(({ selector, severity }, i) => {
+ const branch = i === findings.length - 1 ? "└─" : "├─";
+ const tag = severity === "warning" ? "[warn]" : "[err] ";
+ lines.push(` ${branch} ${tag} ${selector}`);
+ });
+ });
+ lines.push("");
+ });
+
+ const totalErrors = data.audits.reduce((s, a) => s + a.errors, 0);
+ const totalWarnings = data.audits.reduce((s, a) => s + a.warnings, 0);
+ lines.push(
+ sep,
+ `Total: ${totalErrors} error(s), ${totalWarnings} warning(s)`,
);
- if (header) header.setAttribute("aria-expanded", String(!isCollapsed));
}
+
+ lines.push(
+ "",
+ "Generated by MageForge (https://github.com/OpenForgeProject/mageforge)",
+ );
+ return lines.join("\n");
},
/**
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 9b8aab5b..2bbbdbf6 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
@@ -6,43 +6,30 @@
* type="submit", or type="reset" explicitly.
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.js";
-/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "buttons-without-type",
- icon: '} */
const idMap = new Map();
@@ -42,25 +32,39 @@ export default {
idMap.get(id).push(el);
});
- /** @type {string[]} */
- const duplicateIdNames = [];
+ /** @type {Element[]} */
const duplicates = [];
- idMap.forEach((els, id) => {
+ idMap.forEach((els) => {
if (els.length > 1) {
- duplicateIdNames.push(`#${id} (×${els.length})`);
els.forEach((el) => duplicates.push(el));
}
});
- if (duplicates.length > 0) {
+ return duplicates;
+ },
+ (context, findings) => {
+ if (findings.length > 0) {
+ const idMap = new Map();
+ document.querySelectorAll("[id]").forEach((el) => {
+ if (el.closest(".mageforge-toolbar")) return;
+ if (!idMap.has(el.id)) idMap.set(el.id, []);
+ idMap.get(el.id).push(el);
+ });
+ const duplicateIdNames = [];
+ idMap.forEach((els, id) => {
+ if (els.length > 1) {
+ duplicateIdNames.push(`#${id} (×${els.length})`);
+ }
+ });
context.setAuditDescription(
- this.key,
+ "duplicate-ids",
`Duplicate: ${duplicateIdNames.join(", ")}`,
);
} else {
- context.setAuditDescription(this.key, this.description);
+ context.setAuditDescription(
+ "duplicate-ids",
+ "Highlight elements sharing an ID with at least one other element",
+ );
}
-
- 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 78cf1438..e7346235 100644
--- a/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
+++ b/src/view/frontend/web/js/toolbar/audits/empty-interactive.js
@@ -5,68 +5,57 @@
* 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: ' with a element
- if (el.querySelector("svg title")?.textContent.trim()) return false;
+ return false;
- return true;
- });
+ // Child <svg> with a <title> element
+ if (el.querySelector("svg title")?.textContent.trim()) return false;
- applyHighlight(elements, this.key, context);
+ return true;
+ },
+ );
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/highlight.js b/src/view/frontend/web/js/toolbar/audits/highlight.js
index 9c477797..c9e3d687 100644
--- a/src/view/frontend/web/js/toolbar/audits/highlight.js
+++ b/src/view/frontend/web/js/toolbar/audits/highlight.js
@@ -123,6 +123,30 @@ export function clearHighlight(key) {
});
}
+/**
+ * Build a short, human-readable CSS selector for labelling a finding.
+ *
+ * @param {Element} el
+ * @returns {string}
+ */
+export function getReadableSelector(el) {
+ if (el.id) return `#${el.id}`;
+ const tag = el.tagName.toLowerCase();
+ const classes = [...el.classList]
+ .filter((c) => !c.startsWith("mageforge"))
+ .slice(0, 2)
+ .join(".");
+ if (classes) return `${tag}.${classes}`;
+ const ariaLabel = el.getAttribute("aria-label");
+ if (ariaLabel) return `${tag}[aria-label]`;
+ if (el.name) return `${tag}[name="${el.name}"]`;
+ if (tag === "img" && el.src) {
+ const base = el.src.split("/").pop().split("?")[0].slice(0, 24);
+ return `img/${base}`;
+ }
+ return tag;
+}
+
/**
* Highlights a set of elements by injecting a positioned overlay, scrolls to
* the first result, and updates the counter badge on the toolbar menu item.
@@ -134,16 +158,21 @@ export function clearHighlight(key) {
* @param {object} [options={}] - Options
* @param {'error'|'warning'} [options.severity='error'] - Visual severity level
* @param {boolean} [options.skipBadge=false] - Skip badge + scroll update
+ * @param {boolean} [options.autoFindings=false] - Auto-generate findings list for "Affected Elements" panel
+ * @param {(el: Element, severity: string) => {selector?: string, action?: string}} [options.formatFinding] - Custom formatter for each finding row
*/
export function applyHighlight(elements, key, context, options = {}) {
const severity = options.severity ?? "error";
const skipBadge = options.skipBadge ?? false;
+ const autoFindings = options.autoFindings ?? false;
+ const formatFinding = options.formatFinding;
// Never flag elements that are part of the MageForge Toolbar itself
elements = elements.filter((el) => !el.closest(".mageforge-toolbar"));
if (elements.length === 0) {
if (!skipBadge) context.setAuditCounterBadge(key, "0", "success");
+ if (autoFindings) context.setAuditFindings(key, []);
return;
}
const cls = `mageforge-audit-${key}`;
@@ -165,4 +194,13 @@ export function applyHighlight(elements, key, context, options = {}) {
}
context.setAuditCounterBadge(key, `${elements.length}`, severity);
}
+
+ // Auto-generate findings for the "Affected Elements" panel
+ if (autoFindings) {
+ const findings = elements.map((el) => {
+ const base = { el, selector: getReadableSelector(el), severity };
+ return formatFinding ? { ...base, ...formatFinding(el, severity) } : base;
+ });
+ context.setAuditFindings(key, findings);
+ }
}
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 42d3346f..4399a148 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
@@ -2,25 +2,16 @@
* MageForge Toolbar Audit – Images without ALT
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
-
-/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "images-without-alt",
- 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="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12"></path><path d="M4 16l16 0"></path><path d="M4 12l3 -3c.928 -.893 2.072 -.893 3 0l4 4"></path><path d="M13 12l2 -2c.928 -.893 2.072 -.893 3 0l2 2"></path><path d="M14 7l.01 0"></path></svg>',
- label: "Images without ALT",
- description: "Highlight images without alt attributes",
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
-
+import { createAudit } from "./createAudit.js";
+
+export default createAudit(
+ {
+ key: "images-without-alt",
+ 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="M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12"></path><path d="M4 16l16 0"></path><path d="M4 12l3 -3c.928 -.893 2.072 -.893 3 0l4 4"></path><path d="M13 12l2 -2c.928 -.893 2.072 -.893 3 0l2 2"></path><path d="M14 7l.01 0"></path></svg>',
+ label: "Images without ALT",
+ description: "Highlight images without alt attributes",
+ },
+ () => {
const visible = Array.from(document.querySelectorAll("img")).filter(
(img) => {
if (!img.offsetParent && getComputedStyle(img).position !== "fixed")
@@ -44,27 +35,6 @@ export default {
// 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 && !context._batchRunning)
- first.scrollIntoView({ behavior: "smooth", block: "center" });
-
- context.setAuditCounterBadge(
- this.key,
- `${total}`,
- errors.length > 0 ? "error" : "warning",
- );
+ return { errors, warnings };
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js b/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
index cf420d25..b79e0fbc 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js
@@ -4,40 +4,27 @@
* Images missing explicit width and height attributes cause Cumulative Layout Shift (CLS).
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.js";
-/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "images-without-dimensions",
- 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="M3 5h11"></path><path d="M12 7l2 -2l-2 -2"></path><path d="M5 3l-2 2l2 2"></path><path d="M19 10v11"></path><path d="M17 19l2 2l2 -2"></path><path d="M21 12l-2 -2l-2 2"></path><path d="M3 12a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2l0 -7"></path></svg>',
- label: "Images without Dimensions",
- description: "Highlight images missing width/height",
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
-
- const images = 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" ||
- parseFloat(style.opacity) === 0
- )
- return false;
- return !img.hasAttribute("width") || !img.hasAttribute("height");
- },
- );
-
- applyHighlight(images, this.key, context);
+export default createAudit(
+ {
+ key: "images-without-dimensions",
+ 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="M3 5h11"></path><path d="M12 7l2 -2l-2 -2"></path><path d="M5 3l-2 2l2 2"></path><path d="M19 10v11"></path><path d="M17 19l2 2l2 -2"></path><path d="M21 12l-2 -2l-2 2"></path><path d="M3 12a2 2 0 0 1 2 -2h7a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2l0 -7"></path></svg>',
+ label: "Images without Dimensions",
+ description: "Highlight images missing width/height",
+ },
+ () => {
+ return 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" ||
+ parseFloat(style.opacity) === 0
+ )
+ return false;
+ return !img.hasAttribute("width") || !img.hasAttribute("height");
+ });
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js b/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
index b45940ab..ccbb1b90 100644
--- a/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
+++ b/src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js
@@ -5,44 +5,31 @@
* wasting bandwidth and slowing initial page load.
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
-
-/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "images-without-lazy-load",
- 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="M14 12l6 -3l-8 -4l-8 4l6 3"></path><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1l-2 -1" fill="currentColor"></path></svg>',
- label: "Images without Lazy Load",
- description: 'Highlight off-screen images missing loading="lazy"',
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
+import { createAudit } from "./createAudit.js";
+export default createAudit(
+ {
+ key: "images-without-lazy-load",
+ 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="M14 12l6 -3l-8 -4l-8 4l6 3"></path><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1l-2 -1" fill="currentColor"></path></svg>',
+ label: "Images without Lazy Load",
+ description: 'Highlight off-screen images missing loading="lazy"',
+ },
+ () => {
const viewportBottom = window.innerHeight;
- const images = 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" ||
- parseFloat(style.opacity) === 0
- )
- return false;
- if (img.getAttribute("loading") === "lazy") return false;
- const rect = img.getBoundingClientRect();
- return rect.top > viewportBottom;
- },
- );
-
- applyHighlight(images, this.key, context);
+ return 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" ||
+ parseFloat(style.opacity) === 0
+ )
+ return false;
+ if (img.getAttribute("loading") === "lazy") return false;
+ const rect = img.getBoundingClientRect();
+ return rect.top > viewportBottom;
+ });
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/index.js b/src/view/frontend/web/js/toolbar/audits/index.js
index 12274c50..989dcc2c 100644
--- a/src/view/frontend/web/js/toolbar/audits/index.js
+++ b/src/view/frontend/web/js/toolbar/audits/index.js
@@ -28,18 +28,31 @@ 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 inlineEventHandlers from "./inline-event-handlers.js";
import inputsWithoutLabel from "./inputs-without-label.js";
import lowContrastText from "./low-contrast-text.js";
+import missingLandmarks from "./missing-landmarks.js";
import multipleH1 from "./multiple-h1.js";
+import nestedInteractive from "./nested-interactive.js";
+import renderBlockingScripts from "./render-blocking-scripts.js";
+import seoDuplicateMeta from "./seo-duplicate-meta.js";
+import seoHeadingHierarchy from "./seo-heading-hierarchy.js";
+import seoMissingCanonical from "./seo-missing-canonical.js";
+import seoMissingJsonLd from "./seo-missing-json-ld.js";
+import seoMissingLang from "./seo-missing-lang.js";
+import seoMissingMetaDescription from "./seo-missing-meta-description.js";
+import seoMissingTitle from "./seo-missing-title.js";
import smallTouchTargets from "./small-touch-targets.js";
+import svgIconsAriaHidden from "./svg-icons-aria-hidden.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: "html-quality", label: "HTML Quality" },
+ { key: "seo", label: "SEO" },
{ key: "performance", label: "Performance" },
+ { key: "html-quality", label: "HTML Quality" },
+ { key: "wcag", label: "Accessibility" },
];
/** @type {AuditDefinition[]} */
@@ -52,8 +65,20 @@ export const audits = [
{ ...emptyInteractive, group: "wcag" },
{ ...buttonsWithoutType, group: "wcag" },
{ ...smallTouchTargets, group: "wcag" },
+ { ...missingLandmarks, group: "wcag" },
+ { ...svgIconsAriaHidden, group: "wcag" },
{ ...duplicateIds, group: "html-quality" },
{ ...unsafeBlankTarget, group: "html-quality" },
+ { ...inlineEventHandlers, group: "html-quality" },
+ { ...nestedInteractive, group: "html-quality" },
{ ...imagesWithoutDimensions, group: "performance" },
{ ...imagesWithoutLazyLoad, group: "performance" },
+ { ...renderBlockingScripts, group: "performance" },
+ { ...seoMissingTitle, group: "seo" },
+ { ...seoMissingMetaDescription, group: "seo" },
+ { ...seoMissingCanonical, group: "seo" },
+ { ...seoMissingLang, group: "seo" },
+ { ...seoHeadingHierarchy, group: "seo" },
+ { ...seoMissingJsonLd, group: "seo" },
+ { ...seoDuplicateMeta, group: "seo" },
];
diff --git a/src/view/frontend/web/js/toolbar/audits/inline-event-handlers.js b/src/view/frontend/web/js/toolbar/audits/inline-event-handlers.js
new file mode 100644
index 00000000..ec6ae0bf
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/inline-event-handlers.js
@@ -0,0 +1,58 @@
+/**
+ * MageForge Toolbar Audit – Inline event handler attributes
+ *
+ * Inline event handlers (onclick, onchange, etc.) violate Content Security
+ * Policy. On Magento storefronts that enforce a CSP header, they are blocked
+ * silently and cause broken functionality that is hard to debug.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { createAudit } from "./createAudit.js";
+
+const EVENT_ATTRS = [
+ "onclick",
+ "ondblclick",
+ "onmousedown",
+ "onmouseup",
+ "onmouseover",
+ "onmouseout",
+ "onmousemove",
+ "onkeydown",
+ "onkeyup",
+ "onkeypress",
+ "onchange",
+ "oninput",
+ "onfocus",
+ "onblur",
+ "onsubmit",
+ "onreset",
+ "onselect",
+ "onload",
+ "onerror",
+];
+
+const SELECTOR = EVENT_ATTRS.map((a) => `[${a}]`).join(", ");
+
+export default createAudit(
+ {
+ key: "inline-event-handlers",
+ 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.904 17.563a1.2 1.2 0 0 0 2.228 .308l2.09 -3.093l4.907 4.907a1.067 1.067 0 0 0 1.509 0l1.047 -1.047a1.067 1.067 0 0 0 0 -1.509l-4.907 -4.907l3.113 -2.09a1.2 1.2 0 0 0 -.309 -2.228l-13.582 -3.904l3.904 13.563z"></path></svg>',
+ label: "Inline Event Handlers",
+ description:
+ "Highlights elements with inline event handler attributes (CSP risk)",
+ },
+ () => {
+ return Array.from(document.querySelectorAll(SELECTOR)).filter((el) => {
+ if (el.closest(".mageforge-toolbar")) return false;
+ if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+ return false;
+ const style = getComputedStyle(el);
+ return (
+ style.visibility !== "hidden" &&
+ style.display !== "none" &&
+ parseFloat(style.opacity) !== 0
+ );
+ });
+ },
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js b/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
index 9e026ca0..b2f004de 100644
--- a/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
+++ b/src/view/frontend/web/js/toolbar/audits/inputs-without-label.js
@@ -5,26 +5,17 @@
* to screen reader users.
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.js";
-/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "inputs-without-label",
- 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 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>',
- label: "Inputs without Label",
- description: "Highlight form inputs missing a label or aria-label",
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
-
- const inputs = Array.from(
+export default createAudit(
+ {
+ key: "inputs-without-label",
+ 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 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3"></path><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3"></path><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7"></path><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1"></path><path d="M17 12h.01"></path><path d="M13 12h.01"></path></svg>',
+ label: "Inputs without Label",
+ description: "Highlight form inputs missing a label or aria-label",
+ },
+ () => {
+ return Array.from(
document.querySelectorAll(
'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea',
),
@@ -57,7 +48,5 @@ export default {
if (input.closest("label")) return false;
return true;
});
-
- applyHighlight(inputs, this.key, context);
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js b/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
index c38dc07e..a0e5630f 100644
--- a/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
+++ b/src/view/frontend/web/js/toolbar/audits/low-contrast-text.js
@@ -6,7 +6,7 @@
* - 3:1 for large text (>=18pt or >=14pt bold)
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.js";
const _colorCanvas = document.createElement("canvas");
_colorCanvas.width = _colorCanvas.height = 1;
@@ -156,22 +156,14 @@ function isLargeText(el) {
}
/** @type {import('./index.js').AuditDefinition} */
-export default {
- key: "low-contrast-text",
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-9 1.732a8 8 0 0 0 4.001 14.928l-.001 -16a8 8 0 0 0 -4 1.072"></path></svg>',
- label: "Low Contrast Text",
- description: "Highlight text failing WCAG AA contrast",
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
-
+export default createAudit(
+ {
+ key: "low-contrast-text",
+ icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-9 1.732a8 8 0 0 0 4.001 14.928l-.001 -16a8 8 0 0 0 -4 1.072"></path></svg>',
+ label: "Low Contrast Text",
+ description: "Highlight text failing WCAG AA contrast",
+ },
+ () => {
const candidates = Array.from(
document.querySelectorAll(
"p, a, h1, h2, h3, h4, h5, h6, li, td, th, label, button",
@@ -184,7 +176,7 @@ export default {
return hasDirectText(el);
});
- const failing = candidates.filter((el) => {
+ return candidates.filter((el) => {
const style = getComputedStyle(el);
const fg = parseColor(style.color);
if (!fg || fg[3] === 0) return false;
@@ -194,7 +186,5 @@ export default {
const threshold = isLargeText(el) ? 3 : 4.5;
return ratio < threshold;
});
-
- applyHighlight(failing, this.key, context);
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/missing-landmarks.js b/src/view/frontend/web/js/toolbar/audits/missing-landmarks.js
new file mode 100644
index 00000000..6239354f
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/missing-landmarks.js
@@ -0,0 +1,54 @@
+/**
+ * MageForge Toolbar Audit – Missing ARIA landmark regions
+ *
+ * Checks that the page provides the minimum landmark structure required for
+ * keyboard and screen-reader navigation (WCAG 2.4.1 – Bypass Blocks).
+ *
+ * Checked landmarks:
+ * - <main> or [role="main"] – primary content
+ * - <nav> or [role="navigation"] – at least one navigation region
+ *
+ * Page-level check: no DOM elements to highlight, badge-only result.
+ */
+
+const KEY = "missing-landmarks";
+
+/** @param {string} tag @param {string} role @returns {boolean} */
+function hasLandmark(tag, role) {
+ return (
+ !!document.querySelector(`${tag}:not(.mageforge-toolbar *)`) ||
+ !!document.querySelector(`[role="${role}"]:not(.mageforge-toolbar *)`)
+ );
+}
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+ key: KEY,
+ 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="M4 8v-2a2 2 0 0 1 2 -2h2"></path><path d="M4 16v2a2 2 0 0 0 2 2h2"></path><path d="M16 4h2a2 2 0 0 1 2 2v2"></path><path d="M16 20h2a2 2 0 0 0 2 -2v-2"></path><rect x="9" y="9" width="6" height="6" rx="1"></rect></svg>',
+ label: "Missing Landmarks",
+ description:
+ "Flags missing <main> or <nav> landmark regions (WCAG 2.4.1)",
+ run(context, active) {
+ if (!active) {
+ context.setAuditDescription(KEY, this.description);
+ return;
+ }
+
+ const missing = [];
+ if (!hasLandmark("main", "main")) missing.push("<main>");
+ if (!hasLandmark("nav", "navigation")) missing.push("<nav>");
+
+ const count = missing.length;
+ const type = count > 0 ? "warning" : "success";
+ context.setAuditCounterBadge(KEY, String(count), type);
+
+ if (count > 0) {
+ context.setAuditDescription(
+ KEY,
+ `Missing landmark${count > 1 ? "s" : ""}: ${missing.join(", ")}`,
+ );
+ } else {
+ context.setAuditDescription(KEY, this.description);
+ }
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/multiple-h1.js b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
index c5df4a01..c22d9eda 100644
--- a/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
+++ b/src/view/frontend/web/js/toolbar/audits/multiple-h1.js
@@ -5,25 +5,16 @@
* 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;
- }
+import { createAudit } from "./createAudit.js";
+export default createAudit(
+ {
+ 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",
+ },
+ () => {
const h1s = Array.from(document.querySelectorAll("h1")).filter((el) => {
if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
return false;
@@ -37,11 +28,7 @@ export default {
return true;
});
- if (h1s.length <= 1) {
- context.setAuditCounterBadge(this.key, "0", "success");
- return;
- }
-
- applyHighlight(h1s, this.key, context);
+ // Only flag when there's more than one H1
+ return h1s.length > 1 ? h1s : [];
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/nested-interactive.js b/src/view/frontend/web/js/toolbar/audits/nested-interactive.js
new file mode 100644
index 00000000..1c472582
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/nested-interactive.js
@@ -0,0 +1,37 @@
+/**
+ * MageForge Toolbar Audit – Nested interactive elements
+ *
+ * Placing interactive elements inside each other (<a> in <a>, <button> in
+ * <a>, etc.) is invalid HTML and causes unpredictable browser behaviour.
+ * Screen readers and keyboard users are particularly affected.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { createAudit } from "./createAudit.js";
+
+// Select the inner (nested) element – that is the one to fix or remove.
+const SELECTOR = "a a, a button, button a, button button";
+
+export default createAudit(
+ {
+ key: "nested-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="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg>',
+ label: "Nested Interactive Elements",
+ description:
+ "Highlights interactive elements nested inside other interactive elements",
+ },
+ () => {
+ return Array.from(document.querySelectorAll(SELECTOR)).filter((el) => {
+ if (el.closest(".mageforge-toolbar")) return false;
+ if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+ return false;
+ const style = getComputedStyle(el);
+ return (
+ style.visibility !== "hidden" &&
+ style.display !== "none" &&
+ parseFloat(style.opacity) !== 0
+ );
+ });
+ },
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/render-blocking-scripts.js b/src/view/frontend/web/js/toolbar/audits/render-blocking-scripts.js
new file mode 100644
index 00000000..88b178fa
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/render-blocking-scripts.js
@@ -0,0 +1,35 @@
+/**
+ * MageForge Toolbar Audit – Render-blocking scripts
+ *
+ * External scripts in <head> without defer or async block HTML parsing and
+ * delay First Contentful Paint (FCP). Each such script adds latency before
+ * the browser can render any content.
+ *
+ * Note: type="module" scripts are deferred by the HTML spec and are not
+ * flagged. Only classic scripts with an src attribute are checked.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { createAudit } from "./createAudit.js";
+
+export default createAudit(
+ {
+ key: "render-blocking-scripts",
+ 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="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M10 13l-1 2l1 2"></path><path d="M14 13l1 2l-1 2"></path></svg>',
+ label: "Render-blocking Scripts",
+ description: "Highlights <head> scripts without defer or async",
+ },
+ () => {
+ const scripts = Array.from(
+ document.querySelectorAll("head script[src]"),
+ ).filter((s) => {
+ const type = (s.getAttribute("type") || "").toLowerCase();
+ // Module scripts are deferred by spec; non-JS types are not executed
+ if (type && type !== "text/javascript") return false;
+ return !s.hasAttribute("defer") && !s.hasAttribute("async");
+ });
+
+ return { errors: [], warnings: scripts };
+ },
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-duplicate-meta.js b/src/view/frontend/web/js/toolbar/audits/seo-duplicate-meta.js
new file mode 100644
index 00000000..f069ad61
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-duplicate-meta.js
@@ -0,0 +1,53 @@
+/**
+ * MageForge Toolbar Audit – Duplicate meta tags
+ *
+ * Multiple occurrences of unique page-level elements confuse search engines
+ * and can override each other unpredictably.
+ *
+ * Checked for duplicates:
+ * - <title>
+ * - <meta name="description">
+ * - <link rel="canonical">
+ *
+ * Page-level check: no DOM elements to highlight, badge-only result.
+ */
+
+const KEY = "seo-duplicate-meta";
+
+/** @type {import('./index.js').AuditDefinition} */
+export default {
+ key: KEY,
+ 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 9.667a2.667 2.667 0 0 1 2.667 -2.667h8a2.667 2.667 0 0 1 2.667 2.667v8a2.667 2.667 0 0 1 -2.667 2.667h-8a2.667 2.667 0 0 1 -2.667 -2.667z"></path><path d="M4.012 16.737a2 2 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path></svg>',
+ label: "Duplicate Meta Tags",
+ description: "Flags duplicate <title>, meta description, or canonical",
+ run(context, active) {
+ if (!active) {
+ context.setAuditDescription(KEY, this.description);
+ return;
+ }
+
+ const duplicates = [];
+
+ if (document.querySelectorAll("head > title").length > 1)
+ duplicates.push("<title>");
+
+ if (document.querySelectorAll('meta[name="description"]').length > 1)
+ duplicates.push('meta[name="description"]');
+
+ if (document.querySelectorAll('link[rel="canonical"]').length > 1)
+ duplicates.push('link[rel="canonical"]');
+
+ const count = duplicates.length;
+ const type = count > 0 ? "error" : "success";
+ context.setAuditCounterBadge(KEY, String(count), type);
+
+ if (count > 0) {
+ context.setAuditDescription(
+ KEY,
+ `Duplicate${count > 1 ? "s" : ""}: ${duplicates.join(", ")}`,
+ );
+ } else {
+ context.setAuditDescription(KEY, this.description);
+ }
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-heading-hierarchy.js b/src/view/frontend/web/js/toolbar/audits/seo-heading-hierarchy.js
new file mode 100644
index 00000000..38e66b9e
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-heading-hierarchy.js
@@ -0,0 +1,48 @@
+/**
+ * MageForge Toolbar Audit – Heading hierarchy jumps
+ *
+ * Headings must not skip levels (e.g. H1 → H3 without an H2). Such jumps
+ * confuse screen readers and harm both accessibility and SEO crawling.
+ *
+ * Icon source: Tabler Icons (MIT)
+ */
+
+import { createAudit } from "./createAudit.js";
+
+export default createAudit(
+ {
+ key: "seo-heading-hierarchy",
+ 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="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg>',
+ label: "Heading Hierarchy",
+ description: "Highlights headings that skip a level (e.g. H1 → H3)",
+ },
+ () => {
+ const headings = Array.from(
+ document.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+ ).filter((el) => {
+ if (el.closest(".mageforge-toolbar")) return false;
+ if (!el.offsetParent && getComputedStyle(el).position !== "fixed")
+ return false;
+ const style = getComputedStyle(el);
+ return (
+ style.visibility !== "hidden" &&
+ style.display !== "none" &&
+ parseFloat(style.opacity) !== 0
+ );
+ });
+
+ /** @type {Element[]} */
+ const offenders = [];
+ let prevLevel = 0;
+
+ headings.forEach((el) => {
+ const level = parseInt(el.tagName[1], 10);
+ if (prevLevel > 0 && level > prevLevel + 1) {
+ offenders.push(el);
+ }
+ prevLevel = level;
+ });
+
+ return { errors: [], warnings: offenders };
+ },
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-missing-canonical.js b/src/view/frontend/web/js/toolbar/audits/seo-missing-canonical.js
new file mode 100644
index 00000000..faef01d5
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-missing-canonical.js
@@ -0,0 +1,28 @@
+/**
+ * MageForge Toolbar Audit – Missing canonical link
+ *
+ * A canonical link tells search engines which URL is the authoritative version
+ * of a page. Missing canonicals on Magento stores cause duplicate-content
+ * penalties for filtered/sorted category pages and pagination.
+ *
+ * Page-level check: no DOM element to highlight, badge-only result.
+ */
+
+const KEY = "seo-missing-canonical";
+
+export default {
+ key: KEY,
+ 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="M9 15l6 -6"></path><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path></svg>',
+ label: "Missing Canonical",
+ description: 'Flags a missing <link rel="canonical"> element',
+ run(context, active) {
+ if (!active) return;
+ const canonical = document.querySelector('link[rel="canonical"]');
+ const hasIssue = !canonical || !canonical.getAttribute("href")?.trim();
+ context.setAuditCounterBadge(
+ KEY,
+ hasIssue ? "1" : "0",
+ hasIssue ? "warning" : "success",
+ );
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-missing-json-ld.js b/src/view/frontend/web/js/toolbar/audits/seo-missing-json-ld.js
new file mode 100644
index 00000000..c59113a6
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-missing-json-ld.js
@@ -0,0 +1,28 @@
+/**
+ * MageForge Toolbar Audit – Missing JSON-LD structured data
+ *
+ * JSON-LD is the recommended format for structured data (Product, Breadcrumb,
+ * Organization, etc.) on Magento storefronts. Absence prevents rich results
+ * in Google Search and reduces click-through rates.
+ *
+ * Page-level check: no DOM element to highlight, badge-only result.
+ */
+
+const KEY = "seo-missing-json-ld";
+
+export default {
+ key: KEY,
+ 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 4a2 2 0 0 0 -2 2v3a2 3 0 0 1 -2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path><path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 1 2 3a2 3 0 0 1 -2 3v3a2 2 0 0 1 -2 2"></path></svg>',
+ label: "Missing JSON-LD",
+ description: "Flags pages with no JSON-LD structured data block",
+ run(context, active) {
+ if (!active) return;
+ const hasJsonLd =
+ document.querySelector('script[type="application/ld+json"]') !== null;
+ context.setAuditCounterBadge(
+ KEY,
+ hasJsonLd ? "0" : "1",
+ hasJsonLd ? "success" : "warning",
+ );
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-missing-lang.js b/src/view/frontend/web/js/toolbar/audits/seo-missing-lang.js
new file mode 100644
index 00000000..0337aeca
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-missing-lang.js
@@ -0,0 +1,28 @@
+/**
+ * MageForge Toolbar Audit – Missing lang attribute
+ *
+ * The lang attribute on the <html> element declares the page language to
+ * browsers, screen readers, and search engines. Missing lang breaks
+ * assistive technology and may hurt multilingual SEO.
+ *
+ * Page-level check: no DOM element to highlight, badge-only result.
+ */
+
+const KEY = "seo-missing-lang";
+
+export default {
+ key: KEY,
+ 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="M4 5h7"></path><path d="M9 3v2c0 4.418 -2.239 8 -5 8"></path><path d="M5 9c0 2.144 2.952 3.908 6.7 4"></path><path d="M12 20l4 -9l4 9"></path><path d="M19.1 18h-6.2"></path></svg>',
+ label: "Missing lang Attribute",
+ description: "Flags a missing or empty lang attribute on the <html> element",
+ run(context, active) {
+ if (!active) return;
+ const lang = document.documentElement.getAttribute("lang");
+ const hasIssue = !lang || !lang.trim();
+ context.setAuditCounterBadge(
+ KEY,
+ hasIssue ? "1" : "0",
+ hasIssue ? "warning" : "success",
+ );
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-missing-meta-description.js b/src/view/frontend/web/js/toolbar/audits/seo-missing-meta-description.js
new file mode 100644
index 00000000..63ae7d55
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-missing-meta-description.js
@@ -0,0 +1,27 @@
+/**
+ * MageForge Toolbar Audit – Missing meta description
+ *
+ * A meta description provides search engines with a summary of the page.
+ * Missing or empty descriptions lead to auto-generated snippets in SERPs.
+ *
+ * Page-level check: no DOM element to highlight, badge-only result.
+ */
+
+const KEY = "seo-missing-meta-description";
+
+export default {
+ key: KEY,
+ 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="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 13h6"></path><path d="M9 17h3"></path></svg>',
+ label: "Missing Meta Description",
+ description: "Flags a missing or empty meta description",
+ run(context, active) {
+ if (!active) return;
+ const meta = document.querySelector('meta[name="description"]');
+ const hasIssue = !meta || !meta.getAttribute("content")?.trim();
+ context.setAuditCounterBadge(
+ KEY,
+ hasIssue ? "1" : "0",
+ hasIssue ? "warning" : "success",
+ );
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/audits/seo-missing-title.js b/src/view/frontend/web/js/toolbar/audits/seo-missing-title.js
new file mode 100644
index 00000000..d05552a3
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/seo-missing-title.js
@@ -0,0 +1,27 @@
+/**
+ * MageForge Toolbar Audit – Missing or empty page title
+ *
+ * Every page requires a non-empty <title> element. Missing or blank titles
+ * prevent correct indexing in search engines and break browser tab labels.
+ *
+ * Page-level check: no DOM element to highlight, badge-only result.
+ */
+
+const KEY = "seo-missing-title";
+
+export default {
+ key: KEY,
+ 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 12h10"></path><path d="M7 5v14"></path><path d="M17 5v14"></path><path d="M15 19h4"></path><path d="M15 5h4"></path><path d="M5 19h4"></path><path d="M5 5h4"></path></svg>',
+ label: "Missing Page Title",
+ description: "Flags a missing or empty title element",
+ run(context, active) {
+ if (!active) return;
+ const title = document.querySelector("title");
+ const hasIssue = !title || !title.textContent.trim();
+ context.setAuditCounterBadge(
+ KEY,
+ hasIssue ? "1" : "0",
+ hasIssue ? "error" : "success",
+ );
+ },
+};
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 b404cea0..7183a12d 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
@@ -7,27 +7,18 @@
* Icon source: Tabler Icons (MIT)
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.js";
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.8 AA)`,
-
- /**
- * @param {object} context - Alpine toolbar component instance
- * @param {boolean} active - true = activate, false = deactivate
- */
- run(context, active) {
- if (!active) {
- clearHighlight(this.key);
- return;
- }
-
+export default createAudit(
+ {
+ 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.8 AA)`,
+ },
+ () => {
const selector = [
'a[href]:not([aria-disabled="true"])',
'button:not([disabled]):not([aria-disabled="true"])',
@@ -41,24 +32,20 @@ export default {
'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" ||
- parseFloat(style.opacity) === 0
- )
- return false;
-
- const rect = el.getBoundingClientRect();
- return rect.width < MIN_SIZE || rect.height < MIN_SIZE;
- },
- );
-
- applyHighlight(elements, this.key, context);
+ return 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" ||
+ parseFloat(style.opacity) === 0
+ )
+ return false;
+
+ const rect = el.getBoundingClientRect();
+ return rect.width < MIN_SIZE || rect.height < MIN_SIZE;
+ });
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/audits/svg-icons-aria-hidden.js b/src/view/frontend/web/js/toolbar/audits/svg-icons-aria-hidden.js
new file mode 100644
index 00000000..0aea8621
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/audits/svg-icons-aria-hidden.js
@@ -0,0 +1,40 @@
+/**
+ * MageForge Toolbar Audit – SVG icons without aria-hidden
+ *
+ * Inline <svg> elements that are purely decorative (nested inside an
+ * interactive element that already has an accessible label) should be
+ * hidden from assistive technologies via aria-hidden="true". Without it,
+ * screen readers may announce the SVG content redundantly.
+ *
+ * Rule: <svg> inside <button>, <a>, or [role="button"] that lacks both
+ * aria-hidden="true" and a <title> child element is flagged as a warning.
+ */
+
+import { createAudit } from "./createAudit.js";
+
+/** @type {import('./index.js').AuditDefinition} */
+export default createAudit(
+ {
+ key: "svg-icons-aria-hidden",
+ 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><circle cx="12" cy="12" r="9"></circle><path d="M9 12h6"></path><path d="M12 9v6"></path></svg>',
+ label: "SVG Icons without aria-hidden",
+ description:
+ "Flags decorative SVGs missing aria-hidden inside interactive elements",
+ },
+ () => {
+ return Array.from(
+ document.querySelectorAll('button svg, a svg, [role="button"] svg'),
+ ).filter((svg) => {
+ // Skip toolbar's own SVGs
+ if (svg.closest(".mageforge-toolbar")) return false;
+ // Already hidden from AT
+ if (svg.getAttribute("aria-hidden") === "true") return false;
+ // Has a <title> → informative, not decorative
+ if (svg.querySelector("title")) return false;
+ // Has aria-label or aria-labelledby → informative
+ if (svg.getAttribute("aria-label") || svg.getAttribute("aria-labelledby"))
+ return false;
+ return true;
+ });
+ },
+);
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 794ed757..b8ef9d0c 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
@@ -9,43 +9,32 @@
* Icon source: Tabler Icons (MIT)
*/
-import { applyHighlight, clearHighlight } from "./highlight.js";
+import { createAudit } from "./createAudit.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 target="_blank" links with neither rel="noopener" nor rel="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" ||
- parseFloat(style.opacity) === 0
- )
- return false;
-
- const rel = (el.getAttribute("rel") || "").toLowerCase().split(/\s+/);
- return !rel.includes("noopener") && !rel.includes("noreferrer");
- });
+export default createAudit(
+ {
+ 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 target="_blank" links with neither rel="noopener" nor rel="noreferrer"',
+ },
+ () => {
+ return 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" ||
+ parseFloat(style.opacity) === 0
+ )
+ return false;
- applyHighlight(elements, this.key, context);
+ const rel = (el.getAttribute("rel") || "").toLowerCase().split(/\s+/);
+ return !rel.includes("noopener") && !rel.includes("noreferrer");
+ },
+ );
},
-};
+);
diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js
index f5cd3a8c..2161f4f4 100644
--- a/src/view/frontend/web/js/toolbar/ui.js
+++ b/src/view/frontend/web/js/toolbar/ui.js
@@ -1,603 +1,11 @@
-/**
- * MageForge Toolbar - DOM construction and menu controls
- */
-
-const LOGO_SVG_PATH =
- "M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z";
-
-function createLogoSvg(fill) {
- return `<svg width="24" height="27" viewBox="0 0 352 399" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="${LOGO_SVG_PATH}" fill="${fill}"></path></svg>`;
-}
+import { buildMethods } from "./ui/build.js";
+import { scoreMethods } from "./ui/score.js";
+import { itemMethods } from "./ui/items.js";
+import { controls } from "./ui/controls.js";
export const uiMethods = {
- createToolbar() {
- const logoSvgOrange = createLogoSvg("#E5622A");
- const logoSvgWhite = createLogoSvg("white");
-
- this.container = document.createElement("div");
- this.container.className = "mageforge-toolbar";
-
- if (this.$el && this.$el.hasAttribute("data-theme")) {
- this.container.setAttribute(
- "data-theme",
- this.$el.getAttribute("data-theme"),
- );
- }
-
- if (this.$el && this.$el.hasAttribute("data-position")) {
- this.container.setAttribute(
- "data-position",
- this.$el.getAttribute("data-position"),
- );
- }
-
- if (this.$el && this.$el.getAttribute("data-show-labels") === "0") {
- this.container.classList.add("mageforge-toolbar--no-labels");
- }
-
- // Menu popup (before buttons so it sits correctly in stacking context)
- this.menu = document.createElement("div");
- this.menu.className = "mageforge-toolbar-menu";
-
- const menuTitle = document.createElement("div");
- menuTitle.className = "mageforge-toolbar-menu-title";
-
- menuTitle.innerHTML = `
- <div class="mageforge-toolbar-menu-logo">${logoSvgOrange}</div>
- <span class="mageforge-toolbar-menu-title-text">MageForge</span>
- <button type="button" class="mageforge-toolbar-menu-close" title="Close & deactivate all">
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
- </button>
- `;
- menuTitle.querySelector(".mageforge-toolbar-menu-close").onclick = (e) => {
- e.stopPropagation();
- this.deactivateAllAudits();
- this.closeMenu();
- };
- this.menu.appendChild(menuTitle);
-
- // Group audits by their group key; ungrouped items fall through
- const grouped = {};
- const ungrouped = [];
- this.getAudits().forEach((audit) => {
- if (audit.group) {
- (grouped[audit.group] = grouped[audit.group] || []).push(audit);
- } else {
- ungrouped.push(audit);
- }
- });
-
- // Render defined groups in order
- this.getAuditGroups().forEach((group) => {
- const items = grouped[group.key];
- if (!items?.length) return;
- this.menu.appendChild(
- this.createMenuGroup(group.key, group.label, items),
- );
- });
-
- // Render any ungrouped audits below
- ungrouped.forEach((audit) => {
- this.menu.appendChild(
- this.createMenuItem(
- audit.key,
- audit.icon,
- audit.label,
- audit.description,
- () => this.runAudit(audit.key),
- ),
- );
- });
-
- // Footer – Health Score Gauge + Run All Tests
- const menuFooter = document.createElement("div");
- menuFooter.className = "mageforge-toolbar-menu-footer";
-
- const showHealthScore =
- this.$el?.getAttribute("data-show-health-score") !== "0";
-
- if (showHealthScore) {
- const ARC_LENGTH = 157.08;
- const gradId = `mf-gauge-grad-${Math.random().toString(36).slice(2, 8)}`;
- const healthWrapper = document.createElement("div");
- healthWrapper.className = "mageforge-toolbar-health-wrapper";
-
- const gaugeSvg = document.createElementNS(
- "http://www.w3.org/2000/svg",
- "svg",
- );
- gaugeSvg.setAttribute("viewBox", "0 0 120 70");
- gaugeSvg.setAttribute("class", "mageforge-toolbar-health-gauge");
- gaugeSvg.setAttribute("aria-hidden", "true");
- gaugeSvg.innerHTML = `
- <defs>
- <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
- <stop offset="0%" stop-color="#ef4444"></stop>
- <stop offset="50%" stop-color="#edb04d"></stop>
- <stop offset="100%" stop-color="#10b981"></stop>
- </linearGradient>
- </defs>
- <path d="M 10 65 A 50 50 0 0 1 110 65"
- fill="none" stroke="rgba(148,163,184,0.15)" stroke-width="10" stroke-linecap="round"></path>
- <path d="M 10 65 A 50 50 0 0 1 110 65"
- fill="none" stroke="url(#${gradId})" stroke-width="10" stroke-linecap="round"
- stroke-dasharray="0 ${ARC_LENGTH}" class="mageforge-health-gauge-progress"></path>
- <line class="mageforge-health-gauge-needle" x1="60" y1="65" x2="60" y2="20"
- stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" opacity="0"></line>
- <circle cx="60" cy="65" r="4" fill="rgba(255,255,255,0.4)"></circle>
- `;
- healthWrapper.appendChild(gaugeSvg);
-
- const scoreTextWrapper = document.createElement("div");
- scoreTextWrapper.className = "mageforge-toolbar-health-score-text";
- scoreTextWrapper.innerHTML = `
- <div class="mageforge-toolbar-health-score-value">
- <span class="mageforge-toolbar-health-score-number">--</span><span class="mageforge-toolbar-health-score-max">/100</span>
- </div>
- <div class="mageforge-toolbar-health-score-label">Overall Health Score</div>
- `;
- healthWrapper.appendChild(scoreTextWrapper);
- menuFooter.appendChild(healthWrapper);
-
- // Run All Tests + Reset button row (with score)
- const buttonRow = document.createElement("div");
- buttonRow.className = "mageforge-toolbar-menu-button-row";
-
- this.runAllButton = document.createElement("div");
- this.runAllButton.setAttribute("role", "button");
- this.runAllButton.setAttribute("tabindex", "0");
- this.runAllButton.className = "mageforge-toolbar-menu-run-all";
- this.runAllButton.innerHTML = `
- <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
- RUN ALL TESTS
- `;
- this.runAllButton.onclick = (e) => {
- e.stopPropagation();
- this.runAllAuditsForScore();
- };
- this.runAllButton.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.runAllAuditsForScore();
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- this.runAllButton.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.runAllAuditsForScore();
- }
- };
- buttonRow.appendChild(this.runAllButton);
-
- this.resetButton = document.createElement("div");
- this.resetButton.setAttribute("role", "button");
- this.resetButton.setAttribute("tabindex", "0");
- this.resetButton.className = "mageforge-toolbar-menu-reset";
- this.resetButton.title = "Reset score and deactivate all audits";
- this.resetButton.setAttribute(
- "aria-label",
- "Reset score and deactivate all audits",
- );
- this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
- this.resetButton.onclick = (e) => {
- e.stopPropagation();
- this.resetScore();
- };
- this.resetButton.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.resetScore();
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- this.resetButton.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.resetScore();
- }
- };
- buttonRow.appendChild(this.resetButton);
-
- menuFooter.appendChild(buttonRow);
- } else {
- // No health score – button row with Run All + Reset
- const buttonRow = document.createElement("div");
- buttonRow.className = "mageforge-toolbar-menu-button-row";
-
- this.runAllButton = document.createElement("div");
- this.runAllButton.setAttribute("role", "button");
- this.runAllButton.setAttribute("tabindex", "0");
- this.runAllButton.className = "mageforge-toolbar-menu-run-all";
- this.runAllButton.innerHTML = `
- <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
- RUN ALL TESTS
- `;
- this.runAllButton.onclick = (e) => {
- e.stopPropagation();
- this.runAllAuditsForScore();
- };
- this.runAllButton.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.runAllAuditsForScore();
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- this.runAllButton.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.runAllAuditsForScore();
- }
- };
- buttonRow.appendChild(this.runAllButton);
-
- this.resetButton = document.createElement("div");
- this.resetButton.setAttribute("role", "button");
- this.resetButton.setAttribute("tabindex", "0");
- this.resetButton.className = "mageforge-toolbar-menu-reset";
- this.resetButton.title = "Deactivate all audits";
- this.resetButton.setAttribute("aria-label", "Deactivate all audits");
- this.resetButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>`;
- this.resetButton.onclick = (e) => {
- e.stopPropagation();
- this.resetScore();
- };
- this.resetButton.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.resetScore();
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- this.resetButton.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.resetScore();
- }
- };
- buttonRow.appendChild(this.resetButton);
-
- menuFooter.appendChild(buttonRow);
- }
-
- const credit = document.createElement("div");
- credit.className = "mageforge-toolbar-menu-credit";
- credit.innerHTML = `Built with <span class="mageforge-toolbar-menu-credit-heart">❤</span> by <a href="https://github.com/OpenForgeProject/mageforge" target="_blank" rel="noopener noreferrer" class="mageforge-toolbar-menu-credit-link">MageForge</a>`;
- menuFooter.appendChild(credit);
- this.menu.appendChild(menuFooter);
-
- // Burger button (left) — div avoids Luma/theme button CSS overrides
- this.burgerButton = document.createElement("div");
- this.burgerButton.className = "mageforge-toolbar-burger";
- this.burgerButton.title = "Audit tools";
- this.burgerButton.setAttribute("role", "button");
- this.burgerButton.setAttribute("tabindex", "0");
- this.burgerButton.setAttribute("aria-label", "Open audit tools menu");
- this.burgerButton.setAttribute("aria-expanded", "false");
- this.burgerButton.innerHTML = `
- <div class="mageforge-toolbar-burger-logo">${logoSvgWhite}</div>
- <span class="mageforge-toolbar-burger-label">MageForge</span>
- `;
- this.burgerButton.onclick = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.toggleMenu();
- };
- this.burgerButton.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.toggleMenu();
- }
- if (e.key === " ") {
- e.preventDefault(); // prevent page scroll
- }
- };
- this.burgerButton.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.toggleMenu();
- }
- };
-
- this.container.appendChild(this.menu);
- this.container.appendChild(this.burgerButton);
- // Note: inspector button is appended by the mageforgeInspector Alpine component via _appendInspectorButton()
-
- // Close menu when clicking outside the toolbar
- this._outsideClickHandler = (e) => {
- if (this.menuOpen && !this.container.contains(e.target)) {
- this.closeMenu();
- }
- };
- document.addEventListener("click", this._outsideClickHandler);
-
- document.body.appendChild(this.container);
- },
-
- /**
- * Create a collapsible group section containing audit menu items.
- *
- * @param {string} key - Group key
- * @param {string} label - Display label
- * @param {object[]} audits - Audit definitions belonging to this group
- * @return {HTMLDivElement}
- */
- createMenuGroup(key, label, audits) {
- const group = document.createElement("div");
- group.className = "mageforge-toolbar-menu-group";
- group.dataset.groupKey = key;
-
- const header = document.createElement("div");
- header.setAttribute("role", "button");
- header.setAttribute("tabindex", "0");
- header.className = "mageforge-toolbar-menu-group-header";
- header.setAttribute(
- "aria-expanded",
- String(!this.collapsedGroups.has(key)),
- );
- header.onclick = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.toggleGroup(key);
- };
- header.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- this.toggleGroup(key);
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- header.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- this.toggleGroup(key);
- }
- };
-
- const headerLabel = document.createElement("span");
- headerLabel.className = "mageforge-toolbar-menu-group-label";
- headerLabel.textContent = label;
-
- const chevron = document.createElement("span");
- chevron.className = "mageforge-toolbar-menu-group-chevron";
- chevron.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>`;
-
- header.appendChild(headerLabel);
- header.appendChild(chevron);
- group.appendChild(header);
-
- group.classList.toggle(
- "mageforge-toolbar-menu-group--collapsed",
- this.collapsedGroups.has(key),
- );
-
- const items = document.createElement("div");
- items.className = "mageforge-toolbar-menu-group-items";
-
- audits.forEach((audit) => {
- items.appendChild(
- this.createMenuItem(
- audit.key,
- audit.icon,
- audit.label,
- audit.description,
- () => this.runAudit(audit.key),
- key,
- ),
- );
- });
-
- group.appendChild(items);
- return group;
- },
-
- /**
- * Create a single audit menu item button
- *
- * @param {string} key
- * @param {string} icon
- * @param {string} label
- * @param {string} description
- * @param {Function} callback
- * @param {?string} groupKey - Optional parent group key for the item
- * @return {HTMLDivElement}
- */
- createMenuItem(key, icon, label, description, callback, groupKey = null) {
- const item = document.createElement("div");
- item.setAttribute("role", "button");
- item.setAttribute("tabindex", "0");
- item.className = "mageforge-toolbar-menu-item";
- item.dataset.auditKey = key;
- if (groupKey) item.dataset.groupKey = groupKey;
- item.setAttribute("aria-pressed", "false");
-
- const iconEl = document.createElement("span");
- iconEl.className = "mageforge-toolbar-menu-icon";
- iconEl.innerHTML = icon;
-
- const labelEl = document.createElement("span");
- labelEl.className = "mageforge-toolbar-menu-label";
- labelEl.textContent = label;
-
- const statusEl = document.createElement("span");
- statusEl.className = "mageforge-toolbar-menu-status";
-
- const labelRowEl = document.createElement("span");
- labelRowEl.className = "mageforge-toolbar-menu-label-row";
- labelRowEl.appendChild(labelEl);
- labelRowEl.appendChild(statusEl);
-
- 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);
- textEl.appendChild(descEl);
-
- const toggleEl = document.createElement("span");
- toggleEl.className = "mageforge-toolbar-menu-toggle";
-
- item.appendChild(iconEl);
- item.appendChild(textEl);
- item.appendChild(toggleEl);
-
- item.onclick = (e) => {
- e.preventDefault();
- e.stopPropagation();
- callback();
- };
- item.onkeydown = (e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- e.stopPropagation();
- callback();
- }
- if (e.key === " ") {
- e.preventDefault();
- }
- };
- item.onkeyup = (e) => {
- if (e.key === " ") {
- e.stopPropagation();
- callback();
- }
- };
- return item;
- },
-
- /**
- * Update the visual active state of an audit menu item.
- *
- * @param {string} key
- * @param {boolean} active
- */
- setAuditActive(key, active) {
- if (!this.menu) return;
- const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
- if (!item) return;
- item.classList.toggle("mageforge-active", active);
- item.setAttribute("aria-pressed", String(active));
- if (!active) {
- item.classList.remove("mageforge-active--error");
- const status = item.querySelector(".mageforge-toolbar-menu-status");
- if (status) {
- status.textContent = "";
- status.className = "mageforge-toolbar-menu-status";
- }
- }
- this.updateToggleAllButton();
- },
-
- /**
- * No-op – retained for compatibility; the Run All Tests button has no dynamic label.
- */
- updateToggleAllButton() {},
-
- /**
- * Reset the health score gauge and deactivate all audits.
- */
- resetScore() {
- this.deactivateAllAudits();
- if (!this.menu) return;
- const ARC_LENGTH = 157.08;
- const progress = this.menu.querySelector(
- ".mageforge-health-gauge-progress",
- );
- const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
- const numberEl = this.menu.querySelector(
- ".mageforge-toolbar-health-score-number",
- );
- if (numberEl) numberEl.textContent = "--";
- if (progress) progress.setAttribute("stroke-dasharray", `0 ${ARC_LENGTH}`);
- if (needle) needle.setAttribute("opacity", "0");
- },
-
- /**
- * Update the health score gauge and numeric display (0–100).
- *
- * @param {number} score
- */
- updateHealthScore(score) {
- if (!this.menu) return;
- const ARC_LENGTH = 157.08;
- const progress = this.menu.querySelector(
- ".mageforge-health-gauge-progress",
- );
- const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
- const numberEl = this.menu.querySelector(
- ".mageforge-toolbar-health-score-number",
- );
-
- if (numberEl) numberEl.textContent = score;
-
- if (progress) {
- const dash = ((score / 100) * ARC_LENGTH).toFixed(2);
- progress.setAttribute("stroke-dasharray", `${dash} ${ARC_LENGTH}`);
- }
-
- if (needle) {
- const rad = (1 - score / 100) * Math.PI;
- needle.setAttribute("x2", (60 + 45 * Math.cos(rad)).toFixed(1));
- needle.setAttribute("y2", (65 - 45 * Math.sin(rad)).toFixed(1));
- needle.setAttribute("opacity", "1");
- }
- },
-
- toggleMenu() {
- this.menuOpen ? this.closeMenu() : this.openMenu();
- },
-
- openMenu() {
- this.menuOpen = true;
- this.menu.classList.add("mageforge-menu-open");
- this.burgerButton.classList.add("mageforge-active");
- this.burgerButton.setAttribute("aria-expanded", "true");
- },
-
- closeMenu() {
- this.menuOpen = false;
- this.menu.classList.remove("mageforge-menu-open");
- this.burgerButton.classList.remove("mageforge-active");
- this.burgerButton.setAttribute("aria-expanded", "false");
- },
-
- destroyToolbar() {
- if (this._outsideClickHandler) {
- document.removeEventListener("click", this._outsideClickHandler);
- this._outsideClickHandler = null;
- }
- if (this.container && this.container.parentNode) {
- this.container.parentNode.removeChild(this.container);
- }
- this.container = null;
- this.menu = null;
- this.burgerButton = null;
- this.runAllButton = null;
- this.resetButton = null;
- this.menuOpen = false;
- },
+ ...buildMethods,
+ ...scoreMethods,
+ ...itemMethods,
+ ...controls,
};
diff --git a/src/view/frontend/web/js/toolbar/ui/build.js b/src/view/frontend/web/js/toolbar/ui/build.js
new file mode 100644
index 00000000..afd612ab
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/ui/build.js
@@ -0,0 +1,852 @@
+/**
+ * MageForge Toolbar – DOM construction
+ *
+ * Structure:
+ * createToolbar() – Entry point; assembles and injects the toolbar DOM
+ * _buildMenu() – Full menu popup container
+ * _buildMenuHeader() – Sticky title bar (logo + name + close button)
+ * _buildTabLayout() – Two-column tab container (nav | content)
+ * _buildTabNav() – Left-side navigation buttons + action bar at bottom
+ * _buildNavTab() – Single nav tab button
+ * _buildTabPanels() – All content panels
+ * _buildPanel() – Panel shell (role=tabpanel)
+ * _buildPanelHeader() – Panel title + compact score ring
+ * _buildScoreWidget() – Circular score ring (panel headers)
+ * _buildHomePanel() – Overview panel with half-arc gauge
+ * _buildSettingsPanel() – Settings placeholder
+ * _buildMenuFooter() – Credit line only (action bar is in nav)
+ * _buildBurgerButton() – Persistent trigger button
+ *
+ * switchTab() – Activate a tab and show its panel
+ */
+
+import {
+ createLogoSvg,
+ generateId,
+ ICON_HOME,
+ GROUP_ICONS,
+ GAUGE_ARC_LENGTH,
+ SCORE_RING_CIRCUMFERENCE,
+} from "./constants.js";
+
+export const buildMethods = {
+ // ────────────────────────────────────────────────────────────────────────
+ // Entry point
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Build and inject the full toolbar into <body>.
+ */
+ createToolbar() {
+ this.container = document.createElement("div");
+ this.container.className = "mageforge-toolbar";
+
+ if (this.$el?.hasAttribute("data-theme")) {
+ this.container.setAttribute(
+ "data-theme",
+ this.$el.getAttribute("data-theme"),
+ );
+ }
+ if (this.$el?.hasAttribute("data-position")) {
+ this.container.setAttribute(
+ "data-position",
+ this.$el.getAttribute("data-position"),
+ );
+ }
+ if (this.$el?.getAttribute("data-show-labels") === "0") {
+ this.container.classList.add("mageforge-toolbar--no-labels");
+ }
+
+ this.menu = this._buildMenu();
+ this.container.appendChild(this.menu);
+
+ this.burgerButton = this._buildBurgerButton();
+ this.container.appendChild(this.burgerButton);
+ // Note: Inspector button is appended externally via _appendInspectorButton()
+
+ this._outsideClickHandler = (e) => {
+ if (this.menuOpen && !this.container.contains(e.target)) this.closeMenu();
+ };
+ document.addEventListener("click", this._outsideClickHandler);
+ document.body.appendChild(this.container);
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Menu sections
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Assemble the full menu popup.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildMenu() {
+ const menu = document.createElement("div");
+ menu.className = "mageforge-toolbar-menu";
+ menu.appendChild(this._buildMenuHeader());
+ menu.appendChild(this._buildTabLayout());
+ menu.appendChild(this._buildMenuFooter());
+ return menu;
+ },
+
+ /**
+ * Sticky title bar: logo + name + close button.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildMenuHeader() {
+ const header = document.createElement("div");
+ header.className = "mageforge-toolbar-menu-title";
+ header.innerHTML = `
+ <div class="mageforge-toolbar-menu-logo">
+ <div>${createLogoSvg("#E5622A")}</div>
+ <span class="mageforge-toolbar-menu-title-text">MageForge</span>
+ </div>
+ <button type="button" class="mageforge-toolbar-menu-close" title="Close & deactivate all">
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
+ </button>
+ `;
+ header.querySelector(".mageforge-toolbar-menu-close").onclick = (e) => {
+ e.stopPropagation();
+ this.deactivateAllAudits();
+ this.closeMenu();
+ };
+ return header;
+ },
+
+ /**
+ * Two-column layout: tab nav (left) + content panels (right).
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildTabLayout() {
+ const layout = document.createElement("div");
+ layout.className = "mageforge-toolbar-tabs";
+ layout.appendChild(this._buildTabNav());
+ layout.appendChild(this._buildTabPanels());
+ return layout;
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Tab navigation
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Left-side navigation: Home at top, audit groups, Settings pinned to bottom.
+ *
+ * @returns {HTMLElement}
+ */
+ _buildTabNav() {
+ const nav = document.createElement("nav");
+ nav.className = "mageforge-toolbar-tab-nav";
+ nav.setAttribute("role", "tablist");
+ nav.setAttribute("aria-label", "Audit categories");
+
+ // Action bar (run/reset for the current tab).
+ // column-reverse means the first DOM child appears at the visual bottom.
+ this.footerActionBar = document.createElement("div");
+ this.footerActionBar.className = "mageforge-nav-action-bar";
+ nav.appendChild(this.footerActionBar);
+
+ this.getAuditGroups().forEach((group) => {
+ nav.appendChild(
+ this._buildNavTab(group.key, GROUP_ICONS[group.key] ?? "", group.label),
+ );
+ });
+
+ nav.appendChild(this._buildNavTab("home", ICON_HOME, "Dashboard", true));
+
+ return nav;
+ },
+
+ /**
+ * When audits from 2+ groups are active, relabel every group reset button
+ * to "Reset All" and wire it to reset everything; otherwise restore the
+ * per-group label and behaviour.
+ */
+ _updateResetAllButton() {
+ const isMulti = this._isMultiGroupActive();
+ const RESET_SVG =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>';
+ const label = isMulti ? "Reset All" : "Reset";
+ this.getAuditGroups().forEach((group) => {
+ const btn = this[`groupResetButton-${group.key}`];
+ if (!btn) return;
+ btn.innerHTML = `${RESET_SVG} ${label}`;
+ const ariaLabel = isMulti
+ ? "Reset all active audits"
+ : `Reset ${group.label} audits`;
+ btn.setAttribute("aria-label", ariaLabel);
+ btn.title = ariaLabel;
+ btn.classList.toggle("mageforge-group-reset-btn--all", isMulti);
+
+ const groupHasActive =
+ isMulti ||
+ this.getAudits().some(
+ (a) => a.group === group.key && this.activeAudits.has(a.key),
+ );
+ btn.classList.toggle(
+ "mageforge-group-reset-btn--disabled",
+ !groupHasActive,
+ );
+ btn.setAttribute("aria-disabled", String(!groupHasActive));
+ btn.setAttribute("tabindex", groupHasActive ? "0" : "-1");
+ });
+
+ // Home reset button: disabled when nothing is active at all
+ if (this.resetButton) {
+ const hasAny = this.activeAudits.size > 0;
+ this.resetButton.classList.toggle(
+ "mageforge-group-reset-btn--disabled",
+ !hasAny,
+ );
+ this.resetButton.setAttribute("aria-disabled", String(!hasAny));
+ this.resetButton.setAttribute("tabindex", hasAny ? "0" : "-1");
+ }
+ },
+
+ /** Returns true when audits from at least 2 different groups are active. */
+ _isMultiGroupActive() {
+ const activeGroups = new Set(
+ this.getAudits()
+ .filter((a) => a.group && this.activeAudits.has(a.key))
+ .map((a) => a.group),
+ );
+ return activeGroups.size >= 2;
+ },
+
+ /**
+ * Single tab button (icon stacked above abbreviated label).
+ *
+ * @param {string} key
+ * @param {string} icon – SVG string
+ * @param {string} label – Display label (first word used in the nav)
+ * @param {boolean} [isActive]
+ * @returns {HTMLButtonElement}
+ */
+ _buildNavTab(key, icon, label, isActive = false) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.setAttribute("role", "tab");
+ btn.setAttribute("aria-selected", String(isActive));
+ btn.setAttribute("aria-controls", `mf-tab-panel-${key}`);
+ btn.setAttribute("tabindex", isActive ? "0" : "-1");
+ btn.className = "mageforge-toolbar-tab-btn";
+ if (isActive) btn.classList.add("mageforge-tab-active");
+ btn.dataset.tab = key;
+ btn.innerHTML = `
+ <span class="mageforge-tab-icon" aria-hidden="true">${icon}</span>
+ <span class="mageforge-tab-label">${label.split(" ")[0]}</span>
+ <span class="mageforge-tab-badges" data-tab-badges-for="${key}">
+ <span class="mageforge-tab-badge mageforge-tab-badge--errors" data-type="errors"></span>
+ <span class="mageforge-tab-badge mageforge-tab-badge--warnings" data-type="warnings"></span>
+ </span>
+ `;
+ btn.onclick = (e) => {
+ e.stopPropagation();
+ this.switchTab(key);
+ };
+ btn.onkeydown = (e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ e.stopPropagation();
+ this.switchTab(key);
+ }
+ };
+ return btn;
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Tab panels
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Build all content panels wrapped in the scrollable content column.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildTabPanels() {
+ const wrapper = document.createElement("div");
+ wrapper.className = "mageforge-toolbar-tab-content";
+
+ const grouped = {};
+ const ungrouped = [];
+ this.getAudits().forEach((audit) => {
+ audit.group
+ ? (grouped[audit.group] = grouped[audit.group] || []).push(audit)
+ : ungrouped.push(audit);
+ });
+
+ // Home panel – visible by default
+ const homePanel = this._buildPanel("home");
+ homePanel.classList.add("mageforge-tab-panel-active");
+ homePanel.appendChild(this._buildHomePanel());
+ wrapper.appendChild(homePanel);
+
+ // One panel per audit group
+ this.getAuditGroups().forEach((group) => {
+ const items = grouped[group.key];
+ if (!items?.length) return;
+
+ const panel = this._buildPanel(group.key);
+ panel.setAttribute("hidden", "");
+ panel.appendChild(this._buildPanelHeader(group.label, false, group.key));
+
+ const body = document.createElement("div");
+ body.className = "mageforge-tab-panel-body";
+
+ const groupLabel = group.label;
+
+ // Build run button – stored as ref, rendered in footer action bar
+ const groupBtn = document.createElement("button");
+ groupBtn.type = "button";
+ groupBtn.className = "mageforge-group-run-btn";
+ groupBtn.dataset.group = group.key;
+ this[`runGroupButton-${group.key}`] = groupBtn;
+ groupBtn.innerHTML = `
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+ Run Check
+ `;
+ groupBtn.onclick = (e) => {
+ e.stopPropagation();
+ this.runGroupAuditsForScore(group.key);
+ };
+
+ // Build reset button – stored as ref, rendered in footer action bar
+ const groupResetBtn = document.createElement("button");
+ groupResetBtn.type = "button";
+ groupResetBtn.className = "mageforge-group-reset-btn";
+ groupResetBtn.setAttribute("aria-label", `Reset ${groupLabel} audits`);
+ groupResetBtn.title = `Reset ${groupLabel} audits`;
+ groupResetBtn.innerHTML =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> Reset';
+ const handleGroupReset = () => {
+ const btn = this[`groupResetButton-${group.key}`];
+ if (btn?.classList.contains("mageforge-group-reset-btn--disabled"))
+ return;
+ if (this._isMultiGroupActive()) {
+ this.resetScore();
+ } else {
+ this.resetGroupAudits(group.key);
+ }
+ };
+ groupResetBtn.onclick = (e) => {
+ e.stopPropagation();
+ handleGroupReset();
+ };
+ this[`groupResetButton-${group.key}`] = groupResetBtn;
+
+ items.forEach((audit) => {
+ body.appendChild(
+ this.createMenuItem(
+ audit.key,
+ audit.icon,
+ audit.label,
+ audit.description,
+ () => this.runAudit(audit.key),
+ group.key,
+ ),
+ );
+ });
+
+ if (items.length < 6) {
+ const featureBtn = document.createElement("a");
+ featureBtn.href =
+ "https://github.com/OpenForgeProject/mageforge/issues/new?labels=enhancement&template=feature_request.yml&title=%5BAudit+Request%5D+";
+ featureBtn.target = "_blank";
+ featureBtn.rel = "noopener noreferrer";
+ featureBtn.className = "mageforge-feature-request-btn";
+ featureBtn.innerHTML = `
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7-7 7 7"></path></svg>
+ Suggest a Audit
+ `;
+ body.appendChild(featureBtn);
+ }
+
+ panel.appendChild(body);
+ wrapper.appendChild(panel);
+ });
+
+ // Ungrouped audits (no header)
+ if (ungrouped.length > 0) {
+ const panel = this._buildPanel("ungrouped");
+ panel.setAttribute("hidden", "");
+ ungrouped.forEach((audit) => {
+ panel.appendChild(
+ this.createMenuItem(
+ audit.key,
+ audit.icon,
+ audit.label,
+ audit.description,
+ () => this.runAudit(audit.key),
+ ),
+ );
+ });
+ wrapper.appendChild(panel);
+ }
+
+ return wrapper;
+ },
+
+ /**
+ * Create a bare panel shell.
+ *
+ * @param {string} key
+ * @returns {HTMLDivElement}
+ */
+ _buildPanel(key) {
+ const panel = document.createElement("div");
+ panel.className = "mageforge-toolbar-tab-panel";
+ panel.setAttribute("role", "tabpanel");
+ panel.setAttribute("id", `mf-tab-panel-${key}`);
+ panel.dataset.panel = key;
+ return panel;
+ },
+
+ /**
+ * Panel title bar: group name on the left, score ring on the right.
+ *
+ * @param {string} title
+ * @param {boolean} showScore
+ * @param {string} groupKey
+ * @returns {HTMLDivElement}
+ */
+ _buildPanelHeader(title, showScore, groupKey) {
+ const header = document.createElement("div");
+ header.className = "mageforge-tab-panel-header";
+ header.dataset.group = groupKey;
+
+ const titleEl = document.createElement("h2");
+ titleEl.className = "mageforge-tab-panel-title";
+ titleEl.textContent = title;
+ header.appendChild(titleEl);
+
+ if (showScore) {
+ header.appendChild(this._buildScoreWidget());
+ }
+
+ return header;
+ },
+
+ /**
+ * Compact circular score ring shown in every audit panel header.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildScoreWidget() {
+ const gradId = generateId("sg");
+ const widget = document.createElement("div");
+ widget.className = "mageforge-score-widget";
+ widget.innerHTML = `
+ <svg width="50" height="50" viewBox="0 0 44 44" aria-hidden="true">
+ <defs>
+ <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stop-color="#ef4444"></stop>
+ <stop offset="50%" stop-color="#edb04d"></stop>
+ <stop offset="100%" stop-color="#10b981"></stop>
+ </linearGradient>
+ </defs>
+ <circle cx="22" cy="22" r="18" fill="none" stroke="var(--mageforge-border-color, rgba(148,163,184,0.15))" stroke-width="4"></circle>
+ <circle cx="22" cy="22" r="18" fill="none" stroke="url(#${gradId})" stroke-width="4"
+ stroke-dasharray="0 ${SCORE_RING_CIRCUMFERENCE}" stroke-linecap="round"
+ transform="rotate(-90 22 22)" class="mageforge-score-ring"></circle>
+ </svg>
+ <div class="mageforge-score-overlay">
+ <div class="mageforge-score-value">
+ <span class="mageforge-score-number">--</span><span class="mageforge-score-denom">/100</span>
+ </div>
+ <div class="mageforge-score-label">Health Score</div>
+ </div>
+ `;
+ return widget;
+ },
+
+ /**
+ * Home panel: half-arc gauge overview + Check Health Score button.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildHomePanel() {
+ const panel = document.createElement("div");
+ panel.className = "mageforge-home-panel";
+
+ const gradId = generateId("gauge");
+ panel.innerHTML = `
+ <div class="mageforge-toolbar-health-wrapper">
+ <svg viewBox="0 0 120 70" class="mageforge-toolbar-health-gauge" aria-hidden="true">
+ <defs>
+ <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stop-color="#ef4444"></stop>
+ <stop offset="50%" stop-color="#edb04d"></stop>
+ <stop offset="100%" stop-color="#10b981"></stop>
+ </linearGradient>
+ </defs>
+ <path d="M 10 65 A 50 50 0 0 1 110 65"
+ fill="none" stroke="var(--mageforge-border-color)" stroke-width="10" stroke-linecap="round"></path>
+ <path d="M 10 65 A 50 50 0 0 1 110 65"
+ fill="none" stroke="url(#${gradId})" stroke-width="10" stroke-linecap="round"
+ stroke-dasharray="0 ${GAUGE_ARC_LENGTH}" class="mageforge-health-gauge-progress"></path>
+ <line class="mageforge-health-gauge-needle"
+ x1="60" y1="65" x2="60" y2="20"
+ stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" opacity="0"></line>
+ <circle cx="60" cy="65" r="4" fill="rgba(255,255,255,0.4)"></circle>
+ </svg>
+ <div class="mageforge-toolbar-health-score-text">
+ <div class="mageforge-toolbar-health-score-value">
+ <span class="mageforge-toolbar-health-score-number">--</span>
+ <span class="mageforge-toolbar-health-score-max">/100</span>
+ </div>
+ <div class="mageforge-toolbar-health-score-label">Overall Health Score</div>
+ </div>
+ </div>
+ `;
+
+ // Check Health Score button + Reset side by side
+ const btnRow = document.createElement("div");
+ btnRow.className = "mageforge-home-btn-row";
+
+ this.runAllButton = document.createElement("button");
+ this.runAllButton.type = "button";
+ this.runAllButton.className = "mageforge-group-run-btn";
+ this.runAllButton.innerHTML = `
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+ Perform Full Check
+ `;
+ this.runAllButton.onclick = (e) => {
+ e.stopPropagation();
+ this.runAllAuditsForScore();
+ };
+ btnRow.appendChild(this.runAllButton);
+
+ // Reset button next to Perform Full Check
+ this.resetButton = document.createElement("button");
+ this.resetButton.type = "button";
+ this.resetButton.className = "mageforge-group-reset-btn";
+ this.resetButton.title = "Reset score and deactivate all audits";
+ this.resetButton.setAttribute(
+ "aria-label",
+ "Reset score and deactivate all audits",
+ );
+ this.resetButton.innerHTML =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> Reset';
+ this.resetButton.onclick = (e) => {
+ e.stopPropagation();
+ this.resetScore();
+ };
+ btnRow.appendChild(this.resetButton);
+ // btnRow held as ref; rendered in footer action bar via _updateFooterActions
+
+ panel.appendChild(this._buildPageContext());
+ panel.appendChild(this._buildQuickStats());
+
+ // Category score breakdown
+ const categories = document.createElement("div");
+ categories.className = "mageforge-dashboard-categories";
+ [...this.getAuditGroups()]
+ .sort((a, b) => a.label.localeCompare(b.label))
+ .forEach((group) => {
+ const card = document.createElement("div");
+ card.className = "mageforge-dashboard-category";
+ card.style.setProperty(
+ "--category-color",
+ `var(--mageforge-group-color-${group.key})`,
+ );
+ card.innerHTML = `
+ <span class="mageforge-dashboard-category-label">${group.label}</span>
+ <span class="mageforge-dashboard-category-score" data-dashboard-group-score="${group.key}">--</span>
+ `;
+ categories.appendChild(card);
+ });
+ panel.appendChild(categories);
+
+ // Issues list – populated by updateDashboardIssues()
+ this.dashboardIssuesEl = document.createElement("div");
+ this.dashboardIssuesEl.className = "mageforge-dashboard-issues";
+ panel.appendChild(this.dashboardIssuesEl);
+
+ panel.appendChild(
+ Object.assign(document.createElement("p"), {
+ className: "mageforge-home-hint",
+ textContent: "Select a category on the left for detailed checks.",
+ }),
+ );
+
+ return panel;
+ },
+
+ _buildPageContext() {
+ const classes = document.body.className;
+ let pageType = "Page";
+ if (classes.includes("catalog-product-view")) pageType = "Product";
+ else if (classes.includes("catalog-category-view")) pageType = "Category";
+ else if (classes.includes("checkout-index-index")) pageType = "Checkout";
+ else if (classes.includes("checkout-cart-index")) pageType = "Cart";
+ else if (classes.includes("catalogsearch-result-index"))
+ pageType = "Search";
+ else if (classes.includes("cms-index-index")) pageType = "Homepage";
+ else if (classes.includes("cms-page-view")) pageType = "CMS Page";
+ else if (classes.includes("customer-account")) pageType = "Account";
+
+ const rawTitle = document.title.split(" - ")[0].trim();
+ const title =
+ rawTitle.length > 36 ? rawTitle.slice(0, 34) + "\u2026" : rawTitle;
+ const path = location.pathname.replace(/\/+$/, "") || "/";
+ const displayPath = path.length > 34 ? "\u2026" + path.slice(-32) : path;
+
+ const el = document.createElement("div");
+ el.className = "mageforge-page-context";
+
+ const typeBadge = document.createElement("span");
+ typeBadge.className = "mageforge-page-context-type";
+ typeBadge.textContent = pageType;
+
+ const titleEl = document.createElement("span");
+ titleEl.className = "mageforge-page-context-title";
+ titleEl.textContent = title || "(no title)";
+ titleEl.title = document.title;
+
+ const urlEl = document.createElement("span");
+ urlEl.className = "mageforge-page-context-url";
+ urlEl.textContent = displayPath;
+ urlEl.title = path;
+
+ el.appendChild(typeBadge);
+ el.appendChild(titleEl);
+ if (pageType !== "Homepage" && path !== "/") el.appendChild(urlEl);
+ return el;
+ },
+
+ _buildQuickStats() {
+ const allImgs = [...document.querySelectorAll("img")].filter(
+ (img) => !this.container?.contains(img),
+ );
+ const imgNoAlt = allImgs.filter(
+ (img) => img.getAttribute("alt") === null,
+ ).length;
+ const imgNoLazy = allImgs.filter(
+ (img) => !img.getAttribute("loading"),
+ ).length;
+ const extScripts = document.querySelectorAll("script[src]").length;
+ const inlineScripts = document.querySelectorAll("script:not([src])").length;
+ const stylesheets = document.querySelectorAll(
+ 'link[rel="stylesheet"]',
+ ).length;
+
+ const el = document.createElement("div");
+ el.className = "mageforge-quick-stats";
+
+ const heading = document.createElement("p");
+ heading.className = "mageforge-section-heading";
+ heading.textContent = "Page Overview";
+ el.appendChild(heading);
+
+ const grid = document.createElement("div");
+ grid.className = "mageforge-quick-stats-grid";
+
+ const items = [
+ {
+ value: allImgs.length,
+ label: "Images",
+ sub:
+ imgNoAlt > 0
+ ? `${imgNoAlt} no alt`
+ : imgNoLazy > 0
+ ? `${imgNoLazy} no lazy`
+ : "all good",
+ warn: imgNoAlt > 0,
+ },
+ {
+ value: extScripts,
+ label: "JS Files",
+ sub: `${inlineScripts} inline`,
+ warn: false,
+ },
+ {
+ value: stylesheets,
+ label: "CSS Files",
+ sub: null,
+ warn: false,
+ },
+ ];
+
+ items.forEach(({ value, label, sub, warn }) => {
+ const item = document.createElement("div");
+ item.className = "mageforge-quick-stat";
+
+ const valueEl = document.createElement("span");
+ valueEl.className = `mageforge-quick-stat-value${
+ warn ? " mageforge-quick-stat-value--warn" : ""
+ }`;
+ valueEl.textContent = String(value);
+
+ const labelEl = document.createElement("span");
+ labelEl.className = "mageforge-quick-stat-label";
+ labelEl.textContent = label;
+
+ item.appendChild(valueEl);
+ item.appendChild(labelEl);
+
+ if (sub !== null) {
+ const subEl = document.createElement("span");
+ subEl.className = `mageforge-quick-stat-sub${
+ warn ? " mageforge-quick-stat-sub--warn" : ""
+ }`;
+ subEl.textContent = sub;
+ item.appendChild(subEl);
+ }
+
+ grid.appendChild(item);
+ });
+
+ el.appendChild(grid);
+ return el;
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Footer
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Footer row: export controls + credit line.
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildMenuFooter() {
+ const footer = document.createElement("div");
+ footer.className = "mageforge-toolbar-menu-footer";
+
+ // Export format row ──────────────────────────────────────────────────
+ const exportRow = document.createElement("div");
+ exportRow.className = "mageforge-footer-theme-row";
+ this._exportBtnRow = exportRow;
+ const exportGroup = document.createElement("div");
+ exportGroup.className = "mageforge-theme-toggle";
+ const exportLabel = document.createElement("span");
+ exportLabel.className = "mageforge-footer-theme-label";
+ exportLabel.textContent = "Export";
+ exportGroup.appendChild(exportLabel);
+ [
+ ["json", "JSON"],
+ ["md", "MD"],
+ ["txt", "TXT"],
+ ].forEach(([fmt, label]) => {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "mageforge-theme-btn mageforge-export-btn--disabled";
+ btn.dataset.exportFormat = fmt;
+ btn.textContent = label;
+ btn.disabled = true;
+ btn.setAttribute("aria-label", `Export findings as ${label}`);
+ btn.title = `Export findings as ${label}`;
+ btn.onclick = (e) => {
+ e.stopPropagation();
+ this.exportFindings(fmt);
+ };
+ exportGroup.appendChild(btn);
+ });
+ exportRow.appendChild(exportGroup);
+ footer.appendChild(exportRow);
+
+ // Credit line (left side of export row) ─────────────────────────────
+ const credit = document.createElement("div");
+ credit.className = "mageforge-toolbar-menu-credit";
+ credit.innerHTML =
+ 'Built with <span class="mageforge-toolbar-menu-credit-heart">\u2764</span> by <a href="https://github.com/OpenForgeProject/mageforge" target="_blank" rel="noopener noreferrer" class="mageforge-toolbar-menu-credit-link">MageForge</a>';
+ exportRow.insertBefore(credit, exportRow.firstChild);
+
+ // Populate nav action bar for the initially active tab (home).
+ // footerActionBar was already created in _buildTabNav().
+ this._updateFooterActions("home");
+ this._updateResetAllButton();
+
+ return footer;
+ },
+
+ /**
+ * Populate the footer action bar with the run/reset buttons for the given tab.
+ *
+ * @param {string} key – Tab key ("home" or a group key like "wcag")
+ */
+ _updateFooterActions(key) {
+ if (!this.footerActionBar) return;
+ this.footerActionBar.innerHTML = "";
+
+ const row = document.createElement("div");
+ row.className = "mageforge-footer-btn-row";
+
+ if (key === "home") {
+ if (!this.runAllButton) return;
+ row.appendChild(this.runAllButton);
+ row.appendChild(this.resetButton);
+ } else {
+ const runBtn = this[`runGroupButton-${key}`];
+ const resetBtn = this[`groupResetButton-${key}`];
+ if (!runBtn) return;
+ row.appendChild(runBtn);
+ if (resetBtn) row.appendChild(resetBtn);
+ }
+
+ this.footerActionBar.appendChild(row);
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Burger / trigger button
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Build the persistent trigger button (logo + label).
+ *
+ * @returns {HTMLDivElement}
+ */
+ _buildBurgerButton() {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "mageforge-toolbar-burger";
+ btn.title = "Audit tools";
+ btn.setAttribute("aria-label", "Open audit tools menu");
+ btn.setAttribute("aria-expanded", "false");
+ btn.innerHTML = `
+ <div class="mageforge-toolbar-burger-logo">${createLogoSvg("white")}</div>
+ <span class="mageforge-toolbar-burger-label">MageForge</span>
+ `;
+ btn.onclick = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.toggleMenu();
+ };
+ return btn;
+ },
+
+ // ────────────────────────────────────────────────────────────────────────
+ // Tab switching
+ // ────────────────────────────────────────────────────────────────────────
+
+ /**
+ * Activate a tab and show its panel; hide all others.
+ *
+ * @param {string} key
+ */
+ switchTab(key) {
+ this.activeTab = key;
+ if (!this.menu) return;
+
+ this.menu.querySelectorAll(".mageforge-toolbar-tab-btn").forEach((btn) => {
+ const active = btn.dataset.tab === key;
+ btn.classList.toggle("mageforge-tab-active", active);
+ btn.setAttribute("aria-selected", String(active));
+ btn.setAttribute("tabindex", active ? "0" : "-1");
+ });
+
+ this.menu
+ .querySelectorAll(".mageforge-toolbar-tab-panel")
+ .forEach((panel) => {
+ const active = panel.dataset.panel === key;
+ panel.classList.toggle("mageforge-tab-panel-active", active);
+ active
+ ? panel.removeAttribute("hidden")
+ : panel.setAttribute("hidden", "");
+ });
+
+ this._updateFooterActions(key);
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/ui/constants.js b/src/view/frontend/web/js/toolbar/ui/constants.js
new file mode 100644
index 00000000..a49fbfe9
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/ui/constants.js
@@ -0,0 +1,38 @@
+// ── Constants ──────────────────────────────────────────────────────────────
+
+export const LOGO_SVG_PATH =
+ "M176 0L0 101.614V297L176 398.614L352 297V101.614L176 0ZM39 275.5V124L76.2391 101.614L101.5 162L126.5 73.4393L164.5 51.5V346.939L126.5 325V188L108.5 239H95L76.2391 188V297L39 275.5ZM187.5 346.939V51.5L313 124V170H275.5V146.368L225.5 117.5V188H280V226.5H225.5V325L187.5 346.939Z";
+
+export const ICON_HOME =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>';
+
+export const GROUP_ICONS = {
+ wcag: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path><circle cx="12" cy="12" r="3"></circle></svg>',
+ "html-quality":
+ '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>',
+ performance:
+ '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>',
+ seo: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>',
+};
+
+export const GAUGE_ARC_LENGTH = 157.08; // π × r(50) — half-arc stroke length
+export const SCORE_RING_CIRCUMFERENCE = 113.1; // 2π × r(18) — ring stroke length
+
+export function createLogoSvg(fill) {
+ return `<svg width="24" height="27" viewBox="0 0 352 399" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="${LOGO_SVG_PATH}" fill="${fill}"></path></svg>`;
+}
+
+/**
+ * Generate a short random ID for use in SVG gradient/clip-path IDs.
+ * Falls back to Math.random() when crypto.randomUUID() is unavailable
+ * (e.g. non-secure contexts).
+ *
+ * @param {string} prefix
+ * @returns {string}
+ */
+export function generateId(prefix) {
+ const rand =
+ globalThis.crypto?.randomUUID?.()?.slice(0, 8) ??
+ Math.random().toString(36).slice(2, 10);
+ return `mf-${prefix}-${rand}`;
+}
diff --git a/src/view/frontend/web/js/toolbar/ui/controls.js b/src/view/frontend/web/js/toolbar/ui/controls.js
new file mode 100644
index 00000000..33838406
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/ui/controls.js
@@ -0,0 +1,114 @@
+/**
+ * MageForge Toolbar – Menu lifecycle and focus trap
+ *
+ * toggleMenu / openMenu / closeMenu / destroyToolbar
+ * _getFocusableEls / _trapFocus / _releaseFocusTrap / setTheme
+ */
+
+export const controls = {
+ toggleMenu() {
+ this.menuOpen ? this.closeMenu() : this.openMenu();
+ },
+
+ openMenu() {
+ this.menuOpen = true;
+ this.menu.classList.add("mageforge-menu-open");
+ this.burgerButton.classList.add("mageforge-active");
+ this.burgerButton.setAttribute("aria-expanded", "true");
+ this._trapFocus();
+ },
+
+ closeMenu() {
+ this.menuOpen = false;
+ this.menu.classList.remove("mageforge-menu-open");
+ this.burgerButton.classList.remove("mageforge-active");
+ this.burgerButton.setAttribute("aria-expanded", "false");
+ this._releaseFocusTrap();
+ this.burgerButton?.focus();
+ },
+
+ /**
+ * Returns all currently focusable elements within the open menu.
+ *
+ * @returns {HTMLElement[]}
+ */
+ _getFocusableEls() {
+ return Array.from(
+ this.menu.querySelectorAll(
+ 'button:not([disabled]):not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',
+ ),
+ ).filter((el) => !el.closest("[hidden]"));
+ },
+
+ /**
+ * Trap keyboard focus inside the menu and close on Escape.
+ */
+ _trapFocus() {
+ this._focusTrapHandler = (e) => {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ this.closeMenu();
+ return;
+ }
+ if (e.key !== "Tab") return;
+ const focusable = this._getFocusableEls();
+ if (!focusable.length) return;
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ if (e.shiftKey) {
+ if (document.activeElement === first) {
+ e.preventDefault();
+ last.focus();
+ }
+ } else {
+ if (document.activeElement === last) {
+ e.preventDefault();
+ first.focus();
+ }
+ }
+ };
+ this.menu.addEventListener("keydown", this._focusTrapHandler);
+ const focusable = this._getFocusableEls();
+ if (focusable.length) focusable[0].focus();
+ },
+
+ /**
+ * Remove the focus trap listener and clean up.
+ */
+ _releaseFocusTrap() {
+ if (this._focusTrapHandler) {
+ this.menu?.removeEventListener("keydown", this._focusTrapHandler);
+ this._focusTrapHandler = null;
+ }
+ },
+
+ destroyToolbar() {
+ if (this._outsideClickHandler) {
+ document.removeEventListener("click", this._outsideClickHandler);
+ this._outsideClickHandler = null;
+ }
+ this._releaseFocusTrap();
+ if (this.container?.parentNode)
+ this.container.parentNode.removeChild(this.container);
+ this.container = null;
+ this.menu = null;
+ this.burgerButton = null;
+ this.runAllButton = null;
+ this.resetButton = null;
+ this._exportBtnRow = null;
+ this.menuOpen = false;
+ },
+
+ /**
+ * Apply a colour theme to the toolbar container.
+ *
+ * @param {'dark'|'auto'|'light'} theme
+ */
+ setTheme(theme) {
+ this.currentTheme = theme;
+ try {
+ localStorage.setItem("mageforge-theme", theme);
+ } catch (_) {}
+ if (this.container) this.container.setAttribute("data-theme", theme);
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/ui/items.js b/src/view/frontend/web/js/toolbar/ui/items.js
new file mode 100644
index 00000000..26f75577
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/ui/items.js
@@ -0,0 +1,408 @@
+/**
+ * MageForge Toolbar – Audit items, findings, and dashboard summaries
+ *
+ * createMenuItem / setAuditFindings / setAuditActive
+ * updateToggleAllButton / updateHomeSummary / updateDashboardIssues / updateExportButton
+ */
+
+import { getReadableSelector } from "../audits/highlight.js";
+import { GROUP_ICONS } from "./constants.js";
+
+export const itemMethods = {
+ /**
+ * Create a single audit row: icon | label + status badge | toggle | findings list.
+ *
+ * @param {string} key
+ * @param {string} icon
+ * @param {string} label
+ * @param {string} description
+ * @param {Function} callback
+ * @param {?string} groupKey
+ * @returns {HTMLDivElement}
+ */
+ createMenuItem(key, icon, label, description, callback, groupKey = null) {
+ const item = document.createElement("div");
+ item.setAttribute("role", "button");
+ item.setAttribute("tabindex", "0");
+ item.className = "mageforge-toolbar-menu-item";
+ item.dataset.auditKey = key;
+ if (groupKey) item.dataset.groupKey = groupKey;
+ item.setAttribute("aria-pressed", "false");
+
+ item.innerHTML = `
+ <span class="mageforge-toolbar-menu-icon">${icon}</span>
+ <span class="mageforge-toolbar-menu-text">
+ <span class="mageforge-toolbar-menu-label-row">
+ <span class="mageforge-toolbar-menu-label">${label}</span>
+ <span class="mageforge-toolbar-menu-status" aria-live="polite" aria-atomic="true"></span>
+ </span>
+ <span class="mageforge-toolbar-menu-desc"></span>
+ </span>
+ <span class="mageforge-toolbar-menu-toggle"></span>
+ `;
+ item.querySelector(".mageforge-toolbar-menu-desc").textContent =
+ description;
+
+ // Findings list – populated by setAuditFindings(); events never bubble to the toggle
+ const findings = document.createElement("div");
+ findings.className = "mageforge-audit-findings";
+ findings.addEventListener("click", (e) => e.stopPropagation());
+ findings.addEventListener("keydown", (e) => e.stopPropagation());
+ findings.addEventListener("keyup", (e) => e.stopPropagation());
+ item.appendChild(findings);
+
+ item.onclick = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ callback();
+ };
+ item.onkeydown = (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ e.stopPropagation();
+ callback();
+ }
+ if (e.key === " ") {
+ e.preventDefault();
+ }
+ };
+ item.onkeyup = (e) => {
+ if (e.key === " ") {
+ e.stopPropagation();
+ callback();
+ }
+ };
+
+ return item;
+ },
+
+ /**
+ * Populate (or clear) the findings list beneath an audit item.
+ * Each row scrolls to and briefly highlights the element on click.
+ *
+ * @param {string} key
+ * @param {Array<{el: Element, selector?: string, severity?: 'error'|'warning', action?: string}>} findings
+ */
+ setAuditFindings(key, findings) {
+ if (!this.menu) return;
+ const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+ if (!item) return;
+ const container = item.querySelector(".mageforge-audit-findings");
+ if (!container) return;
+
+ // Store finding counts on the item for badge aggregation
+ let errorCount = 0;
+ let warningCount = 0;
+ findings?.forEach((f) => {
+ if (f.severity === "warning") warningCount++;
+ else errorCount++;
+ });
+ item.dataset.findingErrors = String(errorCount);
+ item.dataset.findingWarnings = String(warningCount);
+
+ container.innerHTML = "";
+ container.classList.remove("mageforge-findings-open");
+
+ if (!findings?.length) {
+ container.classList.remove("mageforge-has-findings");
+ return;
+ }
+
+ container.classList.add("mageforge-has-findings");
+
+ const toggleBtn = document.createElement("button");
+ toggleBtn.type = "button";
+ toggleBtn.className = "mageforge-findings-toggle";
+ toggleBtn.setAttribute("aria-expanded", "false");
+ toggleBtn.innerHTML = `
+ <svg class="mageforge-findings-chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
+ <span class="mageforge-findings-toggle-text">Show affected elements (${findings.length})</span>
+ `;
+ toggleBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const isOpen = container.classList.toggle("mageforge-findings-open");
+ toggleBtn.setAttribute("aria-expanded", String(isOpen));
+ const textEl = toggleBtn.querySelector(".mageforge-findings-toggle-text");
+ if (textEl)
+ textEl.textContent = isOpen
+ ? `Hide affected elements (${findings.length})`
+ : `Show affected elements (${findings.length})`;
+ });
+ container.appendChild(toggleBtn);
+
+ const list = document.createElement("div");
+ list.className = "mageforge-findings-list";
+
+ findings.forEach(
+ (
+ { el, selector, severity = "error", action = "Show Element" },
+ index,
+ ) => {
+ const selectorStr = selector ?? getReadableSelector(el);
+ const isLast = index === findings.length - 1;
+
+ const row = document.createElement("div");
+ row.className = `mageforge-audit-finding mageforge-audit-finding--${severity}`;
+
+ const treeEl = document.createElement("span");
+ treeEl.className = "mageforge-finding-tree";
+ treeEl.setAttribute("aria-hidden", "true");
+ treeEl.textContent = `${isLast ? "\u2514" : "\u251C"}\u2500`;
+
+ const selectorEl = document.createElement("span");
+ selectorEl.className = "mageforge-finding-selector";
+ selectorEl.setAttribute("title", selectorStr);
+ selectorEl.textContent = selectorStr;
+
+ const actionEl = document.createElement("span");
+ actionEl.className = "mageforge-finding-action";
+ actionEl.textContent = action;
+
+ row.appendChild(treeEl);
+ row.appendChild(selectorEl);
+ row.appendChild(actionEl);
+
+ row.addEventListener("click", (e) => {
+ e.stopPropagation();
+ el.scrollIntoView({ behavior: "smooth", block: "center" });
+ el.classList.add("mageforge-finding-flash");
+ setTimeout(
+ () => el.classList.remove("mageforge-finding-flash"),
+ 1200,
+ );
+ });
+ list.appendChild(row);
+ },
+ );
+
+ container.appendChild(list);
+ },
+
+ /**
+ * Toggle the active visual state of an audit item.
+ * Clears findings and status badge on deactivation.
+ *
+ * @param {string} key
+ * @param {boolean} active
+ */
+ setAuditActive(key, active) {
+ if (!this.menu) return;
+ const item = this.menu.querySelector(`[data-audit-key="${key}"]`);
+ if (!item) return;
+
+ item.classList.toggle("mageforge-active", active);
+ item.setAttribute("aria-pressed", String(active));
+
+ if (!active) {
+ item.classList.remove(
+ "mageforge-active--error",
+ "mageforge-active--warning",
+ );
+ const status = item.querySelector(".mageforge-toolbar-menu-status");
+ if (status) {
+ status.textContent = "";
+ status.className = "mageforge-toolbar-menu-status";
+ }
+ this.setAuditFindings(key, []);
+ }
+
+ this.updateToggleAllButton();
+ this.updateHomeSummary();
+ this.updateExportButton();
+ this._updateResetAllButton();
+ },
+
+ /** No-op – retained for compatibility. */
+ updateToggleAllButton() {},
+
+ /**
+ * Rebuild the compact issues list on the Dashboard panel.
+ */
+ updateDashboardIssues() {
+ if (!this.dashboardIssuesEl) return;
+
+ /** @type {Array<{label: string, count: number, severity: string, groupKey: string|null}>} */
+ const rows = [];
+ this.menu?.querySelectorAll("[data-audit-key]").forEach((item) => {
+ let errors = parseInt(item.dataset.findingErrors || "0", 10);
+ let warnings = parseInt(item.dataset.findingWarnings || "0", 10);
+
+ // Badge-only audits: fall back to the status badge (same logic as updateHomeSummary)
+ if (!errors && !warnings) {
+ const status = item.querySelector(".mageforge-toolbar-menu-status");
+ const count = parseInt(status?.textContent || "0", 10) || 0;
+ if (count > 0) {
+ if (
+ status.classList.contains("mageforge-toolbar-menu-status--error")
+ ) {
+ errors = count;
+ } else if (
+ status.classList.contains("mageforge-toolbar-menu-status--warning")
+ ) {
+ warnings = count;
+ }
+ }
+ }
+
+ if (!errors && !warnings) return;
+ const label =
+ item.querySelector(".mageforge-toolbar-menu-label")?.textContent ?? "";
+ const groupKey = item.dataset.groupKey ?? null;
+ if (errors)
+ rows.push({ label, count: errors, severity: "error", groupKey });
+ if (warnings)
+ rows.push({ label, count: warnings, severity: "warning", groupKey });
+ });
+
+ this.dashboardIssuesEl.innerHTML = "";
+
+ if (!rows.length) return;
+
+ // Errors first, then warnings, each group sorted by count desc
+ rows.sort((a, b) => {
+ if (a.severity !== b.severity) return a.severity === "error" ? -1 : 1;
+ return b.count - a.count;
+ });
+
+ const heading = document.createElement("p");
+ heading.className = "mageforge-dashboard-issues-heading";
+ heading.textContent = "Issues found";
+ this.dashboardIssuesEl.appendChild(heading);
+
+ rows.forEach(({ label, count, severity, groupKey }) => {
+ const row = document.createElement("div");
+ row.className = `mageforge-dashboard-issue mageforge-dashboard-issue--${severity}`;
+
+ const countEl = document.createElement("span");
+ countEl.className = "mageforge-dashboard-issue-count";
+ countEl.textContent = String(count);
+
+ const labelEl = document.createElement("span");
+ labelEl.className = "mageforge-dashboard-issue-label";
+ labelEl.textContent = label;
+
+ row.appendChild(countEl);
+ row.appendChild(labelEl);
+
+ if (groupKey) {
+ const groupLabel =
+ this.getAuditGroups().find((g) => g.key === groupKey)?.label ??
+ groupKey;
+ const badge = document.createElement("button");
+ badge.type = "button";
+ badge.className = "mageforge-dashboard-issue-group";
+ badge.style.setProperty(
+ "--issue-group-color",
+ `var(--mageforge-group-color-${groupKey})`,
+ );
+ badge.innerHTML = GROUP_ICONS[groupKey] ?? "";
+ badge.title = `Jump to ${groupLabel}`;
+ badge.setAttribute("aria-label", `Jump to ${groupLabel}`);
+ badge.onclick = (e) => {
+ e.stopPropagation();
+ this.switchTab(groupKey);
+ };
+ row.appendChild(badge);
+ }
+
+ this.dashboardIssuesEl.appendChild(row);
+ });
+ },
+
+ /**
+ * Update error/warning badges on the left navigation tabs.
+ * Counts actual findings (affected elements), not just audits.
+ */
+ updateHomeSummary() {
+ if (!this.menu) return;
+
+ // Count actual findings (elements) per group
+ const groupCounts = {};
+ this.menu.querySelectorAll("[data-audit-key]").forEach((item) => {
+ let errors = parseInt(item.dataset.findingErrors || "0", 10);
+ let warnings = parseInt(item.dataset.findingWarnings || "0", 10);
+
+ // Badge-only audits (page-level checks) never call setAuditFindings, so
+ // findingErrors/findingWarnings stay at 0. Fall back to the status badge.
+ if (!errors && !warnings) {
+ const status = item.querySelector(".mageforge-toolbar-menu-status");
+ const count = parseInt(status?.textContent || "0", 10) || 0;
+ if (count > 0) {
+ if (
+ status.classList.contains("mageforge-toolbar-menu-status--error")
+ ) {
+ errors = count;
+ } else if (
+ status.classList.contains("mageforge-toolbar-menu-status--warning")
+ ) {
+ warnings = count;
+ }
+ }
+ }
+
+ if (!errors && !warnings) return;
+
+ const groupKey = item.dataset.groupKey;
+ if (!groupKey) return;
+
+ if (!groupCounts[groupKey]) {
+ groupCounts[groupKey] = { errors: 0, warnings: 0 };
+ }
+
+ groupCounts[groupKey].errors += errors;
+ groupCounts[groupKey].warnings += warnings;
+ });
+
+ // Reset ALL badges first, then populate only those with findings
+ this.menu.querySelectorAll("[data-tab-badges-for]").forEach((container) => {
+ const errorBadge = container.querySelector('[data-type="errors"]');
+ const warningBadge = container.querySelector('[data-type="warnings"]');
+ if (errorBadge) {
+ errorBadge.textContent = "";
+ errorBadge.style.display = "none";
+ }
+ if (warningBadge) {
+ warningBadge.textContent = "";
+ warningBadge.style.display = "none";
+ }
+ });
+
+ this.updateDashboardIssues();
+
+ // Update badges for each group tab with findings
+ Object.entries(groupCounts).forEach(([groupKey, counts]) => {
+ const container = this.menu.querySelector(
+ `[data-tab-badges-for="${groupKey}"]`,
+ );
+ if (!container) return;
+
+ const errorBadge = container.querySelector('[data-type="errors"]');
+ const warningBadge = container.querySelector('[data-type="warnings"]');
+
+ if (counts.errors > 0 && errorBadge) {
+ errorBadge.textContent = counts.errors;
+ errorBadge.style.display = "inline-flex";
+ }
+
+ if (counts.warnings > 0 && warningBadge) {
+ warningBadge.textContent = counts.warnings;
+ warningBadge.style.display = "inline-flex";
+ }
+ });
+ },
+
+ /**
+ * Enable or disable the Export JSON button based on whether any audits
+ * are currently active.
+ */
+ updateExportButton() {
+ if (!this._exportBtnRow) return;
+ const hasActive = this.activeAudits.size > 0;
+ this._exportBtnRow
+ .querySelectorAll("[data-export-format]")
+ .forEach((btn) => {
+ btn.disabled = !hasActive;
+ btn.classList.toggle("mageforge-export-btn--disabled", !hasActive);
+ });
+ },
+};
diff --git a/src/view/frontend/web/js/toolbar/ui/score.js b/src/view/frontend/web/js/toolbar/ui/score.js
new file mode 100644
index 00000000..b34ded85
--- /dev/null
+++ b/src/view/frontend/web/js/toolbar/ui/score.js
@@ -0,0 +1,127 @@
+/**
+ * MageForge Toolbar – Score animations
+ *
+ * updateHealthScore / updateGroupScore / resetScore
+ */
+
+import { GAUGE_ARC_LENGTH, SCORE_RING_CIRCUMFERENCE } from "./constants.js";
+
+export const scoreMethods = {
+ /**
+ * Animate all score gauges and rings to the given score (0-100).
+ *
+ * @param {number} score
+ */
+ updateHealthScore(score) {
+ if (!this.menu) return;
+
+ // Half-arc gauge in the Home panel
+ const progress = this.menu.querySelector(
+ ".mageforge-health-gauge-progress",
+ );
+ const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
+ if (progress)
+ progress.setAttribute(
+ "stroke-dasharray",
+ `${((score / 100) * GAUGE_ARC_LENGTH).toFixed(2)} ${GAUGE_ARC_LENGTH}`,
+ );
+ if (needle) {
+ const rad = (1 - score / 100) * Math.PI;
+ needle.setAttribute("x2", (60 + 45 * Math.cos(rad)).toFixed(1));
+ needle.setAttribute("y2", (65 - 45 * Math.sin(rad)).toFixed(1));
+ needle.setAttribute("opacity", "1");
+ }
+ this.menu
+ .querySelectorAll(".mageforge-toolbar-health-score-number")
+ .forEach((el) => {
+ el.textContent = score;
+ });
+
+ // Circular rings in audit panel headers
+ this.menu.querySelectorAll(".mageforge-score-ring").forEach((ring) => {
+ ring.setAttribute(
+ "stroke-dasharray",
+ `${((score / 100) * SCORE_RING_CIRCUMFERENCE).toFixed(2)} ${SCORE_RING_CIRCUMFERENCE}`,
+ );
+ });
+ this.menu.querySelectorAll(".mageforge-score-number").forEach((el) => {
+ el.textContent = score;
+ });
+ },
+
+ /**
+ * Update the score ring in a specific group panel header.
+ *
+ * @param {string} groupKey
+ * @param {number} score
+ */
+ updateGroupScore(groupKey, score) {
+ if (!this.menu) return;
+
+ const panel = this.menu.querySelector(`[data-panel="${groupKey}"]`);
+ if (!panel) return;
+
+ const ring = panel.querySelector(".mageforge-score-ring");
+ if (ring) {
+ ring.setAttribute(
+ "stroke-dasharray",
+ `${((score / 100) * SCORE_RING_CIRCUMFERENCE).toFixed(2)} ${SCORE_RING_CIRCUMFERENCE}`,
+ );
+ }
+ const number = panel.querySelector(".mageforge-score-number");
+ if (number) {
+ number.textContent = score;
+ }
+
+ // Also update the dashboard category badge
+ const dashboardScore = this.menu.querySelector(
+ `[data-dashboard-group-score="${groupKey}"]`,
+ );
+ if (dashboardScore) {
+ dashboardScore.textContent = score;
+ dashboardScore.classList.toggle(
+ "mageforge-dashboard-category-score--active",
+ score > 0,
+ );
+ }
+ },
+
+ /**
+ * Reset all score displays and deactivate all audits.
+ */
+ resetScore() {
+ this.deactivateAllAudits();
+ if (!this.menu) return;
+
+ const progress = this.menu.querySelector(
+ ".mageforge-health-gauge-progress",
+ );
+ const needle = this.menu.querySelector(".mageforge-health-gauge-needle");
+ if (progress)
+ progress.setAttribute("stroke-dasharray", `0 ${GAUGE_ARC_LENGTH}`);
+ if (needle) needle.setAttribute("opacity", "0");
+ this.menu
+ .querySelectorAll(".mageforge-toolbar-health-score-number")
+ .forEach((el) => {
+ el.textContent = "--";
+ });
+ this.menu.querySelectorAll(".mageforge-score-ring").forEach((ring) => {
+ ring.setAttribute("stroke-dasharray", `0 ${SCORE_RING_CIRCUMFERENCE}`);
+ });
+ this.menu.querySelectorAll(".mageforge-score-number").forEach((el) => {
+ el.textContent = "--";
+ });
+
+ // Reset dashboard category badges
+ this.menu.querySelectorAll("[data-dashboard-group-score]").forEach((el) => {
+ el.textContent = "--";
+ el.classList.remove("mageforge-dashboard-category-score--active");
+ });
+
+ // Clear dashboard issues list
+ if (this.dashboardIssuesEl) this.dashboardIssuesEl.innerHTML = "";
+
+ // Reset all navigation badges
+ this.updateHomeSummary();
+ },
+};