accessible-kit 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -5,6 +5,26 @@ 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.4] - 2025-12-21
+
+### Fixed
+- **Focus Trap**: Fixed 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)
+  - Added comprehensive filtering for hidden, invisible, and aria-hidden elements
+  - Removed `visibility: hidden` check from filter to prevent false positives during panel opening
+
+### 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 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
 - Zero dependencies
 - Full TypeScript-ready exports
 
+[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.4",
   "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,34 @@ 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
             );
+
+            // 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 isVisible;
         });
 
         this.firstFocusable = this.focusableElements[0] || null;

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;

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.4
  * @license MIT
  */