accessible-kit 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.5] - 2025-12-21
+
+### Fixed
+- **Focus Trap - Manual Tab Navigation**: Complete rewrite of Tab key handling in Offcanvas and Modal components
+  - **BREAKING CHANGE in behavior**: Focus trap now completely overrides native browser Tab behavior
+  - Always prevents default Tab action and manually controls focus movement
+  - Eliminates `aria-hidden` violations caused by browser trying to focus hidden elements
+  - `updateFocusableElements()` is called on every Tab keypress to catch dynamic DOM changes
+  - Focus only moves through elements in the filtered `focusableElements` list
+  - Properly handles nested collapse components - focus skips closed submenus and includes opened ones
+
+### Details
+**Problem solved:**
+When using Tab key in offcanvas/modal with dynamic content (e.g., collapse menus), the browser's native Tab behavior would attempt to focus elements with `aria-hidden="true"`, causing console warnings and accessibility violations.
+
+**Solution:**
+The focus trap now takes complete control of Tab navigation:
+1. Every Tab keypress prevents default browser behavior
+2. Updates the list of focusable elements to reflect current DOM state
+3. Manually calculates and focuses the next/previous element from the filtered list
+4. Elements inside `aria-hidden="true"` containers are never focused
+
+This ensures perfect compatibility with dynamic components like animated collapse panels in navigation menus.
+
+## [1.0.4] - 2025-12-21
+
+### Fixed
+- **Focus Trap - Initial Implementation**: Improved focus trap in Offcanvas and Modal components
+  - Focus trap now correctly excludes elements with `aria-hidden="true"` and their children
+  - Fixed timing issue where `updateFocusableElements()` was called before CSS visibility changes applied
+  - Focus trap now properly skips hidden elements in collapsed/nested components
+  - Added comprehensive filtering for hidden, invisible, and aria-hidden elements
+  - Removed `visibility: hidden` check from filter to prevent false positives during panel opening
+  - Works correctly with both animated (CSS Grid) and non-animated collapse panels
+
+### Added
+- Added `:focus-visible` styles to Offcanvas theme for better keyboard navigation visibility
+- Added navigation demo with nested collapse submenus to Offcanvas demo page
+
+### Details
+The focus trap improvements ensure that keyboard navigation works correctly in complex scenarios:
+- When offcanvas/modal contains collapse components, Tab key properly skips hidden submenu items
+- Focus is set after CSS transitions complete, preventing "no focusable elements" issue
+- Users can now navigate nested menus with full accessibility support
+
 ## [1.0.3] - 2025-12-20
 
 ### Fixed
@@ -89,6 +134,8 @@ document.addEventListener('DOMContentLoaded', () => {
 - Zero dependencies
 - Full TypeScript-ready exports
 
+[1.0.5]: https://github.com/5ulo/accessible-kit/compare/v1.0.4...v1.0.5
+[1.0.4]: https://github.com/5ulo/accessible-kit/compare/v1.0.3...v1.0.4
 [1.0.3]: https://github.com/5ulo/accessible-kit/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/5ulo/accessible-kit/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/5ulo/accessible-kit/compare/v1.0.0...v1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-kit",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Lightweight, accessible UI component library with full ARIA support. Zero dependencies, vanilla JavaScript.",
   "main": "src/js/index.js",
   "type": "module",

package/src/css/a11y-offcanvas.theme.css

@@ -2,6 +2,12 @@
 /* Obsahuje vizualne nastavenia: farby, velkosti, bordery, radiusy, spacing */
 /* Pre zmenu vzhladu upravte tento subor */
 
+/* Focus visible for all focusable elements inside offcanvas */
+[data-offcanvas-panel] :focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
 /* Offcanvas panel */
 [data-offcanvas-panel] {
     width: 320px;
@@ -70,11 +76,6 @@
     color: #111827;
 }
 
-[data-offcanvas-close]:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
-}
-
 /* Backdrop */
 [data-offcanvas-backdrop] {
     background: rgba(0, 0, 0, 0.5);
@@ -151,7 +152,7 @@
         border: 2px solid currentColor;
     }
 
-    [data-offcanvas-close]:focus {
+    [data-offcanvas-panel] :focus-visible {
         outline-width: 3px;
     }
 }

package/src/js/a11y-modal.js

@@ -126,17 +126,16 @@ class AccessibleModal {
             document.body.classList.add("modal-open");
         }
 
-        // Update focusable elements
-        this.updateFocusableElements();
-
-        // Focus first element
+        // Update focusable elements and focus - needs to wait for CSS to apply
         setTimeout(() => {
+            this.updateFocusableElements();
+
             if (this.firstFocusable) {
                 this.firstFocusable.focus();
             } else {
                 this.modal.focus();
             }
-        }, 100);
+        }, 50);
 
         // Callback
         if (this.options.onOpen) {
@@ -188,11 +187,38 @@ class AccessibleModal {
         this.focusableElements = Array.from(
             this.dialog.querySelectorAll(focusableSelectors.join(","))
         ).filter((el) => {
-            return (
+            // Check if element is visible
+            const isVisible = (
                 el.offsetWidth > 0 ||
                 el.offsetHeight > 0 ||
                 el.getClientRects().length > 0
             );
+
+            if (!isVisible) {
+                return false;
+            }
+
+            // Check if element or any parent has aria-hidden="true"
+            let currentElement = el;
+            while (currentElement && currentElement !== this.dialog) {
+                if (currentElement.getAttribute('aria-hidden') === 'true') {
+                    return false;
+                }
+                currentElement = currentElement.parentElement;
+            }
+
+            // Check if element has hidden attribute
+            if (el.hasAttribute('hidden')) {
+                return false;
+            }
+
+            // Check computed style for display (not visibility, as modal is opening)
+            const style = window.getComputedStyle(el);
+            if (style.display === 'none') {
+                return false;
+            }
+
+            return true;
         });
 
         this.firstFocusable = this.focusableElements[0] || null;
@@ -203,24 +229,39 @@ class AccessibleModal {
     handleFocusTrap(e) {
         if (!this.isOpen || e.key !== "Tab") return;
 
+        // Update focusable elements before each Tab to catch dynamic changes (e.g., collapse panels)
+        this.updateFocusableElements();
+
         // If no focusable elements, prevent default
         if (this.focusableElements.length === 0) {
             e.preventDefault();
             return;
         }
 
+        // Always prevent default Tab behavior - we'll handle focus manually
+        e.preventDefault();
+
+        // Find current element index in focusable list
+        const currentIndex = this.focusableElements.indexOf(document.activeElement);
+
         // Shift + Tab (backward)
         if (e.shiftKey) {
-            if (document.activeElement === this.firstFocusable) {
-                e.preventDefault();
+            if (currentIndex <= 0) {
+                // At first element or not in list - go to last
                 this.lastFocusable.focus();
+            } else {
+                // Go to previous element
+                this.focusableElements[currentIndex - 1].focus();
             }
         }
         // Tab (forward)
         else {
-            if (document.activeElement === this.lastFocusable) {
-                e.preventDefault();
+            if (currentIndex === -1 || currentIndex >= this.focusableElements.length - 1) {
+                // Not in list or at last element - go to first
                 this.firstFocusable.focus();
+            } else {
+                // Go to next element
+                this.focusableElements[currentIndex + 1].focus();
             }
         }
     }

package/src/js/a11y-offcanvas.js

@@ -131,17 +131,16 @@ class AccessibleOffcanvas {
             document.body.classList.add("offcanvas-open");
         }
 
-        // Update focusable elements
-        this.updateFocusableElements();
-
-        // Focus first element
+        // Update focusable elements and focus - needs to wait for CSS to apply
         setTimeout(() => {
+            this.updateFocusableElements();
+
             if (this.firstFocusable) {
                 this.firstFocusable.focus();
             } else {
                 this.panel.focus();
             }
-        }, 100);
+        }, 50);
 
         // Callback
         if (this.options.onOpen) {
@@ -196,11 +195,38 @@ class AccessibleOffcanvas {
         this.focusableElements = Array.from(
             this.panel.querySelectorAll(focusableSelectors.join(","))
         ).filter((el) => {
-            return (
+            // Check if element is visible
+            const isVisible = (
                 el.offsetWidth > 0 ||
                 el.offsetHeight > 0 ||
                 el.getClientRects().length > 0
             );
+
+            if (!isVisible) {
+                return false;
+            }
+
+            // Check if element or any parent has aria-hidden="true"
+            let currentElement = el;
+            while (currentElement && currentElement !== this.panel) {
+                if (currentElement.getAttribute('aria-hidden') === 'true') {
+                    return false;
+                }
+                currentElement = currentElement.parentElement;
+            }
+
+            // Check if element has hidden attribute
+            if (el.hasAttribute('hidden')) {
+                return false;
+            }
+
+            // Check computed style for display (not visibility, as panel is opening)
+            const style = window.getComputedStyle(el);
+            if (style.display === 'none') {
+                return false;
+            }
+
+            return true;
         });
 
         this.firstFocusable = this.focusableElements[0] || null;
@@ -211,24 +237,39 @@ class AccessibleOffcanvas {
     handleFocusTrap(e) {
         if (!this.isOpen || e.key !== "Tab") return;
 
+        // Update focusable elements before each Tab to catch dynamic changes (e.g., collapse panels)
+        this.updateFocusableElements();
+
         // If no focusable elements, prevent default
         if (this.focusableElements.length === 0) {
             e.preventDefault();
             return;
         }
 
+        // Always prevent default Tab behavior - we'll handle focus manually
+        e.preventDefault();
+
+        // Find current element index in focusable list
+        const currentIndex = this.focusableElements.indexOf(document.activeElement);
+
         // Shift + Tab (backward)
         if (e.shiftKey) {
-            if (document.activeElement === this.firstFocusable) {
-                e.preventDefault();
+            if (currentIndex <= 0) {
+                // At first element or not in list - go to last
                 this.lastFocusable.focus();
+            } else {
+                // Go to previous element
+                this.focusableElements[currentIndex - 1].focus();
             }
         }
         // Tab (forward)
         else {
-            if (document.activeElement === this.lastFocusable) {
-                e.preventDefault();
+            if (currentIndex === -1 || currentIndex >= this.focusableElements.length - 1) {
+                // Not in list or at last element - go to first
                 this.firstFocusable.focus();
+            } else {
+                // Go to next element
+                this.focusableElements[currentIndex + 1].focus();
             }
         }
     }

package/src/js/index.js

@@ -2,7 +2,7 @@
  * a11y-kit
  * Lightweight, accessible UI component library with full ARIA support
  *
- * @version 1.0.3
+ * @version 1.0.5
  * @license MIT
  */