accessible-kit 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -5,6 +5,25 @@ 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.7] - 2026-01-26
+
+### Changed
+- **All Components - Focus Indicator Improvements**: Migrated from `:focus` to `:focus-visible` for better keyboard navigation UX
+  - **Breaking Change for Custom Themes**: If you have custom theme files, update `:focus` selectors to `:focus-visible`
+  - **Complete separation of concerns**: ALL visual styling (including `outline` properties) moved from `*.core.css` to `*.theme.css` files
+  - Core CSS files now contain ZERO visual styling - only structural layout and behavior
+  - Theme CSS files contain all focus styling including `outline`, `outline-offset`, and `outline-color`
+  - **Benefits**:
+    - Focus indicators only appear for keyboard navigation, not on mouse clicks
+    - Perfect separation between core functionality and visual design
+    - Complete customization freedom - modify or remove all focus styling in theme files
+    - No hardcoded visual defaults in core files
+  - **Affected components**: Dropdown, Modal, Offcanvas, Tabs, Accordion
+  - **Migration guide**: 
+    - Update your custom theme `:focus` selectors to `:focus-visible`
+    - All `outline` customization should now be done in `*.theme.css` files only
+  - Updated documentation in README with focus-visible information
+
 ## [1.0.6] - 2026-01-15
 
 ### Added
@@ -152,6 +171,7 @@ document.addEventListener('DOMContentLoaded', () => {
 - Zero dependencies
 - Full TypeScript-ready exports
 
+[1.0.7]: https://github.com/5ulo/accessible-kit/compare/v1.0.6...v1.0.7
 [1.0.6]: https://github.com/5ulo/accessible-kit/compare/v1.0.5...v1.0.6
 [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

package/README.md

@@ -19,6 +19,7 @@ A collection of fully accessible UI components for modern web applications. Buil
 - **♿ Inclusive** - High contrast mode and reduced motion support
 - **🔧 Framework Agnostic** - Works with any framework or vanilla JS
 - **📦 Tree-shakeable** - Import only what you need
+- **⌨️ Focus Visible** - Uses `:focus-visible` for better keyboard navigation UX
 
 ## 📚 Table of Contents
 
@@ -1055,6 +1056,7 @@ Contains only logic, positioning, layout, and behavior:
 - Visibility states
 - Animations
 - Responsive breakpoints
+- **NO visual styling** - completely theme-agnostic
 
 **Do not modify** unless changing component functionality.
 
@@ -1066,6 +1068,7 @@ Contains all visual styling:
 - Typography
 - Borders and border-radius
 - Shadows
+- **All focus indicators** (`:focus-visible` with `outline`, `outline-offset`, etc.)
 - Dark mode
 - High contrast mode
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-kit",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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-accordion.theme.css

@@ -31,7 +31,7 @@
     background: #f9fafb;
 }
 
-[data-accordion-trigger]:focus {
+[data-accordion-trigger]:focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: -2px;
 }
@@ -78,7 +78,7 @@
     background: #2563eb;
 }
 
-[data-accordion-toggle]:focus {
+[data-accordion-toggle]:focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
 }
@@ -112,7 +112,7 @@
     border-color: #d1d5db;
 }
 
-[data-accordion-toggle-all]:focus {
+[data-accordion-toggle-all]:focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
 }
@@ -214,7 +214,7 @@
         border-width: 2px;
     }
 
-    [data-accordion-trigger]:focus {
+    [data-accordion-trigger]:focus-visible {
         outline-width: 3px;
     }
 }

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

@@ -16,10 +16,6 @@
     cursor: pointer;
 }
 
-[data-dropdown-button]:focus {
-    outline-offset: 2px;
-}
-
 /* Button icon/arrow */
 [data-dropdown-arrow] {
     display: inline-block;
@@ -99,10 +95,6 @@
     text-decoration: none;
 }
 
-[data-dropdown-item]:focus {
-    outline: none;
-}
-
 /* Divider */
 [data-dropdown-divider] {
     height: 1px;
@@ -130,9 +122,6 @@
 }
 
 /* Navigation variant */
-[data-dropdown][data-variant="nav"] [data-dropdown-button]:focus {
-    outline-offset: 2px;
-}
 
 /* Language switcher variant */
 [data-dropdown][data-variant="language"] [data-dropdown-item] {
@@ -153,13 +142,6 @@
     }
 }
 
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    [data-dropdown-item]:focus {
-        outline-offset: -2px;
-    }
-}
-
 /* Reduced motion support - disable animations */
 @media (prefers-reduced-motion: reduce) {
     [data-dropdown-menu]:not([data-no-animation]),

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

@@ -20,7 +20,7 @@
     border-color: #9ca3af;
 }
 
-[data-dropdown-button]:focus {
+[data-dropdown-button]:focus-visible {
     outline: 2px solid #3b82f6;
     border-color: #3b82f6;
 }
@@ -61,9 +61,10 @@
 }
 
 [data-dropdown-item]:hover,
-[data-dropdown-item]:focus {
+[data-dropdown-item]:focus-visible {
     background: #f3f4f6;
     color: #111827;
+    outline: none;
 }
 
 [data-dropdown-item]:active {
@@ -98,7 +99,7 @@
     background: rgba(0, 0, 0, 0.05);
 }
 
-[data-dropdown][data-variant="nav"] [data-dropdown-button]:focus {
+[data-dropdown][data-variant="nav"] [data-dropdown-button]:focus-visible {
     outline: 2px solid currentColor;
 }
 
@@ -122,8 +123,9 @@
         border-width: 2px;
     }
 
-    [data-dropdown-item]:focus {
+    [data-dropdown-item]:focus-visible {
         outline: 2px solid currentColor;
+        outline-offset: -2px;
     }
 }
 
@@ -160,9 +162,10 @@
     }
 
     [data-dropdown-item]:hover,
-    [data-dropdown-item]:focus {
+    [data-dropdown-item]:focus-visible {
         background: #374151;
         color: #fff;
+        outline: none;
     }
 
     [data-dropdown-item]:active {

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

@@ -110,11 +110,6 @@ body.modal-open {
     overflow: hidden;
 }
 
-/* Focus trap */
-[data-modal-dialog]:focus {
-    outline: none;
-}
-
 /* Responsive */
 @media (max-width: 640px) {
     [data-modal-dialog] {

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

@@ -16,6 +16,10 @@
         0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
+[data-modal-dialog]:focus-visible {
+    outline: none;
+}
+
 /* Modal header */
 [data-modal-header] {
     padding: 1.5rem;
@@ -66,7 +70,7 @@
     color: #111827;
 }
 
-[data-modal-close]:focus {
+[data-modal-close]:focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
 }
@@ -200,7 +204,7 @@
         border: 2px solid currentColor;
     }
 
-    [data-modal-close]:focus {
+    [data-modal-close]:focus-visible {
         outline-width: 3px;
     }
 }

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

@@ -112,11 +112,6 @@ body.offcanvas-open {
     overflow: hidden;
 }
 
-/* Focus trap */
-[data-offcanvas-panel]:focus {
-    outline: none;
-}
-
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
     [data-offcanvas-panel],

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

@@ -2,6 +2,11 @@
 /* Obsahuje vizualne nastavenia: farby, velkosti, bordery, radiusy, spacing */
 /* Pre zmenu vzhladu upravte tento subor */
 
+/* Focus visible for the panel itself (focus trap) */
+[data-offcanvas-panel]:focus-visible {
+    outline: none;
+}
+
 /* Focus visible for all focusable elements inside offcanvas */
 [data-offcanvas-panel] :focus-visible {
     outline: 2px solid #3b82f6;

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

@@ -46,10 +46,6 @@
     pointer-events: none;
 }
 
-[data-tabs-tab]:focus {
-    outline-offset: -2px;
-}
-
 /* Tab panels container */
 [data-tabs-panels] {
     position: relative;
@@ -64,11 +60,6 @@
     display: block;
 }
 
-/* Focus within panel */
-[data-tabs-panel]:focus {
-    outline: none;
-}
-
 /* View Transitions API uses default cross-fade animation */
 /* Customization via pseudo-elements */
 ::view-transition-old(root),

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

@@ -35,8 +35,9 @@
     background: #f9fafb;
 }
 
-[data-tabs-tab]:focus {
+[data-tabs-tab]:focus-visible {
     outline: 2px solid #3b82f6;
+    outline-offset: -2px;
     color: #374151;
 }
 
@@ -80,6 +81,10 @@
     line-height: 1.6;
 }
 
+[data-tabs-panel]:focus-visible {
+    outline: none;
+}
+
 /* Boxed variant */
 [data-tabs][data-tabs][data-variant="boxed"] [data-tabs-list] {
     border-bottom: 1px solid #e5e7eb;
@@ -136,7 +141,7 @@
     color: #fff;
 }
 
-[data-tabs][data-tabs][data-variant="pills"] [data-tabs-tab]:focus {
+[data-tabs][data-tabs][data-variant="pills"] [data-tabs-tab]:focus-visible {
     outline-color: #3b82f6;
 }
 
@@ -222,7 +227,7 @@
         border-width: 2px;
     }
 
-    [data-tabs-tab]:focus {
+    [data-tabs-tab]:focus-visible {
         outline-width: 3px;
     }
 }
@@ -246,7 +251,7 @@
         background: #1f2937;
     }
 
-    [data-tabs-tab]:focus {
+    [data-tabs-tab]:focus-visible {
         color: #f9fafb;
     }