@natachah/vanilla-frontend 0.2.4 → 0.2.6

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.4
+                                0.2.6
                             </span>
                         </li>
                         <li>

package/js/_drawer.js

@@ -58,6 +58,8 @@ export default class Drawer extends BaseComponent {
 
         this._trap = new Trap(this._element, this._options.trap.exclusions ?? ['#backdrop'], this._options.trap.inclusions ?? [])
 
+        this._previousFocus = null
+
         // Init the event listener
         this.#init()
     }
@@ -130,6 +132,8 @@ export default class Drawer extends BaseComponent {
         // Change the state
         this._isOpen = value
 
+        if (this._isOpen) this._previousFocus = document.activeElement
+
         // Change the [aria-pressed] & [aria-expanded] attribute on the <button>
         this._buttons.forEach((button) => {
             button.setAttribute('aria-pressed', this._isOpen)
@@ -147,11 +151,16 @@ export default class Drawer extends BaseComponent {
         // Add the Trap focus 
         // * 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.deactivate()
-            } else if (this._isOpen) {
-                this._trap.focusOnFirst()
+
+            const isDialog = this._element.getAttribute('role') === 'dialog'
+
+            if (this._isOpen) {
+                isDialog ? this._trap.activate() : this._trap.focusOnFirst()
+            } else {
+                if (isDialog) this._trap.deactivate()
+                this._previousFocus ? this._previousFocus.focus() : this._buttons[0].focus()
             }
+
         }, { once: true })
 
     }

package/package.json

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