fix: exclude toolbar elements from tab-order & mark overflow-clipped focusables as unreachable

Author: dermatz

src/view/frontend/web/css/audits/tab-order.css

@@ -58,3 +58,12 @@
 .mageforge-tab-order-badge--negative {
     background: var(--mageforge-color-red);
 }
+
+/* Element is focusable but clipped by an overflow:hidden ancestor (e.g. off-canvas slider item) */
+.mageforge-tab-order-badge--clipped {
+    background: var(--mageforge-color-orange);
+}
+
+.mageforge-tab-order-line--clipped {
+    stroke: var(--mageforge-color-orange);
+}

src/view/frontend/web/js/toolbar/audits/tab-order.js

@@ -40,6 +40,34 @@ function isVisible(el) {
     return style.visibility !== 'hidden' && style.display !== 'none';
 }
 
+/**
+ * Returns true if the element lies completely outside the visible area of an
+ * ancestor with overflow:hidden/clip (e.g. a carousel slide that is off-canvas).
+ */
+function isClippedByAncestor(el) {
+    const elRect = el.getBoundingClientRect();
+    let ancestor = el.parentElement;
+    while (ancestor && ancestor !== document.documentElement) {
+        const style = getComputedStyle(ancestor);
+        const clipsX = ['hidden', 'clip', 'scroll', 'auto'].includes(style.overflowX);
+        const clipsY = ['hidden', 'clip', 'scroll', 'auto'].includes(style.overflowY);
+        if (clipsX || clipsY) {
+            const aRect = ancestor.getBoundingClientRect();
+            // No intersection at all → element is fully clipped away
+            if (
+                elRect.right  <= aRect.left  ||
+                elRect.left   >= aRect.right ||
+                elRect.bottom <= aRect.top   ||
+                elRect.top    >= aRect.bottom
+            ) {
+                return true;
+            }
+        }
+        ancestor = ancestor.parentElement;
+    }
+    return false;
+}
+
 function getTabIndex(el) {
     const value = parseInt(el.getAttribute('tabindex'), 10);
     return isNaN(value) ? 0 : value;
@@ -95,15 +123,17 @@ function renderOverlay(sorted) {
         const cx = Math.round(rect.left + rect.width / 2);
         const cy = Math.round(rect.top);
 
+        const clipped = isClippedByAncestor(el);
         const badge = document.createElement('span');
         badge.className = 'mageforge-tab-order-badge' +
-            (getTabIndex(el) > 0 ? ' mageforge-tab-order-badge--negative' : '');
+            (getTabIndex(el) > 0 ? ' mageforge-tab-order-badge--negative' : '') +
+            (clipped ? ' mageforge-tab-order-badge--clipped' : '');
         badge.textContent = index + 1;
         badge.style.left = cx + 'px';
         badge.style.top = cy + 'px';
         overlay.appendChild(badge);
 
-        return { cx, cy, negative: getTabIndex(el) > 0 };
+        return { cx, cy, negative: getTabIndex(el) > 0, clipped };
     });
 
     // Draw connecting lines between consecutive badges
@@ -114,6 +144,8 @@ function renderOverlay(sorted) {
         line.classList.add('mageforge-tab-order-line');
         if (from.negative || to.negative) {
             line.classList.add('mageforge-tab-order-line--negative');
+        } else if (from.clipped || to.clipped) {
+            line.classList.add('mageforge-tab-order-line--clipped');
         }
         line.setAttribute('x1', from.cx);
         line.setAttribute('y1', from.cy);
@@ -149,6 +181,7 @@ export default {
         }
 
         const allFocusable = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR))
+            .filter(el => !el.closest('.mageforge-toolbar'))
             .filter(isVisible);
 
         if (allFocusable.length === 0) {
@@ -163,7 +196,11 @@ export default {
 
         // Always recompute from the live DOM so detached / newly added elements are handled correctly
         const rerender = () => renderOverlay(
-            sortByTabOrder(Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isVisible))
+            sortByTabOrder(
+                Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR))
+                    .filter(el => !el.closest('.mageforge-toolbar'))
+                    .filter(isVisible)
+            )
         );
 
         // Re-render on resize or scroll (e.g. DevTools panel, page scroll)