vanilla-aria-modals 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.md +22 -17
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. Dates use I
|
|
|
4
4
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/).
|
|
6
6
|
|
|
7
|
+
## [1.1.3] - 2026-02-16
|
|
8
|
+
### Fixed
|
|
9
|
+
- Add missing parameter titles to `README.md`.
|
|
10
|
+
|
|
11
|
+
## [1.1.2] - 2026-02-15
|
|
12
|
+
### Fixed
|
|
13
|
+
- Unify `README.md` formatting for all bullet points. Previously, in some Markdown views, the bullet points format from the `addA11yEvents` method was broken due to a code block. This has been corrected so everything now displays consistently.
|
|
14
|
+
|
|
7
15
|
## [1.1.1] - 2026-02-15
|
|
8
16
|
### Fixed
|
|
9
17
|
- Fix typos, update changelog, and add an example wrapper usage for the `closeHandler`.
|
package/README.md
CHANGED
|
@@ -124,27 +124,28 @@ Registers ARIA events and modal stacking handling:
|
|
|
124
124
|
#### Parameters
|
|
125
125
|
**Takes parameters as a single object, which are destructured inside the method.**
|
|
126
126
|
|
|
127
|
-
- **`modalKey: string;`** Unique modal identifier. Used for stacking and event management.
|
|
127
|
+
- **`modalKey: string;`** Unique modal identifier. Used for stacking and event management.
|
|
128
128
|
- **`modalLm?: HTMLElement | null;`** *(optional)* The main modal element. Used to trap focus inside the modal.
|
|
129
|
-
- **`modalLmOuterLimits?: HTMLElement | null;`** *(optional)* The container that defines the modal boundary. Used to detect clicks outside the modal. **modalLm** is usually used here, but depending on the UI we may not want to trap focus into the same container we want to close, maybe just in a part of it.
|
|
130
|
-
- **`closeLms?: HTMLElement[] | null;`** *(optional)* Array of elements that should trigger closing the modal (e.g., close buttons).
|
|
131
|
-
- **`exemptLms?: HTMLElement[];`** *(optional)* Array of elements that should not trigger closing even if clicked outside.
|
|
132
|
-
- **`closeHandler: (e: Event, modalKey: string) => void;`** Function to call
|
|
129
|
+
- **`modalLmOuterLimits?: HTMLElement | null;`** *(optional)* The container that defines the modal boundary. Used to detect clicks outside the modal. **modalLm** is usually used here, but depending on the UI we may not want to trap focus into the same container we want to close, maybe just in a part of it.
|
|
130
|
+
- **`closeLms?: HTMLElement[] | null;`** *(optional)* Array of elements that should trigger closing the modal (e.g., close buttons).
|
|
131
|
+
- **`exemptLms?: HTMLElement[];`** *(optional)* Array of elements that should not trigger closing even if clicked outside.
|
|
132
|
+
- **`closeHandler: (e: Event, modalKey: string) => void;`** Function to call at modal close. Usually should call **removeA11yEvents()**. Automatically receives the event **(e)** and **(modalKey)** from the wrapper; no need to pass as arguments. It’s up to the caller whether to use them.
|
|
133
|
+
|
|
133
134
|
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`):
|
|
134
135
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
136
|
+
```js
|
|
137
|
+
const closeModalWrapper = (...args) => {
|
|
138
|
+
// Returns a handler that the utility calls internally with e and modalKey
|
|
139
|
+
return (e, modalKey) => {
|
|
140
|
+
// Your logic for the close handler here
|
|
141
|
+
// Access to parameters thanks to closures
|
|
142
142
|
}
|
|
143
|
+
}
|
|
143
144
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
modalHandler.addA11yEvents({
|
|
146
|
+
closeHandler: closeModalWrapper(...args)
|
|
147
|
+
});
|
|
148
|
+
```
|
|
148
149
|
|
|
149
150
|
Returns `void`
|
|
150
151
|
|
|
@@ -209,6 +210,8 @@ Returns `void`
|
|
|
209
210
|
### generateKey()
|
|
210
211
|
Generates a unique identifier for the modal.
|
|
211
212
|
|
|
213
|
+
#### Parameters
|
|
214
|
+
|
|
212
215
|
- **`prefix?: string;`** Optional prefix to modify the generated modal key.
|
|
213
216
|
|
|
214
217
|
Returns `string`. The generated modal key to be used later in the code.
|
|
@@ -223,6 +226,8 @@ Returns `void`
|
|
|
223
226
|
|
|
224
227
|
Re-attaches the focus-trapping event listener for a specific modal. The internal **trapFocus** method already queries the DOM on each keyboard event, so in most cases, manually rebinding is not necessary.
|
|
225
228
|
|
|
229
|
+
#### Parameters
|
|
230
|
+
|
|
226
231
|
- **`modalKey: string;`** The unique key of the modal whose focus trap should be rebound.
|
|
227
232
|
|
|
228
|
-
|
|
233
|
+
Returns `void`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-aria-modals",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"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.",
|
|
5
5
|
"main": "src/ModalHandler.js",
|
|
6
6
|
"scripts": {
|