feat: added support for aria-hidden

Alexandrshy · Jul 8, 2020 · ff9cdfc · ff9cdfc
1 parent dcca80b
commit ff9cdfc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/example/index.html b/example/index.html
@@ -11,7 +11,7 @@
     <button class="modal__button" data-keukenhof-open="#modal">
       Open modal
     </button>
-    <div id="modal" class="modal" role="dialog">
+    <div id="modal" class="modal" role="dialog" aria-hidden="true">
       <div class="modal__overlay" data-keukenhof-close>
       </div>
       <div class="modal__container">

diff --git a/src/index.ts b/src/index.ts
@@ -85,6 +85,7 @@ export const Keukenhof = ((): KeukenhofType => {
             const isContinue = this.beforeOpen(event);
             if (!isContinue) return;
             this.$modal?.classList.add(this.openClass);
+            this.setAraiHidden(false);
             this.changeScrollBehavior(SCROLL_STATE.DISABLE);
             this.addEventListeners();
             this.preparationOpeningModal(event);
@@ -117,6 +118,7 @@ export const Keukenhof = ((): KeukenhofType => {
         close(event?: Event) {
             const isContinue = this.beforeClose(event);
             if (!isContinue) return;
+            this.setAraiHidden(true);
             this.changeScrollBehavior(SCROLL_STATE.ENABLE);
             this.removeEventListeners();
             this.preparationClosingModal(event);
@@ -204,6 +206,15 @@ export const Keukenhof = ((): KeukenhofType => {
                 element.style.overflow = this.scrollBehavior.defaultValue;
             else if (value === SCROLL_STATE.DISABLE) element.style.overflow = 'hidden';
         }
+
+        /**
+         * Set value for arai-hidden
+         *
+         * @param {boolean} value - aria-hidden value
+         */
+        setAraiHidden(value: boolean) {
+            this.$modal?.setAttribute('aria-hidden', String(value));
+        }
     }
 
     let modal: ModalType;