Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-17 16:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Enhance accessibility for modal dialogs and improve DOM structure

Browse source
This commit is contained in:
seve12 2025-08-07 23:59:34 +03:00
parent 7a20fa4805
commit 9f0c37352e
2 changed files with 23 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/components/boards/boardBody.jade
View file

@ -16,6 +16,7 @@ template(name="boardBody")
if notDisplayThisBoard if notDisplayThisBoard
| {{_ 'tableVisibilityMode-allowPrivateOnly'}} | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
else else
.board-wrapper(class=currentBoard.colorClass) .board-wrapper(class=currentBoard.colorClass)
.board-canvas.js-swimlanes( .board-canvas.js-swimlanes(
class="{{#if hasSwimlanes}}dragscroll{{/if}}" class="{{#if hasSwimlanes}}dragscroll{{/if}}"

24
client/components/boards/boardBody.js
View file

@ -473,9 +473,29 @@ BlazeComponent.extendComponent({
closeModal(); closeModal();
} }
}); });
document.body.appendChild(modalElement); document.querySelector('.board-wrapper').appendChild(modalElement); // (optional: for better DOM order)
const openModal = function() { 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() { const closeModal = function() {
modalElement.style.display = 'none'; modalElement.style.display = 'none';