From 9f0c37352eb2c66c9d964fa3c43dfc019a4cbaf6 Mon Sep 17 00:00:00 2001
From: seve12 <severihirvonen578@gmail.com>
Date: Thu, 7 Aug 2025 23:59:34 +0300
Subject: [PATCH] Enhance accessibility for modal dialogs and improve DOM
 structure

---
 client/components/boards/boardBody.jade |  1 +
 client/components/boards/boardBody.js   | 24 ++++++++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index de1c1ca3c..2b802f0d5 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -16,6 +16,7 @@ template(name="boardBody")
   if notDisplayThisBoard
    | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
   else
+
     .board-wrapper(class=currentBoard.colorClass)
       .board-canvas.js-swimlanes(
         class="{{#if hasSwimlanes}}dragscroll{{/if}}"
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 561280de2..4c7f04744 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -473,9 +473,29 @@ BlazeComponent.extendComponent({
             closeModal();
           }
         });
-        document.body.appendChild(modalElement);
+        document.querySelector('.board-wrapper').appendChild(modalElement); // (optional: for better DOM order)
         const openModal = function() {
-          modalElement.style.display = 'flex';
+            modalElement.style.display = 'flex';
+            modalElement.setAttribute('role', 'dialog');
+            modalElement.setAttribute('aria-modal', 'true');
+            // Set ARIA attributes for accessibility
+            modalElement.setAttribute('role', 'dialog');
+            modalElement.setAttribute('aria-modal', 'true');
+            // Move focus to the first input or button in the modal
+            const firstInput = modalElement.querySelector('input, button');
+            if (firstInput) firstInput.focus();
+            // Set aria-labelledby and aria-describedby for accessibility
+            const title = modalElement.querySelector('.modal-title');
+            if (title) {
+              title.id = 'modal-title';
+              modalElement.setAttribute('aria-labelledby', 'modal-title');
+            }
+            const desc = modalElement.querySelector('.modal-body');
+            if (desc) {
+              desc.id = 'modal-desc';
+              modalElement.setAttribute('aria-describedby', 'modal-desc');
+            }
+
         };
         const closeModal = function() {
           modalElement.style.display = 'none';