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
 

biome.json

@@ -6,7 +6,8 @@
       "!**/*.svg",
       "!examples/official-site/pgconf",
       "!tests/end-to-end/test-results",
-      "!.zed/*.json"
+      "!.zed/*.json",
+      "!.claude/*.json"
     ],
     "ignoreUnknown": true
   },

examples/CRUD - Authentication/www/css/style.css

@@ -1,23 +1,23 @@
 .menu_options_slim {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .menu_language_slim {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .menu_language {
   min-width: 200%;
 }
 
 div.dropdown-menu- {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 a.dropdown-item- {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .slim_item {
-  min-width: inherit !important;
+  min-width: inherit;
 }

examples/official-site/assets/highlightjs-and-tabler-theme.css

@@ -60,8 +60,8 @@
   --tblr-red: var(--tblr-danger);
 
   /* Luminous links */
-  --tblr-link-color: hsl(212, 70%, 75%) !important; /* Star glow */
-  --tblr-link-hover-color: hsl(212, 70%, 85%) !important; /* Supernova */
+  --tblr-link-color: hsl(212, 70%, 75%); /* Star glow */
+  --tblr-link-hover-color: hsl(212, 70%, 85%); /* Supernova */
   --tblr-carousel-caption-color: var(--tblr-muted-color);
 
   /* Ethereal shadows */
@@ -241,7 +241,8 @@ pre:has(code) {
 
 @media print {
   pre:has(code) {
+    /* biome-ignore lint/complexity/noImportantStyles: .markdown pre is more specific and caps the height at 20rem */
     max-height: none !important;
-    box-shadow: none !important;
+    box-shadow: none;
   }
 }

examples/rich-text-editor/rich_text_editor.js

@@ -141,7 +141,7 @@ function markdownToDelta(markdown) {
  */
 function mdastToDelta(tree) {
   const delta = { ops: [] };
-  if (!tree || !tree.children) return delta;
+  if (!tree?.children) return delta;
 
   for (const node of tree.children) {
     traverseMdastNode(node, delta);
@@ -230,7 +230,6 @@ function traverseMdastNode(node, delta, attributes = {}) {
       break;
 
     case "listItem": {
-      // biome-ignore lint/correctness/noUnusedVariables: object destructuring with a spread
       const { list, ...listItemChildrenAttributes } = attributes;
 
       for (const child of node.children || []) {

sqlpage/sqlpage.css

@@ -19,6 +19,7 @@ td > p {
 
 /** Removes the margin-bottom from the last element */
 .remove-bottom-margin > :last-child {
+  /* biome-ignore lint/complexity/noImportantStyles: the last child is often a tabler spacing utility such as .my-2, which is itself !important */
   margin-bottom: 0 !important;
 }
 
@@ -29,7 +30,7 @@ td > p {
 
 /* orchidjs/tom-select#712 */
 .ts-wrapper.multi .ts-control > div.active {
-  border: 1px solid transparent !important;
+  border: 1px solid transparent;
 }
 
 /* remove the ugly text highlight in the default tom-select */
@@ -55,7 +56,7 @@ code {
 
 .apexcharts-text,
 .apexcharts-datalabel {
-  fill: var(--tblr-body-color) !important;
+  fill: var(--tblr-body-color);
   font-weight: var(--tblr-body-font-weight);
 }
 
@@ -117,6 +118,7 @@ li p {
 }
 
 .leaflet-container {
+  /* biome-ignore lint/complexity/noImportantStyles: leaflet's stylesheet is injected after this one, at the same specificity */
   background: var(--tblr-active-bg) !important;
 }
 
@@ -189,7 +191,7 @@ See https://github.com/tabler/tabler/issues/2404
 }
 
 .text-black-fg {
-  color: var(--tblr-dark-fg) !important;
+  color: var(--tblr-dark-fg);
 }
 
 .toast-colored .toast-description a {

sqlpage/sqlpage.js

@@ -441,7 +441,7 @@ function open_modal_for_hash() {
   const hash = window.location.hash.substring(1);
   if (!hash) return;
   const modal = document.getElementById(hash);
-  if (!modal || !modal.classList.contains("modal")) return;
+  if (!modal?.classList.contains("modal")) return;
   const bootstrap_modal =
     window.tabler.bootstrap.Modal.getOrCreateInstance(modal);
   bootstrap_modal.show();

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

@@ -249,7 +249,6 @@ test("File upload", async ({ page }) => {
   await page.getByRole("button", { name: "Examples", exact: true }).click();
   await page.getByText("File uploads").click();
   const my_svg = '<svg><text y="20">Hello World</text></svg>';
-  // @ts-ignore
   const buffer = Buffer.from(my_svg);
   await page.getByLabel("Picture").setInputFiles({
     name: "small.svg",
@@ -307,22 +306,22 @@ test("table sorting", async ({ page }) => {
   // Test numeric sorting on id column
   await tableSection.getByRole("button", { name: "id" }).click();
   let ids = await tableSection.locator("td.id").allInnerTexts();
-  let numericIds = ids.map((id) => Number.parseInt(id));
+  let numericIds = ids.map((id) => Number.parseInt(id, 10));
   const sortedIds = [...numericIds].sort((a, b) => a - b);
   expect(numericIds).toEqual(sortedIds);
 
   // Test reverse sorting
   await tableSection.getByRole("button", { name: "id" }).click();
   ids = await tableSection.locator("td.id").allInnerTexts();
-  numericIds = ids.map((id) => Number.parseInt(id));
+  numericIds = ids.map((id) => Number.parseInt(id, 10));
   const reverseSortedIds = [...numericIds].sort((a, b) => b - a);
   expect(numericIds).toEqual(reverseSortedIds);
 
   // Test amount in stock column sorting
   await tableSection.getByRole("button", { name: "Amount in stock" }).click();
   const amounts = await tableSection.locator("td.Amount").allInnerTexts();
   const numericAmounts = amounts.map((amount) =>
-    Number.parseInt(amount.replace(/[^0-9]/g, "")),
+    Number.parseInt(amount.replace(/[^0-9]/g, ""), 10),
   );
   const sortedAmounts = [...numericAmounts].sort((a, b) => a - b);
   expect(numericAmounts).toEqual(sortedAmounts);
@@ -481,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
@@ -490,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();
 });