accessible-kit 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -5,6 +5,50 @@ 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
+- **CSS Architecture**: Fixed inconsistent placement of animations in Offcanvas and Modal components
+- Moved `transition` properties from `theme.css` to `core.css` for Offcanvas component
+- Moved `transition` properties from `theme.css` to `core.css` for Modal component
+- Animations now work out-of-the-box even when using custom themes without importing `theme.css`
+
+### Changed
+- Updated `package.json` exports to include `style` condition for better CSS import compatibility
+- Improved CSS imports documentation for Tailwind CSS and other bundlers
+
+### Details
+All components now follow consistent CSS architecture:
+- **Core CSS** (`*.core.css`): Contains layout, positioning, behavior, and **animations**
+- **Theme CSS** (`*.theme.css`): Contains only visual styling (colors, spacing, borders, shadows)
+
+This ensures animations work correctly even when developers create custom themes.
+
+## [1.0.2] - 2025-12-20
+
+### Changed
+- Minor version bump for package.json exports improvements
+
 ## [1.0.1] - 2025-12-20
 
 ### Changed
@@ -65,5 +109,8 @@ 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
 [1.0.0]: https://github.com/5ulo/accessible-kit/releases/tag/v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-kit",
-  "version": "1.0.2",
+  "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-modal.core.css

@@ -15,6 +15,8 @@
     justify-content: center;
     visibility: hidden;
     opacity: 0;
+    transition: opacity var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease),
+                visibility var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 [data-modal][aria-hidden="false"] {
@@ -31,6 +33,7 @@
     max-width: 90vw;
     overflow: hidden;
     transform: scale(0.95);
+    transition: transform var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 [data-modal][aria-hidden="false"] [data-modal-dialog] {

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

@@ -5,8 +5,6 @@
 /* Modal wrapper */
 [data-modal] {
     padding: 1rem;
-    transition: opacity var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease),
-                visibility var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 /* Modal dialog */
@@ -16,7 +14,6 @@
     border-radius: 0.5rem;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
         0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    transition: transform var(--a11y-modal-duration, 0.2s) var(--a11y-modal-easing, ease);
 }
 
 /* Modal header */
@@ -208,10 +205,8 @@
     }
 }
 
-/* Reduced motion support */
+/* Reduced motion support for theme transitions */
 @media (prefers-reduced-motion: reduce) {
-    [data-modal],
-    [data-modal-dialog],
     [data-modal-close] {
         transition: none !important;
     }

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

@@ -9,6 +9,8 @@
     visibility: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    transition: transform var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
+                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 [data-offcanvas-panel][aria-hidden="false"] {
@@ -96,6 +98,8 @@
     z-index: 999;
     visibility: hidden;
     opacity: 0;
+    transition: opacity var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
+                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 [data-offcanvas-backdrop][aria-hidden="false"] {

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

@@ -2,14 +2,18 @@
 /* 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;
     max-width: 100%;
     background: #fff;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-    transition: transform var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
-                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
     display: flex;
     flex-direction: column;
 }
@@ -72,16 +76,9 @@
     color: #111827;
 }
 
-[data-offcanvas-close]:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
-}
-
 /* Backdrop */
 [data-offcanvas-backdrop] {
     background: rgba(0, 0, 0, 0.5);
-    transition: opacity var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease),
-                visibility var(--a11y-offcanvas-duration, 0.3s) var(--a11y-offcanvas-easing, ease);
 }
 
 /* Wide variant */
@@ -155,15 +152,13 @@
         border: 2px solid currentColor;
     }
 
-    [data-offcanvas-close]:focus {
+    [data-offcanvas-panel] :focus-visible {
         outline-width: 3px;
     }
 }
 
-/* Reduced motion support */
+/* Reduced motion support for theme transitions */
 @media (prefers-reduced-motion: reduce) {
-    [data-offcanvas-panel],
-    [data-offcanvas-backdrop],
     [data-offcanvas-close] {
         transition: none !important;
     }

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.2
+ * @version 1.0.4
  * @license MIT
  */