fix(map) :: ignore map coordinates that are not a pair of numbers

CHANGELOG.md

@@ -6,6 +6,8 @@
  - 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.
+ - Map coordinates that are not a pair of numbers, like a latitude with no longitude, are now ignored instead of breaking the whole map.
+ - 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

@@ -182,12 +182,14 @@ function sqlpage_map() {
     onLeafletLoad();
   }
   /**
-   *
    * @param {string|undefined} coords
    * @returns {[number, number] | undefined}
    */
   function parseCoords(coords) {
-    return coords?.split(",", 2).map((c) => Number.parseFloat(c));
+    const parsed = coords?.split(",", 2).map((c) => Number.parseFloat(c));
+    if (parsed?.length !== 2 || !parsed.every(Number.isFinite))
+      return undefined;
+    return [parsed[0], parsed[1]];
   }
   function onLeafletLoad() {
     is_leaflet_loaded = true;
@@ -230,6 +232,7 @@ function sqlpage_map() {
     const marker = dataset.coords
       ? createMarker(marker_elem, options)
       : createGeoJSONMarker(marker_elem, options);
+    if (!marker) return;
     marker.addTo(map);
     map._sqlpage_markers.push(marker);
     if (marker_elem.textContent.trim()) marker.bindPopup(marker_elem);
@@ -241,6 +244,7 @@ function sqlpage_map() {
   }
   function createMarker(marker_elem, options) {
     const coords = parseCoords(marker_elem.dataset.coords);
+    if (!coords) return undefined;
     const icon_obj = marker_elem.getElementsByClassName("mapicon")[0];
     if (icon_obj) {
       const size =
@@ -441,7 +445,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/map-component.spec.ts

@@ -0,0 +1,99 @@
+import { expect, type Page, test } from "@playwright/test";
+
+const BASE = process.env.SQLPAGE_TEST_BASE ?? "http://localhost:8080/";
+
+declare global {
+  function sqlpage_map(): void;
+}
+
+type Marker = { coords?: string; title: string };
+
+const PARIS = "48.85,2.35";
+const PARIS_WITHOUT_ITS_LONGITUDE = "48.85,";
+const NOT_COORDINATES = "somewhere nice";
+
+async function renderMap(
+  page: Page,
+  center: string | null,
+  markers: Marker[] = [],
+) {
+  return page.evaluate(
+    async ({ center, markers }) => {
+      document.getElementById("test-map")?.remove();
+      const container = document.createElement("div");
+      container.id = "test-map";
+      container.className = "leaflet";
+      container.style.height = "200px";
+      container.dataset.zoom = "5";
+      container.dataset.max_zoom = "18";
+      if (center !== null) container.dataset.center = center;
+      container.innerHTML = markers
+        .map(
+          (m) =>
+            `<div class="marker"${m.coords === undefined ? "" : ` data-coords="${m.coords}"`}><h3>${m.title}</h3></div>`,
+        )
+        .join("");
+      container.dataset.preInit = "map";
+      document.body.appendChild(container);
+
+      const errors: string[] = [];
+      const record = (e: ErrorEvent) => errors.push(e.message);
+      window.addEventListener("error", record);
+      sqlpage_map();
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      window.removeEventListener("error", record);
+
+      return {
+        errors,
+        markers: container.querySelectorAll(".leaflet-marker-icon").length,
+        initialized: !!container.querySelector(".leaflet-map-pane"),
+      };
+    },
+    { center, markers },
+  );
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`${BASE}/documentation.sql?component=map#component`);
+  await page.waitForFunction(() => "L" in window);
+});
+
+test("centers the map on a pair of coordinates", async ({ page }) => {
+  const map = await renderMap(page, PARIS);
+
+  expect(map.errors).toEqual([]);
+  expect(map.initialized).toBe(true);
+});
+
+test("ignores a center whose longitude is missing", async ({ page }) => {
+  const map = await renderMap(page, PARIS_WITHOUT_ITS_LONGITUDE);
+
+  expect(map.errors).toEqual([]);
+  expect(map.initialized).toBe(true);
+});
+
+test("ignores a center that is not a pair of numbers", async ({ page }) => {
+  const map = await renderMap(page, NOT_COORDINATES);
+
+  expect(map.errors).toEqual([]);
+  expect(map.initialized).toBe(true);
+});
+
+test("draws a marker at a pair of coordinates", async ({ page }) => {
+  const map = await renderMap(page, PARIS, [{ coords: PARIS, title: "Paris" }]);
+
+  expect(map.errors).toEqual([]);
+  expect(map.markers).toBe(1);
+});
+
+test("skips a marker whose longitude is missing, keeping the others", async ({
+  page,
+}) => {
+  const map = await renderMap(page, PARIS, [
+    { coords: PARIS_WITHOUT_ITS_LONGITUDE, title: "Half of Paris" },
+    { coords: PARIS, title: "Paris" },
+  ]);
+
+  expect(map.errors).toEqual([]);
+  expect(map.markers).toBe(1);
+});

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();
 });