accessible-kit 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -5,15 +5,40 @@ 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**: Fixed focus trap in Offcanvas and Modal components
+- **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 (e.g., collapse submenus in navigation)
+  - 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
@@ -109,6 +134,7 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-kit",
-  "version": "1.0.4",
+  "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/js/a11y-modal.js

@@ -194,6 +194,10 @@ class AccessibleModal {
                 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) {
@@ -214,7 +218,7 @@ class AccessibleModal {
                 return false;
             }
 
-            return isVisible;
+            return true;
         });
 
         this.firstFocusable = this.focusableElements[0] || null;
@@ -225,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

@@ -237,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.4
+ * @version 1.0.5
  * @license MIT
  */