feat: added support for aria-hidden

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">

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;

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 = {