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

admin/users.js

@@ -5,9 +5,9 @@
 const csrfToken = document.body.dataset.csrfToken;
 const currentUserId = document.body.dataset.currentUserId;
 
-const userModal = document.getElementById('modal-user-backdrop');
-const passwordModal = document.getElementById('modal-password-backdrop');
-const editModal = document.getElementById('modal-edit-backdrop');
+const userModal = document.getElementById('modal-user');
+const passwordModal = document.getElementById('modal-password');
+const editModal = document.getElementById('modal-edit');
 
 function escapeHtml(text) {
   const div = document.createElement('div');
@@ -54,16 +54,14 @@ function openUserModal() {
   const form = document.getElementById('form-user');
   form.reset();
   resetPasswordVisibility(form);
-  userModal.classList.add('is-open');
+  userModal.showModal();
 }
 
-// Safari ignores autocomplete="off" on fields labeled "Username" and offers
-// saved logins whenever one has focus. The modals used to auto-focus that
-// field, and a closed modal left it focused, so the prompt kept popping up.
-// Now nothing is auto-focused, and closing a modal drops focus.
+// Native <dialog>: close() hides it (not rendered, so its fields can't keep
+// focus or trigger autofill) and returns focus to whatever opened it.
+// Esc closes it too, with no extra code.
 function closeModal(modal) {
-  modal.classList.remove('is-open');
-  if (modal.contains(document.activeElement)) document.activeElement.blur();
+  modal.close();
 }
 
 function closeUserModal() {
@@ -84,7 +82,7 @@ function openPasswordModal(userId, username) {
 
   document.getElementById('password-current-group').style.display = isSelf ? '' : 'none';
 
-  passwordModal.classList.add('is-open');
+  passwordModal.showModal();
   (isSelf ? document.getElementById('password-field-current') : document.getElementById('password-field-new')).focus();
 }
 
@@ -105,7 +103,7 @@ function openEditModal(userId, username, role) {
   roleSelect.disabled = isSelf;
   document.getElementById('edit-role-self-hint').hidden = !isSelf;
 
-  editModal.classList.add('is-open');
+  editModal.showModal();
 }
 
 function closeEditModal() {