Jelajahi Sumber

Enhance accessibility for modal dialogs and improve DOM structure

seve12 1 Minggu lalu
induk
melakukan
9f0c37352e

+ 1 - 0
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}}"

+ 22 - 2
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';