cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(modals): drop dangling aria-labelledby + rename inner id

Browse source 
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>
This commit is contained in:
mwiegand 2026-05-17 14:03:09 +02:00
parent 33a2e529f6
commit 55c7856eb1
No known key found for this signature in database
3 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
l4d2web/l4d2web/static/js/editor.js
View file

@ -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);

2
l4d2web/l4d2web/templates/base.html
View file

@ -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>

2
l4d2web/l4d2web/templates/overlay_file_editor.html
View file

@ -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>