Merge pull request #450 from Lemoncode/fixbug/#444-Bug-inmodal-access…

…ibility-issues [READY_TO_REVIEW]Fixed accessibility bug in modal
Lemoncode · Apr 20, 2024 · f6a8a41 · f6a8a41
2 parents e765f09 + f6ea5c6
commit f6a8a41
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/common/components/modal-dialog/modal-dialog.styles.module.css b/src/common/components/modal-dialog/modal-dialog.styles.module.css
@@ -1,4 +1,5 @@
 .container {
+  z-index: 2;
   position: fixed;
   top: 0;
   left: 0;
@@ -12,7 +13,7 @@
 
 .dialog {
   position: relative;
-  z-index: 1;
+  z-index: 3;
   background-color: var(--background-dialog);
   color: var(--text-color);
   width: 90%;
@@ -25,7 +26,7 @@
 .dialog-header {
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   display: flex;
   gap: 10px;
   align-items: center;

diff --git a/src/common/components/modal-dialog/modal.dialog.bussines.ts b/src/common/components/modal-dialog/modal.dialog.bussines.ts
@@ -41,7 +41,9 @@ export const handleFocus = (
     'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
   );
   focusableElementsInside?.forEach((element: Element) => {
-    element.removeAttribute('tabindex');
+    if (element.ariaHidden !== 'true') {
+      element.removeAttribute('tabindex');
+    }
   });
 };