@jirawatpyk/aura-react 5.56.0 → 5.57.0

package/README.md

@@ -186,6 +186,12 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.57 — Chamber-OS addenda 70–71 (#169, #170)
+
+- **A Dialog or Drawer always opens with focus inside:** a control inside a closed `<details>` is no longer picked as the first control (Chromium reports it as focusable, but `focus()` on it did nothing, so focus stayed on the trigger and Escape didn't close the modal). The `<details>`'s own `<summary>` now counts as a control, so a body whose only control is a closed `<details>` opens on its summary. And focus is checked after each try: if a control doesn't take focus (or pass it on to a field inside it), the next one is tried, then the panel itself — focus is always in the modal, so Escape and the Tab trap work whatever the content. Command works the same way, and so does a Popover's first focus — which now also skips `tabindex="-1"` controls, so a Popover holding a SegmentedControl or Tabs opens on the selected item, as Tab would reach it. A summary is a control whether its `<details>` is open or closed, so a body that starts with an open `<details>` ("Advanced" above a form) now opens on its summary, the first Tab stop, rather than the first field.
+- **The Tab trap skips closed `<details>` too:** Tab and Shift+Tab wrap between the controls you can see, the summary included, and never to a control in a closed `<details>`; opened, its controls are Tab stops again. Popover's and DatePicker's trap do the same and now count a summary as a stop, so Tab from it no longer leaves the popover. A workaround such as `closeProps={{ 'data-autofocus': true }}` can go.
+- **A titled Alert is named by its title** (#170): an Alert with a `title` and a role (`alert`, `status`, `note` — the default is `alert` or `status` by tone) gets `aria-labelledby` pointing at the title, so a screen reader can say which notice it is when the banner takes focus or is read in browse mode. A passed `aria-label` or `aria-labelledby` wins; no title, or `role="none"`, stays unnamed. The title's id (set only when it names the Alert) is `titleId` if you pass one, else `id` + `-title`, else generated. The `/server` Alert can't generate ids: it uses `titleId` or `id` + `-title`, or for a plain-text title `aria-label`; give a rich title an `id` there. Drop a stand-in `aria-label={title}`.
+
 ## 5.56 — Chamber-OS addendum 69 (#168)
 
 - **AppShell's menu button is a 44px touch target:** the "Open navigation" button AppShell draws below 1024px is now 44×44 below 640px or on a touch screen (`(pointer: coarse)`), whatever the density — the same box as an IconButton with `touchHeight` — so it matches the 44px search and account buttons beside it. From 640px with a mouse it keeps its 32px size; from 1024px it is hidden, as before. The bar keeps its 56px height; on a phone the `header` content is 12px narrower, so a long title truncates a little sooner. No new prop.

package/dist/aura.bundle.js

@@ -331,6 +331,34 @@ window.Aura = (() => {
     return r2.current;
   };
   var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  function inClosedDetails(el) {
+    for (let p = el.parentElement; p; p = p.parentElement) {
+      if (p.tagName !== "DETAILS" || p.open) continue;
+      let s = null;
+      for (let c = p.firstElementChild; c; c = c.nextElementSibling)
+        if (c.tagName === "SUMMARY") {
+          s = c;
+          break;
+        }
+      if (!s || !(s === el || s.contains(el))) return true;
+    }
+    return false;
+  }
+  var TAB_STOPS = FOCUSABLE + ",details > summary";
+  function isTabStop(c, layoutless) {
+    return c.tabIndex >= 0 && (layoutless || c.getClientRects().length > 0) && !inClosedDetails(c);
+  }
+  function focusFirst(container, auto, lists, layoutless) {
+    const took = function(c) {
+      c.focus();
+      const a = document.activeElement;
+      return !!a && a !== container && container.contains(a);
+    };
+    if (auto && took(auto)) return true;
+    for (let l = 0; l < lists.length; l++)
+      for (let i = 0; i < lists[l].length; i++) if (isTabStop(lists[l][i], layoutless) && took(lists[l][i])) return true;
+    return false;
+  }
   function noopSubscribe() {
     return function() {
     };
@@ -348,9 +376,9 @@ window.Aura = (() => {
   function trapTab(e, container) {
     if (e.key !== "Tab" || !container) return;
     const list = Array.prototype.filter.call(
-      container.querySelectorAll(FOCUSABLE),
+      container.querySelectorAll(TAB_STOPS),
       function(el) {
-        return el.tabIndex >= 0 && el.offsetParent !== null;
+        return el.tabIndex >= 0 && el.offsetParent !== null && !inClosedDetails(el);
       }
     );
     if (!list.length) return;
@@ -623,19 +651,35 @@ window.Aura = (() => {
     warning: IconTriangleAlert,
     danger: IconCircleAlert
   };
-  function alertElement(props, ref, close) {
+  function alertElement(props, ref, close, autoId) {
     const tone2 = props.tone || "info";
-    const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+    const rest = omit(props, [
+      "tone",
+      "title",
+      "titleId",
+      "children",
+      "action",
+      "onDismiss",
+      "className",
+      "role",
+      "icon"
+    ]);
+    const role = props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status");
+    const titled = !!props.title && role !== "none" && !props["aria-label"] && !props["aria-labelledby"];
+    const titleId = props.titleId || (props.id ? props.id + "-title" : autoId);
+    const text2 = typeof props.title === "string" || typeof props.title === "number" ? String(props.title) : void 0;
     return /* @__PURE__ */ React4.createElement(
       "div",
       {
         ...rest,
         ref,
         className: cx("aura-alert", "aura-alert--" + tone2, props.className),
-        role: props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status")
+        role,
+        "aria-labelledby": titled && titleId ? titleId : props["aria-labelledby"],
+        "aria-label": titled && !titleId && text2 ? text2 : props["aria-label"]
       },
       /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || h2(ALERT_ICON[tone2]), className: "aura-alert__icon" }),
-      /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React4.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+      /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React4.createElement("p", { className: "aura-alert__title", id: titled ? titleId : void 0 }, props.title) : null, props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__action" }, props.action) : null),
       close
     );
   }
@@ -4307,10 +4351,12 @@ window.Aura = (() => {
   var React23 = __toESM(require_react(), 1);
   var Alert = React23.forwardRef(function Alert2(props, ref) {
     const t = useStrings();
+    const autoId = uid();
     return alertElement(
       props,
       ref,
-      props.onDismiss ? /* @__PURE__ */ React23.createElement(IconButton, { icon: /* @__PURE__ */ React23.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+      props.onDismiss ? /* @__PURE__ */ React23.createElement(IconButton, { icon: /* @__PURE__ */ React23.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+      autoId
     );
   });
 
@@ -4793,8 +4839,8 @@ window.Aura = (() => {
     };
   }
   function tabbable(el) {
-    const all = Array.prototype.filter.call(el.querySelectorAll(FOCUSABLE), function(c) {
-      return c.tabIndex >= 0;
+    const all = Array.prototype.filter.call(el.querySelectorAll(TAB_STOPS), function(c) {
+      return c.tabIndex >= 0 && !inClosedDetails(c);
     });
     const shown = all.filter(function(c) {
       return c.getClientRects().length > 0;
@@ -4813,18 +4859,17 @@ window.Aura = (() => {
         prev.current = document.activeElement;
         const unlock = lockScroll();
         const el = ref.current;
-        const firstIn = function(scope) {
-          if (!scope || !el) return null;
-          const sel = FOCUSABLE.split(",").map(function(s) {
+        const inPart = function(scope) {
+          if (!scope || !el) return [];
+          const sel = TAB_STOPS.split(",").map(function(s) {
             return scope + " " + s;
           }).join(",");
-          const list = el.querySelectorAll(sel);
-          for (let i = 0; i < list.length; i++)
-            if (list[i].tabIndex >= 0 && list[i].getClientRects().length > 0) return list[i];
-          return null;
+          return el.querySelectorAll(sel);
         };
-        const target = el && (el.querySelector("[data-autofocus]") || firstIn(o.bodySelector) || firstIn(o.footSelector) || el);
-        if (target && o.autoFocus !== false) target.focus();
+        if (el && o.autoFocus !== false) {
+          const auto = el.querySelector("[data-autofocus]");
+          if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+        }
         return function() {
           unlock();
           const l = latest.current;
@@ -10391,8 +10436,15 @@ window.Aura = (() => {
       function() {
         if (!open || !mounted) return;
         if (props.autoFocus !== false && pop.current) {
-          const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
-          (f || pop.current).focus();
+          const p = pop.current;
+          const layoutless = document.documentElement.getClientRects().length === 0;
+          if (!focusFirst(
+            p,
+            p.querySelector("[data-autofocus]"),
+            [p.querySelectorAll(TAB_STOPS)],
+            layoutless
+          ))
+            p.focus();
         }
         let timer2;
         function outside(e) {

package/dist/cjs/index.cjs

@@ -313,6 +313,34 @@ var uid = React3.useId || function() {
   return r2.current;
 };
 var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function inClosedDetails(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    if (p.tagName !== "DETAILS" || p.open) continue;
+    let s = null;
+    for (let c = p.firstElementChild; c; c = c.nextElementSibling)
+      if (c.tagName === "SUMMARY") {
+        s = c;
+        break;
+      }
+    if (!s || !(s === el || s.contains(el))) return true;
+  }
+  return false;
+}
+var TAB_STOPS = FOCUSABLE + ",details > summary";
+function isTabStop(c, layoutless) {
+  return c.tabIndex >= 0 && (layoutless || c.getClientRects().length > 0) && !inClosedDetails(c);
+}
+function focusFirst(container, auto, lists, layoutless) {
+  const took = function(c) {
+    c.focus();
+    const a = document.activeElement;
+    return !!a && a !== container && container.contains(a);
+  };
+  if (auto && took(auto)) return true;
+  for (let l = 0; l < lists.length; l++)
+    for (let i = 0; i < lists[l].length; i++) if (isTabStop(lists[l][i], layoutless) && took(lists[l][i])) return true;
+  return false;
+}
 function noopSubscribe() {
   return function() {
   };
@@ -330,9 +358,9 @@ var useIsoLayoutEffect = typeof window !== "undefined" ? React3.useLayoutEffect
 function trapTab(e, container) {
   if (e.key !== "Tab" || !container) return;
   const list = Array.prototype.filter.call(
-    container.querySelectorAll(FOCUSABLE),
+    container.querySelectorAll(TAB_STOPS),
     function(el) {
-      return el.tabIndex >= 0 && el.offsetParent !== null;
+      return el.tabIndex >= 0 && el.offsetParent !== null && !inClosedDetails(el);
     }
   );
   if (!list.length) return;
@@ -605,19 +633,35 @@ var ALERT_ICON = {
   warning: IconTriangleAlert,
   danger: IconCircleAlert
 };
-function alertElement(props, ref, close) {
+function alertElement(props, ref, close, autoId) {
   const tone2 = props.tone || "info";
-  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  const rest = omit(props, [
+    "tone",
+    "title",
+    "titleId",
+    "children",
+    "action",
+    "onDismiss",
+    "className",
+    "role",
+    "icon"
+  ]);
+  const role = props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status");
+  const titled = !!props.title && role !== "none" && !props["aria-label"] && !props["aria-labelledby"];
+  const titleId = props.titleId || (props.id ? props.id + "-title" : autoId);
+  const text2 = typeof props.title === "string" || typeof props.title === "number" ? String(props.title) : void 0;
   return /* @__PURE__ */ React4.createElement(
     "div",
     {
       ...rest,
       ref,
       className: cx("aura-alert", "aura-alert--" + tone2, props.className),
-      role: props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status")
+      role,
+      "aria-labelledby": titled && titleId ? titleId : props["aria-labelledby"],
+      "aria-label": titled && !titleId && text2 ? text2 : props["aria-label"]
     },
     /* @__PURE__ */ React4.createElement(Icon, { name: props.icon || h2(ALERT_ICON[tone2]), className: "aura-alert__icon" }),
-    /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React4.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React4.createElement("p", { className: "aura-alert__title", id: titled ? titleId : void 0 }, props.title) : null, props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React4.createElement("div", { className: "aura-alert__action" }, props.action) : null),
     close
   );
 }
@@ -4289,10 +4333,12 @@ var Combobox = React22.forwardRef(
 var React23 = __toESM(require("react"), 1);
 var Alert = React23.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
+  const autoId = uid();
   return alertElement(
     props,
     ref,
-    props.onDismiss ? /* @__PURE__ */ React23.createElement(IconButton, { icon: /* @__PURE__ */ React23.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+    props.onDismiss ? /* @__PURE__ */ React23.createElement(IconButton, { icon: /* @__PURE__ */ React23.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+    autoId
   );
 });
 
@@ -4775,8 +4821,8 @@ function lockScroll() {
   };
 }
 function tabbable(el) {
-  const all = Array.prototype.filter.call(el.querySelectorAll(FOCUSABLE), function(c) {
-    return c.tabIndex >= 0;
+  const all = Array.prototype.filter.call(el.querySelectorAll(TAB_STOPS), function(c) {
+    return c.tabIndex >= 0 && !inClosedDetails(c);
   });
   const shown = all.filter(function(c) {
     return c.getClientRects().length > 0;
@@ -4795,18 +4841,17 @@ function useModal(open, ref, opts) {
       prev.current = document.activeElement;
       const unlock = lockScroll();
       const el = ref.current;
-      const firstIn = function(scope) {
-        if (!scope || !el) return null;
-        const sel = FOCUSABLE.split(",").map(function(s) {
+      const inPart = function(scope) {
+        if (!scope || !el) return [];
+        const sel = TAB_STOPS.split(",").map(function(s) {
           return scope + " " + s;
         }).join(",");
-        const list = el.querySelectorAll(sel);
-        for (let i = 0; i < list.length; i++)
-          if (list[i].tabIndex >= 0 && list[i].getClientRects().length > 0) return list[i];
-        return null;
+        return el.querySelectorAll(sel);
       };
-      const target = el && (el.querySelector("[data-autofocus]") || firstIn(o.bodySelector) || firstIn(o.footSelector) || el);
-      if (target && o.autoFocus !== false) target.focus();
+      if (el && o.autoFocus !== false) {
+        const auto = el.querySelector("[data-autofocus]");
+        if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+      }
       return function() {
         unlock();
         const l = latest.current;
@@ -10373,8 +10418,15 @@ var Popover = React66.forwardRef(function Popover2(props, ref) {
     function() {
       if (!open || !mounted) return;
       if (props.autoFocus !== false && pop.current) {
-        const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
-        (f || pop.current).focus();
+        const p = pop.current;
+        const layoutless = document.documentElement.getClientRects().length === 0;
+        if (!focusFirst(
+          p,
+          p.querySelector("[data-autofocus]"),
+          [p.querySelectorAll(TAB_STOPS)],
+          layoutless
+        ))
+          p.focus();
       }
       let timer2;
       function outside(e) {

package/dist/esm/Alert.js

@@ -2,15 +2,18 @@
 import * as React from "react";
 import { IconButton } from "./IconButton.js";
 import { alertElement } from "./display.js";
+import { uid } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { IconX } from "./icons.js";
 import { ALERT_ICON } from "./display.js";
 const Alert = React.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
+  const autoId = uid();
   return alertElement(
     props,
     ref,
-    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+    autoId
   );
 });
 export {

package/dist/esm/Popover.js

@@ -2,8 +2,9 @@
 import * as React from "react";
 import { IconButton } from "./IconButton.js";
 import {
-  FOCUSABLE,
   cx,
+  focusFirst,
+  TAB_STOPS,
   trapTab,
   uid,
   useIsoLayoutEffect,
@@ -69,8 +70,15 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
     function() {
       if (!open || !mounted) return;
       if (props.autoFocus !== false && pop.current) {
-        const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
-        (f || pop.current).focus();
+        const p = pop.current;
+        const layoutless = document.documentElement.getClientRects().length === 0;
+        if (!focusFirst(
+          p,
+          p.querySelector("[data-autofocus]"),
+          [p.querySelectorAll(TAB_STOPS)],
+          layoutless
+        ))
+          p.focus();
       }
       let timer;
       function outside(e) {

package/dist/esm/display.js

@@ -23,19 +23,35 @@ const ALERT_ICON = {
   warning: IconTriangleAlert,
   danger: IconCircleAlert
 };
-function alertElement(props, ref, close) {
+function alertElement(props, ref, close, autoId) {
   const tone = props.tone || "info";
-  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  const rest = omit(props, [
+    "tone",
+    "title",
+    "titleId",
+    "children",
+    "action",
+    "onDismiss",
+    "className",
+    "role",
+    "icon"
+  ]);
+  const role = props.role || (tone === "danger" || tone === "warning" ? "alert" : "status");
+  const titled = !!props.title && role !== "none" && !props["aria-label"] && !props["aria-labelledby"];
+  const titleId = props.titleId || (props.id ? props.id + "-title" : autoId);
+  const text = typeof props.title === "string" || typeof props.title === "number" ? String(props.title) : void 0;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...rest,
       ref,
       className: cx("aura-alert", "aura-alert--" + tone, props.className),
-      role: props.role || (tone === "danger" || tone === "warning" ? "alert" : "status")
+      role,
+      "aria-labelledby": titled && titleId ? titleId : props["aria-labelledby"],
+      "aria-label": titled && !titleId && text ? text : props["aria-label"]
     },
     /* @__PURE__ */ React.createElement(Icon, { name: props.icon || h(ALERT_ICON[tone]), className: "aura-alert__icon" }),
-    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title", id: titled ? titleId : void 0 }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
     close
   );
 }

package/dist/esm/internal.js

@@ -33,6 +33,34 @@ const uid = React.useId || function() {
   return r.current;
 };
 const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function inClosedDetails(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    if (p.tagName !== "DETAILS" || p.open) continue;
+    let s = null;
+    for (let c = p.firstElementChild; c; c = c.nextElementSibling)
+      if (c.tagName === "SUMMARY") {
+        s = c;
+        break;
+      }
+    if (!s || !(s === el || s.contains(el))) return true;
+  }
+  return false;
+}
+const TAB_STOPS = FOCUSABLE + ",details > summary";
+function isTabStop(c, layoutless) {
+  return c.tabIndex >= 0 && (layoutless || c.getClientRects().length > 0) && !inClosedDetails(c);
+}
+function focusFirst(container, auto, lists, layoutless) {
+  const took = function(c) {
+    c.focus();
+    const a = document.activeElement;
+    return !!a && a !== container && container.contains(a);
+  };
+  if (auto && took(auto)) return true;
+  for (let l = 0; l < lists.length; l++)
+    for (let i = 0; i < lists[l].length; i++) if (isTabStop(lists[l][i], layoutless) && took(lists[l][i])) return true;
+  return false;
+}
 function noopSubscribe() {
   return function() {
   };
@@ -50,9 +78,9 @@ const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect
 function trapTab(e, container) {
   if (e.key !== "Tab" || !container) return;
   const list = Array.prototype.filter.call(
-    container.querySelectorAll(FOCUSABLE),
+    container.querySelectorAll(TAB_STOPS),
     function(el) {
-      return el.tabIndex >= 0 && el.offsetParent !== null;
+      return el.tabIndex >= 0 && el.offsetParent !== null && !inClosedDetails(el);
     }
   );
   if (!list.length) return;
@@ -84,10 +112,14 @@ const FilterSheet = React.createContext(false);
 export {
   FOCUSABLE,
   FilterSheet,
+  TAB_STOPS,
   collator,
   compare,
   cx,
   devWarnOnce,
+  focusFirst,
+  inClosedDetails,
+  isTabStop,
   omit,
   plainClick,
   tone,

package/dist/esm/useModal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { FOCUSABLE, useMounted } from "./internal.js";
+import { focusFirst, inClosedDetails, TAB_STOPS, useMounted } from "./internal.js";
 let locks = 0, savedOverflow = "";
 function lockScroll() {
   const body = document.body;
@@ -16,8 +16,8 @@ function lockScroll() {
   };
 }
 function tabbable(el) {
-  const all = Array.prototype.filter.call(el.querySelectorAll(FOCUSABLE), function(c) {
-    return c.tabIndex >= 0;
+  const all = Array.prototype.filter.call(el.querySelectorAll(TAB_STOPS), function(c) {
+    return c.tabIndex >= 0 && !inClosedDetails(c);
   });
   const shown = all.filter(function(c) {
     return c.getClientRects().length > 0;
@@ -36,18 +36,17 @@ function useModal(open, ref, opts) {
       prev.current = document.activeElement;
       const unlock = lockScroll();
       const el = ref.current;
-      const firstIn = function(scope) {
-        if (!scope || !el) return null;
-        const sel = FOCUSABLE.split(",").map(function(s) {
+      const inPart = function(scope) {
+        if (!scope || !el) return [];
+        const sel = TAB_STOPS.split(",").map(function(s) {
           return scope + " " + s;
         }).join(",");
-        const list = el.querySelectorAll(sel);
-        for (let i = 0; i < list.length; i++)
-          if (list[i].tabIndex >= 0 && list[i].getClientRects().length > 0) return list[i];
-        return null;
+        return el.querySelectorAll(sel);
       };
-      const target = el && (el.querySelector("[data-autofocus]") || firstIn(o.bodySelector) || firstIn(o.footSelector) || el);
-      if (target && o.autoFocus !== false) target.focus();
+      if (el && o.autoFocus !== false) {
+        const auto = el.querySelector("[data-autofocus]");
+        if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+      }
       return function() {
         unlock();
         const l = latest.current;

package/dist/index.d.cts

@@ -707,7 +707,12 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	role?: "alert" | "status" | "note" | "none" | undefined;
 	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
 	icon?: IconInput | undefined;
+	/** With a `role` other than `none`, the Alert is named by its title (5.57, Chamber-OS 170: `aria-labelledby`), unless
+	 * you pass `aria-label` or `aria-labelledby`. */
 	title?: React$1.ReactNode | undefined;
+	/** id for the title element (default: generated, or `id` + `-title`). The server entry has no generated ids: pass
+	 * `id` or `titleId` there for a title that isn't plain text. */
+	titleId?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 	/** Usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -707,7 +707,12 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	role?: "alert" | "status" | "note" | "none" | undefined;
 	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
 	icon?: IconInput | undefined;
+	/** With a `role` other than `none`, the Alert is named by its title (5.57, Chamber-OS 170: `aria-labelledby`), unless
+	 * you pass `aria-label` or `aria-labelledby`. */
 	title?: React$1.ReactNode | undefined;
+	/** id for the title element (default: generated, or `id` + `-title`). The server entry has no generated ids: pass
+	 * `id` or `titleId` there for a title that isn't plain text. */
+	titleId?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 	/** Usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;

package/dist/server/index.cjs

@@ -1179,19 +1179,35 @@ var ALERT_ICON = {
   warning: IconTriangleAlert,
   danger: IconCircleAlert
 };
-function alertElement(props, ref, close) {
+function alertElement(props, ref, close, autoId) {
   const tone2 = props.tone || "info";
-  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  const rest = omit(props, [
+    "tone",
+    "title",
+    "titleId",
+    "children",
+    "action",
+    "onDismiss",
+    "className",
+    "role",
+    "icon"
+  ]);
+  const role = props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status");
+  const titled = !!props.title && role !== "none" && !props["aria-label"] && !props["aria-labelledby"];
+  const titleId = props.titleId || (props.id ? props.id + "-title" : autoId);
+  const text = typeof props.title === "string" || typeof props.title === "number" ? String(props.title) : void 0;
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
       ...rest,
       ref,
       className: cx("aura-alert", "aura-alert--" + tone2, props.className),
-      role: props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status")
+      role,
+      "aria-labelledby": titled && titleId ? titleId : props["aria-labelledby"],
+      "aria-label": titled && !titleId && text ? text : props["aria-label"]
     },
     /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || h2(ALERT_ICON[tone2]), className: "aura-alert__icon" }),
-    /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React3.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React3.createElement("p", { className: "aura-alert__title", id: titled ? titleId : void 0 }, props.title) : null, props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__action" }, props.action) : null),
     close
   );
 }

package/dist/server/index.d.cts

@@ -63,7 +63,12 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	role?: "alert" | "status" | "note" | "none" | undefined;
 	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
 	icon?: IconInput | undefined;
+	/** With a `role` other than `none`, the Alert is named by its title (5.57, Chamber-OS 170: `aria-labelledby`), unless
+	 * you pass `aria-label` or `aria-labelledby`. */
 	title?: React$1.ReactNode | undefined;
+	/** id for the title element (default: generated, or `id` + `-title`). The server entry has no generated ids: pass
+	 * `id` or `titleId` there for a title that isn't plain text. */
+	titleId?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 	/** Usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;

package/dist/server/index.d.ts

@@ -63,7 +63,12 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	role?: "alert" | "status" | "note" | "none" | undefined;
 	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
 	icon?: IconInput | undefined;
+	/** With a `role` other than `none`, the Alert is named by its title (5.57, Chamber-OS 170: `aria-labelledby`), unless
+	 * you pass `aria-label` or `aria-labelledby`. */
 	title?: React$1.ReactNode | undefined;
+	/** id for the title element (default: generated, or `id` + `-title`). The server entry has no generated ids: pass
+	 * `id` or `titleId` there for a title that isn't plain text. */
+	titleId?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 	/** Usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;

package/dist/server/index.js

@@ -1114,19 +1114,35 @@ var ALERT_ICON = {
   warning: IconTriangleAlert,
   danger: IconCircleAlert
 };
-function alertElement(props, ref, close) {
+function alertElement(props, ref, close, autoId) {
   const tone2 = props.tone || "info";
-  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  const rest = omit(props, [
+    "tone",
+    "title",
+    "titleId",
+    "children",
+    "action",
+    "onDismiss",
+    "className",
+    "role",
+    "icon"
+  ]);
+  const role = props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status");
+  const titled = !!props.title && role !== "none" && !props["aria-label"] && !props["aria-labelledby"];
+  const titleId = props.titleId || (props.id ? props.id + "-title" : autoId);
+  const text = typeof props.title === "string" || typeof props.title === "number" ? String(props.title) : void 0;
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
       ...rest,
       ref,
       className: cx("aura-alert", "aura-alert--" + tone2, props.className),
-      role: props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status")
+      role,
+      "aria-labelledby": titled && titleId ? titleId : props["aria-labelledby"],
+      "aria-label": titled && !titleId && text ? text : props["aria-label"]
     },
     /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || h2(ALERT_ICON[tone2]), className: "aura-alert__icon" }),
-    /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React3.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React3.createElement("p", { className: "aura-alert__title", id: titled ? titleId : void 0 }, props.title) : null, props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React3.createElement("div", { className: "aura-alert__action" }, props.action) : null),
     close
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.56.0",
+  "version": "5.57.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",