@natachah/vanilla-frontend 0.2.2 → 0.2.4

package/docs/pages/components/drawer.html

@@ -102,13 +102,35 @@
                         <p><code>false</code> by default, or a <code>string</code></p>
                     </td>
                 </tr>
+                <tr>
+                    <td data-label="Name">
+                        <p>trap.exclusions</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>The elements that should not be inert for Accessibility</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>['#backdrop']</code> by default, or an <code>Array</code></p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Name">
+                        <p>trap.inclusions</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>The elements to include into the <kbd>TAB</kbd> trap focus</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>null</code> by default, or an <code>Array</code></p>
+                    </td>
+                </tr>
             </tbody>
         </table>
 
         <doc-code data-type="js">
             import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
             const drawer = document.getElementById('drawer')
-            if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: '_drawer-cookie' })
+            if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: '_drawer-cookie': trap: {exclusions: ['#backdrop', '#toggleMenu'], inclusions: ['#toggleMenu']} })
         </doc-code>
 
         <blockquote>

package/docs/pages/javascript/trap.html

@@ -15,11 +15,11 @@
 
         <h2>Javascript</h2>
         <p>This component is only in javascript, to use it you must import the javascript file and create a new Trap object.</p>
-        <p>You can pass the element and an array of exclusions when initiate the component.</p>
+        <p>You can pass the element, an array of exclusions (= element that should not be inert) and an array of inclusions (= element that should be included into the trap) when initiate the component.</p>
 
         <doc-code data-type="js">
             import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"
-            new Trap(document.getElementById('drawer'), ['#backdrop'])
+            new Trap(document.getElementById('drawer'), ['#backdrop','#toggleMenu'], ['#toggleMenu'])
         </doc-code>
 
         <h3>Methods</h3>

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.2.2
+                                0.2.4
                             </span>
                         </li>
                         <li>

package/js/_drawer.js

@@ -20,7 +20,10 @@ export default class Drawer extends BaseComponent {
     static OPTIONS = {
         breakpoint: 960,
         cookie: false,
-        exclusions: ['#backdrop']
+        trap: {
+            exclusions: null,
+            inclusions: null
+        }
     }
 
     /**
@@ -34,6 +37,10 @@ export default class Drawer extends BaseComponent {
 
         if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
         if (options.cookie && typeof options.cookie !== 'string') throw new Error(ErrorMessage.typeOf('options.cookie', 'string'))
+        if (options.trap) {
+            if (options.trap.exclusions && typeof options.trap.exclusions !== 'object') throw new Error(ErrorMessage.typeOf('options.trap.exclusions', 'object'))
+            if (options.trap.inclusions && typeof options.trap.inclusions !== 'object') throw new Error(ErrorMessage.typeOf('options.trap.inclusions', 'object'))
+        }
 
         // Run the SUPER constructor from BaseComponent
         super(el, options, 'drawer')
@@ -49,9 +56,7 @@ export default class Drawer extends BaseComponent {
 
         this._cookie = this._options.cookie ? new Cookie(this._options.cookie) : null
 
-        this._trap = new Trap(this._element, this._options.exclusions)
-
-        console.log(this._buttons)
+        this._trap = new Trap(this._element, this._options.trap.exclusions ?? ['#backdrop'], this._options.trap.inclusions ?? [])
 
         // Init the event listener
         this.#init()
@@ -143,7 +148,7 @@ export default class Drawer extends BaseComponent {
         // * Need to wait the transition before make it focused
         this._element.addEventListener('transitionend', () => {
             if (this._element.getAttribute('role') === 'dialog') {
-                this._isOpen ? this._trap.activate() : this._trap.desactivate()
+                this._isOpen ? this._trap.activate() : this._trap.deactivate()
             } else if (this._isOpen) {
                 this._trap.focusOnFirst()
             }

package/js/tests/drawer.test.js

@@ -38,6 +38,9 @@ describe('Structure of the class', () => {
 
     test('Constructor: Passing the correct parameters', () => {
         expect(() => new Drawer(document.getElementById('drawer'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
+        expect(() => new Drawer(document.getElementById('drawer'), { cookie: [] })).toThrowError(ErrorMessage.typeOf('options.cookie', 'string'))
+        expect(() => new Drawer(document.getElementById('drawer'), { trap: { exclusions: 'error' } })).toThrowError(ErrorMessage.typeOf('options.trap.exclusions', 'object'))
+        expect(() => new Drawer(document.getElementById('drawer'), { trap: { inclusions: 'error' } })).toThrowError(ErrorMessage.typeOf('options.trap.inclusions', 'object'))
     })
 
     test('Constructor: Return the correct properties', () => {

package/js/tests/trap.test.js

@@ -7,9 +7,9 @@
  * - Constructor: Passing the correct parameters 
  * - FocusOnFirst(): Passing the correct parameters 
  * - Activate(): Save the new cookie value
- * - Desactivate(): Passing the correct parameters 
+ * - Deactivate(): Passing the correct parameters 
  * - HandleKeydown(): Verify the existance of a key in the cookie value
- * - GetFocusableElements(): Passing the correct parameters 
+ * - GetFocusableElementss(): Passing the correct parameters 
  */
 
 import { describe, test, expect, beforeAll, vi } from "vitest"
@@ -54,7 +54,7 @@ describe('Structure of the class', () => {
     test('Has all the public method', () => {
         expect(fakeTrap.focusOnFirst).toBeTypeOf('function')
         expect(fakeTrap.activate).toBeTypeOf('function')
-        expect(fakeTrap.desactivate).toBeTypeOf('function')
+        expect(fakeTrap.deactivate).toBeTypeOf('function')
         expect(fakeTrap.handleKeydown).toBeTypeOf('function')
         expect(fakeTrap.getFocusableElements).toBeTypeOf('function')
         expect(fakeTrap.getSiblingsOutside).toBeTypeOf('function')
@@ -63,6 +63,7 @@ describe('Structure of the class', () => {
     test('Constructor: Passing the correct parameters', () => {
         expect(() => new Trap()).toThrowError(ErrorMessage.instanceOf('el', 'HTMLElement'))
         expect(() => new Trap(document.getElementById('trap'), 'error')).toThrowError(ErrorMessage.typeOf('exclusions', 'object'))
+        expect(() => new Trap(document.getElementById('trap'), null, 'error')).toThrowError(ErrorMessage.typeOf('inclusions', 'object'))
     })
 
 })
@@ -87,7 +88,7 @@ describe('FocusOnFirst()', () => {
 describe('Toggle the trap', () => {
 
     test('Activate the trap', () => {
-        const eventSpy = vi.spyOn(fakeTrap._element, 'addEventListener')
+        const eventSpy = vi.spyOn(document, 'addEventListener')
 
         fakeTrap.activate()
 
@@ -95,8 +96,8 @@ describe('Toggle the trap', () => {
         expect(fakeTrap._items).not.toContain(fakeDisabledLink)
         expect(fakeTrap._first).toStrictEqual(document.getElementById('button'))
         expect(fakeTrap._last).toStrictEqual(document.getElementById('input'))
-        expect(fakeTrap._inerts).toStrictEqual(fakeTrap.getSiblingsOutside())
-        expect(fakeTrap._inerts).not.toContain(document.getElementById('backdrop'))
+        expect(fakeTrap._inertElements).toStrictEqual(fakeTrap.getSiblingsOutside())
+        expect(fakeTrap._inertElements).not.toContain(document.getElementById('backdrop'))
         expect(document.activeElement).toBe(fakeTrap._first)
         expect(eventSpy).toHaveBeenCalledWith('keydown', fakeTrap.handleKeydown)
         expect(document.getElementById('backdrop').hasAttribute('inert')).toBeFalsy()
@@ -106,9 +107,9 @@ describe('Toggle the trap', () => {
 
     })
 
-    test('Desactivate the trap', () => {
-        const eventSpy = vi.spyOn(fakeTrap._element, 'removeEventListener')
-        fakeTrap.desactivate()
+    test('Deactivate the trap', () => {
+        const eventSpy = vi.spyOn(document, 'removeEventListener')
+        fakeTrap.deactivate()
         expect(eventSpy).toHaveBeenCalledWith('keydown', fakeTrap.handleKeydown)
         expect(document.getElementById('backdrop').hasAttribute('inert')).toBeFalsy()
         expect(document.getElementById('backdrop').hasAttribute('aria-hidden')).toBeFalsy()

package/js/utilities/_trap.js

@@ -17,21 +17,22 @@ export default class Trap {
      *
      * @constructor
      */
-    constructor(el, exclusions = null) {
+    constructor(el, exclusions = null, inclusions = null) {
 
         // Check for errors
         if (!(el instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('el', 'HTMLElement'))
         if (exclusions && typeof exclusions !== 'object') throw new Error(ErrorMessage.typeOf('exclusions', 'object'))
+        if (inclusions && typeof inclusions !== 'object') throw new Error(ErrorMessage.typeOf('inclusions', 'object'))
 
         // Define elements
         this._element = el
         this._items = []
         this._first = null
         this._last = null
-        this._inerts = []
-        this._exclusions = exclusions ?? []
+        this._inertElements = []
+        this._exclusions = Array.isArray(exclusions) ? exclusions : Object.values(exclusions ?? {})
+        this._inclusions = Array.isArray(inclusions) ? inclusions : Object.values(inclusions ?? {})
         this.handleKeydown = this.handleKeydown.bind(this)
-
     }
 
     /**
@@ -47,7 +48,7 @@ export default class Trap {
         this._first = this._element.querySelector('[tabindex="0"]') ?? this._items[0]
 
         // Focus the first element by default
-        this._first.focus()
+        if (this._first) this._first.focus()
     }
 
     /**
@@ -64,28 +65,27 @@ export default class Trap {
         this._last = this._items[this._items.length - 1]
 
         // Define event listener
-        this._element.addEventListener('keydown', this.handleKeydown)
+        document.addEventListener('keydown', this.handleKeydown)
 
         // Focus the first element by default
         this._first.focus()
 
         // Make the rest of the content inert for screen reader
-        this._inerts = this.getSiblingsOutside()
-        this._inerts.forEach(el => {
+        this._inertElements = this.getSiblingsOutside()
+        this._inertElements.forEach(el => {
             el.setAttribute('aria-hidden', 'true')
             el.setAttribute('inert', true)
         })
-
     }
 
     /**
-     * Desactivate the trap
+     * Deactivate the trap
      * 
      */
-    desactivate() {
-        this._element.removeEventListener('keydown', this.handleKeydown)
+    deactivate() {
+        document.removeEventListener('keydown', this.handleKeydown)
 
-        this._inerts.forEach(el => {
+        this._inertElements.forEach(el => {
             el.removeAttribute('aria-hidden')
             el.removeAttribute('inert')
         })
@@ -97,8 +97,6 @@ export default class Trap {
      * @param {event} e - Event
      */
     handleKeydown(e) {
-
-        // Check for the Tab event only
         if (e.key !== 'Tab') return
 
         const isShift = e.shiftKey
@@ -110,17 +108,24 @@ export default class Trap {
             e.preventDefault()
             this._first.focus()
         }
-
     }
 
     /**
      * Get all focusable elements
      * 
+     * @param {HTMLElement} element
+     * @returns {Array}
      */
     getFocusableElements() {
-        return Array.from(
-            this._element.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]),textarea:not([disabled]), button:not([disabled]), iframe, object, embed,[contenteditable], [tabindex]:not([tabindex="-1"])')
+        const focusables = Array.from(
+            this._element.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')
         ).filter(el => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement)
+
+        const inclusions = Array.isArray(this._inclusions)
+            ? this._inclusions.flatMap(selector => Array.from(document.querySelectorAll(selector)))
+            : []
+
+        return [...focusables, ...inclusions]
     }
 
     /**
@@ -149,7 +154,5 @@ export default class Trap {
         }
 
         return Array.from(hiddenEls)
-
     }
-
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.2.2",
+    "version": "0.2.4",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",