fix(modal) :: give modal component an accessible name

CHANGELOG.md

@@ -6,6 +6,7 @@
  - Added a `toast` component with plain-text or Markdown content, icons, colors, six screen placements, configurable auto-dismiss timing, optional manual dismissal, URL-fragment triggers, and automatic stacking of queued notifications.
  - `sqlpage.send_mail` now supports rich email bodies. Use `body_html` for a caller-provided HTML alternative, or `body_md` to render Markdown as HTML. Messages retain a plain-text alternative; `body` may be omitted when `body_md` is used, and `body_md` and `body_html` cannot be combined.
  - Form `options_source` URLs now preserve existing query parameters when adding the dynamic `search` parameter.
+ - Screen readers now announce the title of the modal component instead of an unnamed dialog.
 
 ## v0.45
 

sqlpage/templates/modal.handlebars

@@ -2,11 +2,11 @@
     id="{{id}}"
     tabindex="-1"
     aria-hidden="false"
-    aria-labelledby="{{title}}">
+    aria-labelledby="{{id}}-title">
     <div role="document" class="modal-dialog {{#if small}} modal-sm{{/if}}{{#if large}} modal-lg{{/if}}{{#if scrollable}} modal-dialog-scrollable{{/if}}">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{title}}</h5>
+                <h5 class="modal-title" id="{{id}}-title">{{title}}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{default close "close"}}"></button>
             </div>
             <div class="modal-body">

tests/end-to-end/official-site.spec.ts

@@ -480,7 +480,7 @@ test("modal", async ({ page }) => {
   const openButton = page.getByRole("button", { name: "Open a simple modal" });
   await openButton.click();
 
-  const modal = page.getByRole("dialog", { label: "A modal box" });
+  const modal = page.getByRole("dialog", { name: "A modal box" });
   await expect(modal).toBeVisible();
 
   // close the modal
@@ -489,7 +489,7 @@ test("modal", async ({ page }) => {
 
   await openButton.click();
   await expect(modal).toBeVisible();
-  await modal.getByRole("button", { label: "Close" }).first().click();
+  await modal.getByRole("button", { name: "Close" }).first().click();
   await expect(modal).not.toBeVisible();
 });