From 55c7856eb1049c126ce159f81938fc65ab845f20 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 14:03:09 +0200
Subject: [PATCH] fix(modals): drop dangling aria-labelledby + rename inner id
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two small follow-ups flagged during code review of Tasks 4 and 9:

1. <dialog id="modal-container" aria-labelledby="modal-content-title">
   referenced an id that never existed. Removed the attribute; the
   inner modal content provides its own aria-labelledby on the heading,
   and screen readers traverse dialog content reasonably without an
   outer label.
2. The new editor template's outer <div> shared id="files-editor-modal"
   with the legacy inline <dialog> in overlay_detail.html — duplicate
   id when the modal is open, W3C-invalid (though functionally inert).
   Renamed the new div to id="files-editor-fragment" and broadened
   editor.js's closest() selector to match both, so auto-language
   detection works for both the legacy and the new modal pipelines.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/js/editor.js                | 2 +-
 l4d2web/l4d2web/templates/base.html                | 2 +-
 l4d2web/l4d2web/templates/overlay_file_editor.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/l4d2web/l4d2web/static/js/editor.js b/l4d2web/l4d2web/static/js/editor.js
index a1d701f..4d63801 100644
--- a/l4d2web/l4d2web/static/js/editor.js
+++ b/l4d2web/l4d2web/static/js/editor.js
@@ -46,7 +46,7 @@
     let filenameInput = null;
     let dropdown = null;
     if (lang === "auto") {
-      const modal = textarea.closest("#files-editor-modal") || document;
+      const modal = textarea.closest("#files-editor-modal, #files-editor-fragment") || document;
       filenameInput = modal.querySelector("[data-editor-filename]");
       dropdown = modal.querySelector("[data-editor-language-select]");
       lang = resolveAutoLanguage(filenameInput);
diff --git a/l4d2web/l4d2web/templates/base.html b/l4d2web/l4d2web/templates/base.html
index 3cdbbb1..2553154 100644
--- a/l4d2web/l4d2web/templates/base.html
+++ b/l4d2web/l4d2web/templates/base.html
@@ -37,7 +37,7 @@
     <main class="container">
       {% block content %}{% endblock %}
     </main>
-    <dialog id="modal-container" class="modal modal-wide" aria-labelledby="modal-content-title">
+    <dialog id="modal-container" class="modal modal-wide">
       <div id="modal-content"></div>
     </dialog>
     <script src="{{ url_for('static', filename='vendor/htmx.min.js') }}"></script>
diff --git a/l4d2web/l4d2web/templates/overlay_file_editor.html b/l4d2web/l4d2web/templates/overlay_file_editor.html
index 12b01aa..714f752 100644
--- a/l4d2web/l4d2web/templates/overlay_file_editor.html
+++ b/l4d2web/l4d2web/templates/overlay_file_editor.html
@@ -2,7 +2,7 @@
 {% block title %}Edit {{ rel_path }} · {{ overlay.name }}{% endblock %}
 {% block extra_head %}{% include "_editor_assets.html" %}{% endblock %}
 {% block content %}
-<div id="files-editor-modal" aria-labelledby="files-editor-title">
+<div id="files-editor-fragment" aria-labelledby="files-editor-title">
   <div class="modal-header">
     <h2 id="files-editor-title" class="files-editor-path">
       <span class="files-editor-title-text">{{ rel_path }}</span>