Refactor admin modals: replace backdrop divs with native <dialog> elements for improved accessibility and functionality

admin/menu.js

@@ -5,8 +5,8 @@
 const csrfToken = document.body.dataset.csrfToken;
 
 // Item Modal helpers
-const itemModal = document.getElementById('modal-item-backdrop');
-const catModal = document.getElementById('modal-cat-backdrop');
+const itemModal = document.getElementById('modal-item');
+const catModal = document.getElementById('modal-cat');
 
 function openItemModal(itemData = null) {
   const title = document.getElementById('modal-item-title');
@@ -37,12 +37,12 @@ function openItemModal(itemData = null) {
     availField.checked = true;
   }
 
-  itemModal.classList.add('is-open');
+  itemModal.showModal();
   nameField.focus();
 }
 
 function closeItemModal() {
-  itemModal.classList.remove('is-open');
+  itemModal.close();
 }
 
 function openCategoryModal(catData = null) {
@@ -63,12 +63,12 @@ function openCategoryModal(catData = null) {
     descField.value = '';
   }
 
-  catModal.classList.add('is-open');
+  catModal.showModal();
   nameField.focus();
 }
 
 function closeCategoryModal() {
-  catModal.classList.remove('is-open');
+  catModal.close();
 }
 
 function escapeHtml(text) {