david/theoldfitz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Dyer committed 2026-10-25 13:08:40 -04:00
1 parent 242c5165e1
commit 02551eebbc
8 files changed
+123 -106
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/users.php
+9 -15
View File
@@ -302,9 +302,8 @@ $users = get_all_users();
</div>
</main>
<!-- Modal Backdrop: Add User -->
<div class="admin-modal-backdrop" id="modal-user-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-user-title">
<div class="admin-modal">
<!-- Modal: Add User -->
<dialog class="admin-modal" id="modal-user" aria-labelledby="modal-user-title">
<div class="modal-header">
<h2 id="modal-user-title">✨ Add User</h2>
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-user-modal">&times;</button>
@@ -361,12 +360,10 @@ $users = get_all_users();
<button type="button" class="btn btn-outline" id="btn-cancel-user">Cancel</button>
</div>
</form>
</div>
</div>
</dialog>
<!-- Modal Backdrop: Edit User -->
<div class="admin-modal-backdrop" id="modal-edit-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-edit-title">
<div class="admin-modal">
<!-- Modal: Edit User -->
<dialog class="admin-modal" id="modal-edit" aria-labelledby="modal-edit-title">
<div class="modal-header">
<h2 id="modal-edit-title">✏️ Edit User</h2>
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-edit-modal">&times;</button>
@@ -398,12 +395,10 @@ $users = get_all_users();
<button type="button" class="btn btn-outline" id="btn-cancel-edit">Cancel</button>
</div>
</form>
</div>
</div>
</dialog>
<!-- Modal Backdrop: Change Password -->
<div class="admin-modal-backdrop" id="modal-password-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-password-title">
<div class="admin-modal">
<!-- Modal: Change Password -->
<dialog class="admin-modal" id="modal-password" aria-labelledby="modal-password-title">
<div class="modal-header">
<h2 id="modal-password-title">🔑 Change Password</h2>
<button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-password-modal">&times;</button>
@@ -459,8 +454,7 @@ $users = get_all_users();
<button type="button" class="btn btn-outline" id="btn-cancel-password">Cancel</button>
</div>
</form>
</div>
</div>
</dialog>
<script src="users.js" defer></script>