feat: add warning styles and enhance audit checks for toolbar elements

Co-authored-by: Copilot <copilot@github.com>

Author: dermatz

src/view/frontend/web/css/toolbar.css

@@ -23,6 +23,8 @@
     --mageforge-color-orange: #fb923c;
     --mageforge-color-pink: #C850C0;
     --mageforge-color-amber: #edb04d;
+    --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15);
+    --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35);
     --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
     --mageforge-bg-dark-alt: rgba(30, 41, 59, 0.98);
     --mageforge-border-color: rgba(148, 163, 184, 0.15);
@@ -262,6 +264,15 @@
     color: var(--mageforge-color-red);
 }
 
+.mageforge-toolbar-menu-item.mageforge-active--warning {
+    background: var(--mageforge-color-amber-alpha-15);
+    border-color: var(--mageforge-color-amber-alpha-35);
+}
+
+.mageforge-toolbar-menu-item.mageforge-active--warning .mageforge-toolbar-menu-label {
+    color: var(--mageforge-color-amber);
+}
+
 .mageforge-toolbar-menu-icon {
     font-size: 16px;
     flex-shrink: 0;
@@ -367,6 +378,12 @@
     border: 1px solid var(--mageforge-color-red-alpha-35);
 }
 
+.mageforge-toolbar-menu-status--warning {
+    color: var(--mageforge-color-amber);
+    background: var(--mageforge-color-amber-alpha-15);
+    border: 1px solid var(--mageforge-color-amber-alpha-35);
+}
+
 /* ============================================================================
    Menu Groups
    ========================================================================== */
@@ -437,6 +454,12 @@
     z-index: 9999997;
 }
 
+.mageforge-audit-overlay--warning {
+    background-color: var(--mageforge-color-amber-alpha-35);
+    outline-color: var(--mageforge-color-amber);
+    outline-style: dashed;
+}
+
 /* ============================================================================
    Feedback Toast
    ========================================================================== */

src/view/frontend/web/js/toolbar/audits.js

@@ -129,7 +129,8 @@ export const auditMethods = {
         if (!status) return;
         status.textContent = message;
         status.className = `mageforge-toolbar-menu-status mageforge-toolbar-menu-status--${type}`;
-        // Reflect error/success on the active item background
+        // Reflect error/warning/success on the active item background
         item.classList.toggle('mageforge-active--error', type === 'error');
+        item.classList.toggle('mageforge-active--warning', type === 'warning');
     },
 };

src/view/frontend/web/js/toolbar/audits/buttons-without-type.js

@@ -10,7 +10,7 @@ import { applyHighlight, clearHighlight } from './highlight.js';
 
 /** @type {import('./index.js').AuditDefinition} */
 export default {
-    key: 'button-without-type',
+    key: 'buttons-without-type',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path><path d="M11 11.5a1.5 1.5 0 0 1 3 0v1.5"></path><path d="M14 12a1.5 1.5 0 0 1 3 0v2"></path><path d="M17 13.5a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path></svg>',
     label: 'Buttons without a type',
     description: 'Highlight a button missing an explicit type attribute (defaults to submit)',
@@ -25,7 +25,9 @@ export default {
             return;
         }
 
-        const buttons = Array.from(document.querySelectorAll('button:not([type])')).filter(btn => {
+        const buttons = Array.from(document.querySelectorAll('button')).filter(btn => {
+            const type = btn.getAttribute('type');
+            if (type !== null && type.trim() !== '') return false;
             if (!btn.offsetParent && getComputedStyle(btn).position !== 'fixed') return false;
             const style = getComputedStyle(btn);
             if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;

src/view/frontend/web/js/toolbar/audits/duplicate-ids.js

@@ -56,6 +56,8 @@ export default {
                 this.key,
                 `Duplicate: ${duplicateIdNames.join(', ')}`
             );
+        } else {
+            context.setAuditDescription(this.key, this.description);
         }
 
         applyHighlight(duplicates, this.key, context);

src/view/frontend/web/js/toolbar/audits/empty-interactive.js

@@ -38,8 +38,8 @@ export default {
             // Text content (excluding whitespace-only)
             if (el.textContent.trim()) return false;
 
-            // Child <img> with non-empty alt
-            if (el.querySelector('img[alt]:not([alt=""])')) return false;
+            // Child <img> with non-empty alt (trimmed)
+            if (Array.from(el.querySelectorAll('img[alt]')).some(img => img.getAttribute('alt')?.trim())) return false;
 
             // Child <svg> with a <title> element
             if (el.querySelector('svg title')?.textContent.trim()) return false;

src/view/frontend/web/js/toolbar/audits/highlight.js

@@ -50,11 +50,13 @@ function scheduleUpdate() {
  * Returns a cleanup function that removes the overlay and deregisters it.
  *
  * @param {Element} el
+ * @param {'error'|'warning'} [severity='error']
  * @returns {function} cleanup
  */
-function createOverlay(el) {
+function createOverlay(el, severity = 'error') {
     const overlay = document.createElement('span');
     overlay.className = AUDIT_OVERLAY_CLASS;
+    if (severity === 'warning') overlay.classList.add('mageforge-audit-overlay--warning');
     document.body.appendChild(overlay);
 
     function update() {
@@ -122,16 +124,22 @@ export function clearHighlight(key) {
  * the first result, and updates the counter badge on the toolbar menu item.
  * Works for any element type – no special casing required in audit code.
  *
- * @param {Element[]}  elements - Elements to mark
- * @param {string}     key      - Audit key (e.g. 'images-without-alt')
- * @param {object}     context  - Alpine toolbar component instance
+ * @param {Element[]}  elements        - Elements to mark
+ * @param {string}     key             - Audit key (e.g. 'images-without-alt')
+ * @param {object}     context         - Alpine toolbar component instance
+ * @param {object}     [options={}]    - Options
+ * @param {'error'|'warning'} [options.severity='error'] - Visual severity level
+ * @param {boolean}    [options.skipBadge=false]  - Skip badge + scroll update
  */
-export function applyHighlight(elements, key, context) {
+export function applyHighlight(elements, key, context, options = {}) {
+    const severity = options.severity ?? 'error';
+    const skipBadge = options.skipBadge ?? false;
+
     // Never flag elements that are part of the MageForge Toolbar itself
     elements = elements.filter(el => !el.closest('.mageforge-toolbar'));
 
     if (elements.length === 0) {
-        context.setAuditCounterBadge(key, '0', 'success');
+        if (!skipBadge) context.setAuditCounterBadge(key, '0', 'success');
         return;
     }
     const cls = `mageforge-audit-${key}`;
@@ -142,11 +150,13 @@ export function applyHighlight(elements, key, context) {
             existing.keys.add(key);
         } else {
             overlayRegistry.set(el, {
-                cleanup: createOverlay(el),
+                cleanup: createOverlay(el, severity),
                 keys: new Set([key]),
             });
         }
     });
-    elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
-    context.setAuditCounterBadge(key, `${elements.length}`, 'error');
+    if (!skipBadge) {
+        elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        context.setAuditCounterBadge(key, `${elements.length}`, severity);
+    }
 }

src/view/frontend/web/js/toolbar/audits/images-without-alt.js

@@ -21,13 +21,35 @@ export default {
             return;
         }
 
-        const images = Array.from(document.querySelectorAll('img')).filter(img => {
+        const visible = Array.from(document.querySelectorAll('img')).filter(img => {
             if (!img.offsetParent && getComputedStyle(img).position !== 'fixed') return false;
             const style = getComputedStyle(img);
-            if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') return false;
-            return !img.hasAttribute('alt') || img.getAttribute('alt').trim() === '';
+            return style.visibility !== 'hidden' && style.display !== 'none' && style.opacity !== '0';
         });
 
-        applyHighlight(images, this.key, context);
+        // Errors: missing alt attribute or whitespace-only alt (e.g. alt="  ")
+        const errors = visible.filter(img => {
+            if (!img.hasAttribute('alt')) return true;
+            const val = img.getAttribute('alt');
+            return val.length > 0 && val.trim() === '';
+        });
+
+        // Warnings: explicit alt="" – intentionally decorative, but flagged for review
+        const warnings = visible.filter(img => img.getAttribute('alt') === '');
+
+        const total = errors.length + warnings.length;
+        if (total === 0) {
+            context.setAuditCounterBadge(this.key, '0', 'success');
+            return;
+        }
+
+        applyHighlight(errors,   this.key, context, { skipBadge: true });
+        applyHighlight(warnings, this.key, context, { severity: 'warning', skipBadge: true });
+
+        // Scroll to first issue (errors take priority)
+        const first = errors[0] ?? warnings[0];
+        if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+        context.setAuditCounterBadge(this.key, `${total}`, errors.length > 0 ? 'error' : 'warning');
     },
 };