vanilla-aria-modals 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. Dates use I
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/).
 
+## [1.1.6] - 2026-02-20
+### Fixed
+- Update trap focus logic to ignore hidden elements, selecting only visible focusable ones
+
+### Added
+- Informational debug statements for focus management
+- Example JS now toggles `inert` on `<main>` when a modal opens
+
 ## [1.1.5] - 2026-02-19
 ### Fixed
 - Remove the unnecessary `isToggle` parameter type definition from the `.d.ts` file.

package/README.md

@@ -14,7 +14,7 @@ Written in vanilla JS for full flexibility. You can modify it directly in `node_
 
 ## Set up
 
-```js
+```javascript
 import ModalHandler from 'vanilla-aria-modals';
 const modalHandler = new ModalHandler();
 ```
@@ -33,7 +33,7 @@ A fully detailed example including the necessary JavaScript, HTML, and CSS files
 
 **Note:** `lm` in the code stands for *HTMLElement*.
 
-```js
+```javascript
 // Basic example of showing a modal
 showModal() {
   modalContainerLm.style.display = 'block';
@@ -88,7 +88,7 @@ In Single Page Applications (SPA) or frameworks like React, Vue, or vanilla JS w
 
 ### Example: Cleanup on route change or component unmount
 
-```js
+```javascript
 // Suppose your SPA route or component changes
 function onRouteChange() {
   // Clear leftover document events, active modals, focus tracking, modal ID key counter 
@@ -186,7 +186,7 @@ Registers A11y events and modal stacking handling:
 
 If you need to pass additional arguments to the close handler, you can wrap it in a function that returns a handler accepting only the two parameters (`e` and `modalKey`):
   
-```js
+```javascript
 const closeModalWrapper = (...args) => {
   // Returns a handler that the utility calls internally with e and modalKey
   return (e, modalKey) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-aria-modals",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Framework-agnostic utility for managing accessibility in modals or modal-like UIs, including modal stacking, focus management, and closing via Escape key or outside click.",
   "main": "src/ModalHandler.js",
   "scripts": {

package/src/ModalHandler.js

@@ -80,15 +80,15 @@ export default class ModalHandler {
   }
 
   #trapFocus(e, element) {
-    // Select all focusable elements within the given element
-    const focusableLms = element.querySelectorAll(`
+    // Select all visible (not hidden) focusable elements within the given element
+    const focusableLms = [...element.querySelectorAll(`
       a[href]:not([disabled]), 
       button:not([disabled]), 
       textarea:not([disabled]), 
       input:not([disabled]), 
       select:not([disabled]),
       [tabindex]:not([tabindex="-1"])
-    `);
+    `)].filter(lm => lm.offsetParent !== null && getComputedStyle(lm).visibility !== 'hidden');
     // Get the first and last focusable elements
     const firstFocusableLm = focusableLms[0]; 
     const lastFocusableLm = focusableLms[focusableLms.length - 1];
@@ -399,6 +399,11 @@ export default class ModalHandler {
     const lastFocusableLm = lastFocusedLm ? lastFocusedLm : document.activeElement;
     if (auto) this.#focusHandler[modalKey] = lastFocusableLm;
 
+    if (this.#debug) {
+      console.log(`[ModalHandler][DEBUG]: Focusing first element in modal "${modalKey}" => `, firstFocusableLm);
+      console.log(`[ModalHandler][DEBUG]: ${auto ? 'Stored' : 'Returned'} last focused element for modal "${modalKey}" => `, lastFocusableLm);
+    }
+
     // Needs a timeout for keyboard navigation, if not focus is unreliable
     setTimeout(() => {
       firstFocusableLm.focus();
@@ -418,8 +423,17 @@ export default class ModalHandler {
     }
 
     const lastFocusableLm = auto ? this.#focusHandler[modalKey] : lastFocusedLm;
+
+    if (this.#debug) {
+      console.log(`[ModalHandler][DEBUG]: Restoring focus for modal "${modalKey}" to element => `, lastFocusableLm);
+    }
+
     lastFocusableLm.focus();
 
+    if (this.#debug && auto) {
+      console.log(`[ModalHandler][DEBUG]: Cleared stored focus for modal "${modalKey}"`);
+    }
+
     // Clean up the stored focus
     if (auto) {
       delete this.#focusHandler[modalKey];