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

admin/menu.php

@@ -328,9 +328,8 @@ $menuEnabled = is_menu_enabled();
     </div>
   </main>
 
-  <!-- Modal Backdrop: Menu Item -->
-  <div class="admin-modal-backdrop" id="modal-item-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-item-title">
-    <div class="admin-modal">
+  <!-- Modal: Menu Item -->
+  <dialog class="admin-modal" id="modal-item" aria-labelledby="modal-item-title">
       <div class="modal-header">
         <h2 id="modal-item-title">✨ Add Menu Item</h2>
         <button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-item-modal">&times;</button>
@@ -383,12 +382,10 @@ $menuEnabled = is_menu_enabled();
           <button type="button" class="btn btn-outline" id="btn-cancel-item">Cancel</button>
         </div>
       </form>
-    </div>
-  </div>
+  </dialog>
 
-  <!-- Modal Backdrop: Category -->
-  <div class="admin-modal-backdrop" id="modal-cat-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-cat-title">
-    <div class="admin-modal">
+  <!-- Modal: Category -->
+  <dialog class="admin-modal" id="modal-cat" aria-labelledby="modal-cat-title">
       <div class="modal-header">
         <h2 id="modal-cat-title">✨ Add Category</h2>
         <button type="button" class="modal-close" aria-label="Close dialog" id="btn-close-cat-modal">&times;</button>
@@ -415,8 +412,7 @@ $menuEnabled = is_menu_enabled();
           <button type="button" class="btn btn-outline" id="btn-cancel-cat">Cancel</button>
         </div>
       </form>
-    </div>
-  </div>
+  </dialog>
 
   <script src="menu.js" defer></script>