Merge branch 'dev'

BeAPI · Oct 10, 2024 · e328d04 · e328d04
2 parents c85c2cd + 0a67730
commit e328d04
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/examples/accessible-modal/README.md b/examples/accessible-modal/README.md
@@ -110,6 +110,7 @@ Modal.initFromPreset();
 |---------------------|-----------------|------------------|-----------------------------------------------------------------------------|
 | closeButtonSelector | boolean\|string | `.modal__close`  | The selector of the modal close button.                                     |
 | closedClassName     | string          | `modal--hidden`  | The class name when the modal is hidden.                                    |
+| closeOnEscapeKey    | boolean         | `true`           | Should the 'Escape' key close the modal?                                    |
 | closeOnFocusOutside | boolean\|string | `false`          | Specify the selector in which the modal should close on click. If false, the modal does not close on outside click. If true, the modal closes on outside click of the element. |
 | descriptionSelector | boolean\|string | `false`          | The selector of the modal label (for the attribute  ` aria-describedby ` ). |
 | labelSelector       | boolean\|string | `false`          | The selector of the modal label (for the attribute  ` aria-labelledby ` ).  |

diff --git a/examples/accessible-modal/index.html b/examples/accessible-modal/index.html
@@ -213,6 +213,55 @@ <h4 class="modal__title">Add delivery address</h4>
             </div>
         </div>
 
+        <h3 class="text-2xl mb-5">Disable <kbd>Escape</kbd> key</h3>
+
+        <button class="modal-btn" type="button" aria-controls="demo-5">Add billing address</button>
+
+        <div id="demo-5" class="modal modal--demo-5" 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">
+                        <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>
+
         <h2>Code</h2>
 
         <p class="codepen" data-height="600" data-theme-id="light" data-default-tab="html,result" data-slug-hash="mdwOVBm" data-user="beapi" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
@@ -249,6 +298,11 @@ <h2>Code</h2>
                     labelSelector: '.modal__title',
                     closeButtonSelector: '.modal__close',
                 },
+                '#demo-5': {
+                    labelSelector: '.modal__title',
+                    closeButtonSelector: '.modal__close',
+                    closeOnEscapeKey: false,
+                },
             }
 
             Modal.initFromPreset()

diff --git a/examples/accessible-modal/style.css b/examples/accessible-modal/style.css
@@ -15,6 +15,7 @@
 }
 
 .modal__inner {
+    position: relative;
     width: 100%;
     max-width: 600px;
     padding: 30px;

diff --git a/src/classes/Modal.js b/src/classes/Modal.js
@@ -280,7 +280,7 @@ function handleKeydown(e) {
       this.checkNextFocusableElement(e)
       break
     case 'Escape':
-      if (this.isOpened) {
+      if (this.isOpened && this._settings.closeOnEscapeKey) {
         this.close()
       }
   }
@@ -332,6 +332,7 @@ function handleTransitionEnd() {
 Modal.defaults = {
   closeButtonSelector: '.modal__close',
   closedClassName: 'modal--hidden',
+  closeOnEscapeKey: true,
   closeOnFocusOutside: false,
   descriptionSelector: false,
   labelSelector: false,