Merge branch 'release/1.5.2' into main

BeAPI · Jan 23, 2024 · cbea4a3 · cbea4a3
2 parents 46cbfb7 + b2918c3
commit cbea4a3
Show file tree

Hide file tree

Showing 7 changed files with 1,237 additions and 1,391 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ 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.5.2 - 2024-01-23
+
+- Fix closed Modal focusable elements
+- Fix `this.initialized` value in Modal
+- Remove `babel-jest`
+
 ## 1.5.1 - 2024-01-03
 
 - Fix playwright tests config

diff --git a/examples/accessible-modal/index.html b/examples/accessible-modal/index.html
@@ -23,7 +23,7 @@ <h3>Default</h3>
 
         <div id="demo-1" class="modal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="modal__inner">
-                <h2 class="modal__title">Add delivery address</h2>
+                <h4 class="modal__title">Add delivery address</h4>
 
                 <div>
                     <div class="mb-4">
@@ -72,7 +72,7 @@ <h3>Close modal on outside click</h3>
 
         <div id="demo-2" class="modal modal--demo-2" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="modal__inner">
-                <h2 class="modal__title">Add billing address</h2>
+                <h4 class="modal__title">Add delivery address</h4>
 
                 <div>
                     <div class="mb-4">
@@ -121,7 +121,56 @@ <h3>Modal button but only for &lt; 1024px devices</h3>
 
         <div class="modal modal--mobile modal--demo-3" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="modal__inner">
-                <h2 class="modal__title">Add billing address</h2>
+                <h4 class="modal__title">Add delivery address</h4>
+
+                <div>
+                    <div class="mb-4">
+                        <label for="street">
+                            <span>Street:</span>
+                            <input id="street" type="text">
+                        </label>
+                    </div>
+                    <div class="mb-4">
+                        <label for="city">
+                            <span>City:</span>
+                            <input id="city" type="text">
+                        </label>
+                    </div>
+                    <div class="mb-4">
+                        <label for="state">
+                            <span>State:</span>
+                            <input id="state" type="text">
+                        </label>
+                    </div>
+                    <div class="mb-4">
+                        <label for="zip">
+                            <span>Zip:</span>
+                            <input id="zip" type="text">
+                        </label>
+                    </div>
+
+                    <div>
+                        <label for="special_instructions">
+                            <span>Special instructions:</span>
+                        </label>
+                        <input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="mb-2">
+                        <div id="special_instructions_desc">For example, gate code or other information to help the driver find you</div>
+                    </div>
+                </div>
+
+                <button id="demo-2-close" type="button" class="modal__close">
+                    <span class="sr-only">Close</span>
+                </button>
+            </div>
+        </div>
+
+        <h3 class="text-2xl mb-5">Animated Showing and Disappearing</h3>
+
+        <button class="modal-btn" type="button" aria-controls="demo-4">Add billing address</button>
+
+        <div id="demo-4" class="modal modal--demo-4" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="modal__inner">
+                <h4 class="modal__title">Add delivery address</h4>
 
                 <div>
                     <div class="mb-4">
@@ -196,6 +245,10 @@ <h2>Code</h2>
                     closeButtonSelector: '.modal__close',
                     closeOnFocusOutside: '.modal__inner',
                 },
+                '#demo-4': {
+                    labelSelector: '.modal__title',
+                    closeButtonSelector: '.modal__close',
+                },
             }
 
             Modal.initFromPreset()

diff --git a/examples/accessible-modal/style.css b/examples/accessible-modal/style.css
@@ -5,6 +5,8 @@
     bottom: 0;
     left: 0;
     z-index: 9999;
+    display: grid;
+    place-content: center;
     background-color: var(--modal-bg-color);
 }
 
@@ -13,15 +15,11 @@
 }
 
 .modal__inner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     width: 100%;
     max-width: 600px;
     padding: 30px;
     margin: 0 auto;
     background-color: var(--light-color);
-    transform: translate3d(-50%, -50%, 0);
 }
 
 .modal__title {
@@ -44,6 +42,30 @@
     margin-bottom: 40px;
 }
 
+.modal--demo-4 {
+    transition: all 300ms;
+}
+
+.modal--demo-4[aria-hidden="true"] {
+    display: grid;
+}
+
+.modal--demo-4 .modal__inner {
+    transition: all 300ms;
+    transform: translate3d(0, 0, 0);
+}
+
+.modal--demo-4.modal--hidden {
+    pointer-events: none;
+    touch-action: none;
+    opacity: 0;
+}
+
+.modal--demo-4.modal--hidden .modal__inner {
+    opacity: 0;
+    transform: translate3d(0, 100px, 0);
+}
+
 @media screen and (min-width: 1024px) {
     .modal--mobile,
     .modal--mobile .modal__inner {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@beapi/be-a11y",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "description": "Collection of usefull accessible components",
   "repository": {
@@ -49,7 +49,6 @@
     "@playwright/test": "^1.40.0",
     "@wordpress/stylelint-config": "^20.0.3",
     "autoprefixer": "^10.4.16",
-    "babel-jest": "^27.5.1",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",