From b0052bbd81ad11c7b4375a8010dc9202781cf529 Mon Sep 17 00:00:00 2001
From: Alexandrshy <alexandrshy@gmail.com>
Date: Wed, 8 Jul 2020 09:09:13 +0400
Subject: [PATCH] feat: added support for aria-hidden

---
 example/index.html |  2 +-
 src/index.ts       | 11 +++++++++++
 src/types.ts       |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/example/index.html b/example/index.html
index 6e4213b..28a811b 100644
--- 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
index 029d523..6aa9fc2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -84,6 +84,7 @@ export const Keukenhof = ((): KeukenhofType => {
         open(event?: Event) {
             const isContinue = this.beforeOpen(event);
             if (!isContinue) return;
+            this.setAriaHidden(false);
             this.$modal?.classList.add(this.openClass);
             this.changeScrollBehavior(SCROLL_STATE.DISABLE);
             this.addEventListeners();
@@ -117,6 +118,7 @@ export const Keukenhof = ((): KeukenhofType => {
         close(event?: Event) {
             const isContinue = this.beforeClose(event);
             if (!isContinue) return;
+            this.setAriaHidden(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 aria-hidden
+         *
+         * @param {boolean} value - aria-hidden value
+         */
+        setAriaHidden(value: boolean) {
+            this.$modal?.setAttribute('aria-hidden', String(value));
+        }
     }
 
     let modal: ModalType;
diff --git a/src/types.ts b/src/types.ts
index 76efc7a..cfcc213 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -14,6 +14,7 @@ export type ConfigType = {
     onClose?: (event?: Event) => void;
     beforeOpen?: (event?: Event) => boolean;
     beforeClose?: (event?: Event) => boolean;
+    setAriaHidden?: (value: boolean) => void;
 };
 
 export type ModalType = {