Enhance accessibility for modal dialogs and improve DOM structure

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

View file

@ -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';