npm - @jirawatpyk/aura-react - Versions diffs - 5.5.0 → 5.7.0 - Mend

@jirawatpyk/aura-react 5.5.0 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md CHANGED Viewed

@@ -186,13 +186,39 @@ 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.7 — Chamber-OS addendum 5 (shell details)
+- **DropdownMenu `header`**: content above the items, e.g. name, email and role in an account menu. It sits outside `role="menu"` (arrow keys, Home/End skip it; clicking it keeps focus on the item) and is the menu's accessible description (`aria-describedby`). Screen readers differ in whether they speak a menu's description on open; keep the essentials (who is signed in) in the trigger's name too if they must be heard. With a header, the menu's `ref` and `.aura-menu` are the outer box and `role="menu"` is `.aura-menu__list` inside it.
+- **Breadcrumb**: an item with neither `href` nor `onClick` is plain text (`.aura-crumbs__text`), not a button that does nothing.
+- **AppShell** `<main>` has `tabIndex={-1}`, so a skip link or `document.getElementById(mainId)?.focus({ preventScroll: true })` moves focus there when the row you acted on leaves the list. No ring is drawn on the landmark.
+- **Dialog / Drawer `dismissOnScrim`**: `false` keeps it open on a scrim click; Escape and the close button still close it, and focus stays inside. **`role="alertdialog"` now defaults to `false`**, so a stray click outside a confirmation doesn't throw away a typed reason; pass `dismissOnScrim` to get the old behaviour.
+- **BottomNav item `ariaLabel`**: the full name when the visible label is shortened (`label="Konto"`, `ariaLabel="Mitt konto"`); the count or badge words still follow. Include the visible text in it (WCAG 2.5.3).
+- **SideNav** rows are 44px on touch screens (AppShell's phone drawer); 36px with a mouse.
+## 5.6 — Chamber-OS addendum 4 (selectable rows, richer toasts)
+- **DataTable** `isRowSelectable={(r) => r.status === 'Awaiting review'}`: a row it rejects shows no checkbox (the cell stays, so columns line up), and select-all, Space, the "N selected" count and `onSelectionChange` skip it. A rejected key passed in through `selected` is never shown as selected and is dropped from your state with one `onSelectionChange` call. `rowSelectDisabledLabel={(r) => …}` names the empty cell for screen readers. Server HTML has no checkbox for those rows.
+- **Toasts**: `description` takes JSX (lines with their own links, read once in the live region); `actions` (up to two; two, or one under a description, go on their own row below the text); an action with `href` is a link through `linkComponent` (Cmd/Ctrl-click opens a tab and keeps the toast); `dismiss: false` keeps the toast open after its action. Escape closes the toast under focus.
+- **Toaster** `position="top-center"` (or `bottom-center`, `top-right`, `bottom-right`) and `offset={64}` (or `--aura-toaster-offset`) to clear a top bar, plus the safe-area inset; below 640px toasts still span the width.
+- **Alt+T** (`hotkey`, matched on the physical key so macOS Option+T works; `false` turns it off) focuses the newest toast's action, else its close button, and pauses its timer while focus stays inside (moving the mouse away doesn't restart it); the region's name and `aria-keyshortcuts` say the shortcut. It matches the key position, so it works on Thai and other layouts; in a text field on macOS, where Option+T types "†", it is left to the field.
+- **Focus comes back**: when a toast holding focus closes (its action ran, Escape, the close button), focus returns to where it was before — the element Alt+T was pressed on, else the one focused when the toast appeared — instead of falling to `<body>`.
+- **Touch**: toast actions get a 44px hit area on coarse pointers, as IconButton does (links in the text get a little padding; a 44px box would overlap the next line). Bottom toasters add the bottom safe-area inset too.
 ## 5.5 — DataTable is generic over its rows
 - The type of `rows` is the table's row type, and every `render`, `sortValue`, `getRowHref` and `onRowActivate` gets it — no annotations, and a typo inside a callback (`r.amuont`) or a callback written for another type is a compile error (column `key`s stay plain strings):
 ```tsx
-const columns: DataTableColumn<Order>[] = [{ key: 'amount', label: 'AMOUNT', align: 'end', render: (r) => baht(r.amount) }];
-<DataTable label="Orders" rows={orders} columns={columns} onRowActivate={setDetail} getRowHref={(r) => '/orders/' + r.id} />
+const columns: DataTableColumn<Order>[] = [
+  { key: 'amount', label: 'AMOUNT', align: 'end', render: (r) => baht(r.amount) },
+];
+<DataTable
+  label="Orders"
+  rows={orders}
+  columns={columns}
+  onRowActivate={setDetail}
+  getRowHref={(r) => '/orders/' + r.id}
+/>;
 ```
 - `DataTableColumn<Row>` types a column list declared on its own; `<DataTable<Order> …>` names the type explicitly. `rows={[]}` (nothing loaded yet) keeps the untyped default, and so do `any[]`, `Record<string, any>[]` and anything reading `typeof DataTable` (`ComponentProps`, `memo`, wrappers).

package/dist/aura.bundle.js CHANGED Viewed

@@ -828,6 +828,8 @@ window.Aura = (() => {
     const pos = posState[0], setPos = posState[1];
     const items2 = props.items || [];
     const mounted = useMounted();
+    const headerId = uid();
+    const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
     useIsoLayoutEffect(
       function() {
@@ -845,7 +847,20 @@ window.Aura = (() => {
         const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
         setPos({ top, left, maxHeight });
       },
-      [props.anchor, mounted]
+      [props.anchor, mounted, hasHeader]
+    );
+    const hadHeader = React6.useRef(hasHeader);
+    React6.useEffect(
+      function() {
+        if (hadHeader.current === hasHeader) return;
+        hadHeader.current = hasHeader;
+        const a = document.activeElement;
+        if (own.current && (!a || a === document.body)) {
+          const first = own.current.querySelector('[role^="menuitem"]:not([disabled])');
+          if (first) first.focus();
+        }
+      },
+      [hasHeader]
     );
     React6.useEffect(
       function() {
@@ -871,22 +886,22 @@ window.Aura = (() => {
       [mounted]
     );
     function onKeyDown(e) {
-      const list = Array.prototype.slice.call(
+      const list2 = Array.prototype.slice.call(
         own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
       );
-      const i = list.indexOf(document.activeElement);
+      const i = list2.indexOf(document.activeElement);
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        list[(i + 1) % list.length].focus();
+        list2[(i + 1) % list2.length].focus();
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        list[(i - 1 + list.length) % list.length].focus();
+        list2[(i - 1 + list2.length) % list2.length].focus();
       } else if (e.key === "Home") {
         e.preventDefault();
-        list[0].focus();
+        list2[0].focus();
       } else if (e.key === "End") {
         e.preventDefault();
-        list[list.length - 1].focus();
+        list2[list2.length - 1].focus();
       } else if (e.key === " " && document.activeElement && document.activeElement.tagName === "A") {
         e.preventDefault();
         document.activeElement.click();
@@ -898,9 +913,9 @@ window.Aura = (() => {
       }
       e.stopPropagation();
     }
-    function groupItems(list) {
+    function groupItems(list2) {
       const out = [];
-      list.forEach(function(it, i) {
+      list2.forEach(function(it, i) {
         const g = it.type === "radio" && it.group ? it.group : null;
         const last = out[out.length - 1];
         if (last && last.group === g && g !== null) last.items.push({ it, i });
@@ -955,27 +970,28 @@ window.Aura = (() => {
         body
       );
     }
-    const el = /* @__PURE__ */ React6.createElement(
+    const style = {
+      top: pos ? pos.top : -9999,
+      left: pos ? pos.left : -9999,
+      maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+    };
+    const list = groupItems(items2).map(function(block, bi) {
+      const rendered = block.items.map(function(x) {
+        return renderItem(x.it, x.i);
+      });
+      return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
+    });
+    const el = hasHeader ? /* @__PURE__ */ React6.createElement("div", { ref: merged, className: "aura-menu has-header", onKeyDown, style }, /* @__PURE__ */ React6.createElement(
       "div",
       {
-        ref: merged,
-        role: "menu",
-        "aria-label": props.label,
-        className: "aura-menu",
-        onKeyDown,
-        style: {
-          top: pos ? pos.top : -9999,
-          left: pos ? pos.left : -9999,
-          maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+        className: "aura-menu__header",
+        id: headerId,
+        onMouseDown: function(e) {
+          e.preventDefault();
         }
       },
-      groupItems(items2).map(function(block, bi) {
-        const rendered = block.items.map(function(x) {
-          return renderItem(x.it, x.i);
-        });
-        return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
-      })
-    );
+      props.header
+    ), /* @__PURE__ */ React6.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React6.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
     return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
   });
@@ -1015,6 +1031,7 @@ window.Aura = (() => {
         label: props.label,
         items: props.items,
         linkComponent: props.linkComponent,
+        header: props.header,
         onClose: function(restore) {
           setAnchor(null);
           if (restore && typeof anchor.focus === "function") anchor.focus();
@@ -3079,10 +3096,35 @@ window.Aura = (() => {
     promote();
     emitToasts();
   };
+  var hotkeyOrigin = /* @__PURE__ */ new WeakMap();
+  function outsideToaster(el) {
+    return el && el !== document.body && !el.closest(".aura-toaster") ? el : null;
+  }
   function ToastItem(props) {
     const str = useStrings();
+    const Link = useLinkComponent();
+    const node = React19.useRef(null);
+    const origin = React19.useRef(null);
+    useIsoLayoutEffect(function() {
+      origin.current = outsideToaster(document.activeElement);
+      const el = node.current;
+      return function() {
+        if (!el || !el.contains(document.activeElement)) return;
+        const back = [hotkeyOrigin.get(el), origin.current].filter(function(b) {
+          return !!b && b.isConnected;
+        })[0];
+        hotkeyOrigin.delete(el);
+        setTimeout(function() {
+          if (back && back.isConnected && (!document.activeElement || document.activeElement === document.body))
+            back.focus();
+        }, 0);
+      };
+    }, []);
     const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
-    const hover = React19.useRef(false);
+    const hover = React19.useRef(false), focused = React19.useRef(false);
+    function syncFocus() {
+      if (focused.current && !(node.current && node.current.contains(document.activeElement))) focused.current = false;
+    }
     function start() {
       if (left.current === Infinity || timer.current) return;
       since.current = Date.now();
@@ -3091,11 +3133,10 @@ window.Aura = (() => {
       }, left.current);
     }
     function resume() {
-      hover.current = false;
-      start();
+      syncFocus();
+      if (!hover.current && !focused.current) start();
     }
     function pause() {
-      hover.current = true;
       if (timer.current) {
         clearTimeout(timer.current);
         timer.current = null;
@@ -3107,23 +3148,56 @@ window.Aura = (() => {
         if (timer.current) clearTimeout(timer.current);
         timer.current = null;
         left.current = t.duration || 5e3;
-        if (!hover.current) start();
+        syncFocus();
+        if (!hover.current && !focused.current) start();
         return function() {
           if (timer.current) clearTimeout(timer.current);
         };
       },
       [t.rev]
     );
+    const rich = t.description != null && typeof t.description !== "boolean" && t.description !== "";
+    const actions = (t.actions && t.actions.length ? t.actions : t.action ? [t.action] : []).slice(0, 2);
+    function run(a) {
+      if (a.onClick) a.onClick();
+      if (a.dismiss !== false) toast.dismiss(t.id);
+    }
     return /* @__PURE__ */ React19.createElement(
       "div",
       {
-        className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
+        ref: node,
+        onKeyDown: function(e) {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            toast.dismiss(t.id);
+          }
+        },
+        className: cx(
+          "aura-toast",
+          "aura-toast--" + t.tone,
+          t.loading && "is-loading",
+          /* Two actions, or one beside a description, go on their own row under the text so it keeps its width. */
+          (actions.length > 1 || actions.length && rich) && "has-action-row"
+        ),
         role: t.tone === "danger" ? "alert" : "status",
         "aria-busy": t.loading || void 0,
-        onMouseEnter: pause,
-        onMouseLeave: resume,
-        onFocus: pause,
-        onBlur: resume
+        onMouseEnter: function() {
+          hover.current = true;
+          pause();
+        },
+        onMouseLeave: function() {
+          hover.current = false;
+          resume();
+        },
+        onFocus: function() {
+          focused.current = true;
+          pause();
+        },
+        onBlur: function(e) {
+          if (node.current && e.relatedTarget && node.current.contains(e.relatedTarget)) return;
+          focused.current = false;
+          resume();
+        }
       },
       /* @__PURE__ */ React19.createElement(
         Icon,
@@ -3132,19 +3206,33 @@ window.Aura = (() => {
           className: cx("aura-toast__icon", t.loading && "aura-spin")
         }
       ),
-      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-      t.action ? /* @__PURE__ */ React19.createElement(
-        "button",
-        {
-          type: "button",
-          className: "aura-toast__action",
-          onClick: function() {
-            t.action.onClick && t.action.onClick();
-            toast.dismiss(t.id);
-          }
-        },
-        t.action.label
-      ) : null,
+      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), rich ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__text" }, t.description) : null),
+      actions.length ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__actions" }, actions.map(function(a, i) {
+        return a.href ? /* @__PURE__ */ React19.createElement(
+          Link,
+          {
+            key: i,
+            href: a.href,
+            className: "aura-toast__action",
+            onClick: function(e) {
+              if (plainClick(e)) run(a);
+              else if (a.onClick) a.onClick();
+            }
+          },
+          a.label
+        ) : /* @__PURE__ */ React19.createElement(
+          "button",
+          {
+            key: i,
+            type: "button",
+            className: "aura-toast__action",
+            onClick: function() {
+              run(a);
+            }
+          },
+          a.label
+        );
+      })) : null,
       /* @__PURE__ */ React19.createElement(
         IconButton,
         {
@@ -3158,7 +3246,22 @@ window.Aura = (() => {
       )
     );
   }
-  function Toaster(props) {
+  function hotkeyMatcher(spec) {
+    const parts = spec.split("+").map(function(p) {
+      return p.trim().toLowerCase();
+    });
+    const key = parts[parts.length - 1] || "";
+    const code = /^[a-z]$/.test(key) ? "Key" + key.toUpperCase() : /^[0-9]$/.test(key) ? "Digit" + key : null;
+    const want = function(m) {
+      return parts.indexOf(m) >= 0 && parts.indexOf(m) < parts.length - 1;
+    };
+    return function(e) {
+      if (e.altKey !== want("alt") || e.ctrlKey !== want("ctrl") || e.shiftKey !== want("shift") || e.metaKey !== (want("meta") || want("cmd")))
+        return false;
+      return code ? e.code === code : e.key.toLowerCase() === key;
+    };
+  }
+  function Toaster(props = {}) {
     const t = useStrings();
     const mounted = useMounted();
     const s = React19.useState(toastState.list);
@@ -3171,15 +3274,49 @@ window.Aura = (() => {
         });
       };
     }, []);
+    const region = React19.useRef(null);
+    const hotkey = props.hotkey === void 0 ? "Alt+T" : props.hotkey;
+    React19.useEffect(
+      function() {
+        if (!hotkey) return;
+        const match = hotkeyMatcher(hotkey);
+        function onKey(e) {
+          if (!e.key || e.repeat || e.isComposing || !match(e) || !region.current) return;
+          const el = e.target;
+          const editable = !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName || ""));
+          const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+          if (editable && mac && e.altKey && !e.ctrlKey && !e.metaKey && e.key.length === 1) return;
+          const items2 = region.current.querySelectorAll(".aura-toast");
+          const last = items2[items2.length - 1];
+          if (!last) return;
+          const target = last.querySelector(".aura-toast__action") || last.querySelector("button");
+          if (!target) return;
+          e.preventDefault();
+          const from = outsideToaster(document.activeElement);
+          if (from) hotkeyOrigin.set(last, from);
+          target.focus();
+        }
+        document.addEventListener("keydown", onKey);
+        return function() {
+          document.removeEventListener("keydown", onKey);
+        };
+      },
+      [hotkey]
+    );
     if (!mounted) return null;
+    const pos = props.position || "bottom";
+    const offset = props.offset;
     return (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ React19.createElement(
         "div",
         {
-          className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+          ref: region,
+          className: cx("aura-toaster", pos.indexOf("top") === 0 && "is-top", /center$/.test(pos) && "is-center"),
+          style: offset != null ? { "--aura-toaster-offset": typeof offset === "number" ? offset + "px" : offset } : void 0,
           role: "region",
           "aria-live": "polite",
-          "aria-label": t.notifications
+          "aria-label": hotkey ? t.notifications + " (" + hotkey + ")" : t.notifications,
+          "aria-keyshortcuts": hotkey || void 0
         },
         s[0].map(function(t2) {
           return /* @__PURE__ */ React19.createElement(ToastItem, { key: t2.id, toast: t2 });
@@ -3894,6 +4031,7 @@ window.Aura = (() => {
     function close() {
       if (props.dismissible !== false && props.onClose) props.onClose();
     }
+    const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
     const modal = useModal(props.open, own, {
       autoFocus: props.autoFocus,
       onEscape: close,
@@ -3902,7 +4040,17 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: scrimCloses ? close : void 0,
+          onMouseDown: scrimCloses ? void 0 : function(e) {
+            e.preventDefault();
+          },
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -3936,8 +4084,19 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     const side = props.side === "left" ? "left" : "right";
+    const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: drawerScrimCloses ? close : void 0,
+          onMouseDown: !drawerScrimCloses ? function(e) {
+            e.preventDefault();
+          } : void 0,
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -4007,7 +4166,27 @@ window.Aura = (() => {
     );
     const sort = sortState[0], setSort = sortState[1];
     const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
-    const selected = selState[0], setSelected = selState[1];
+    const canSelect = function(r) {
+      return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
+    };
+    const rejected = {};
+    if (props.isRowSelectable)
+      rows.forEach(function(r) {
+        if (!canSelect(r)) rejected[String(r[rowKey])] = true;
+      });
+    const selected = selState[0].filter(function(k) {
+      return !rejected[String(k)];
+    }), setSelected = selState[1];
+    const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
+      return rejected[String(k)];
+    }).join("\0") + "#" + selected.join("\0");
+    React28.useEffect(
+      function() {
+        if (droppedSig !== "") setSelected(selected);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [droppedSig]
+    );
     const pageState = useMaybeControlled(
       props.page,
       props.defaultPage || 1,
@@ -4418,7 +4597,7 @@ window.Aura = (() => {
         el.focus();
       }
     }
-    const pageKeys = pageRows.map(function(r) {
+    const pageKeys = pageRows.filter(canSelect).map(function(r) {
       return r[rowKey];
     });
     const selSet = {};
@@ -4682,10 +4861,12 @@ window.Aura = (() => {
         if (inner) inner.focus();
         else handled = false;
       } else if (k === " " || k === "Enter") {
-        if (r === 0 && !col && selectable && nRows) toggleAll();
-        else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
-        else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
-        else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
+        if (r === 0 && !col && selectable && nRows) {
+          if (pageKeys.length) toggleAll();
+        } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
+        else if (r > 0 && k === " " && selectable) {
+          if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
           followRow(target.closest('[role="row"]'), e);
         else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
           target.querySelector("button, a[href], input, select, textarea").focus();
@@ -4714,7 +4895,7 @@ window.Aura = (() => {
               activeState[1]({ r: 0, c: 0 });
             }
           },
-          nRows ? /* @__PURE__ */ React28.createElement(
+          pageKeys.length ? /* @__PURE__ */ React28.createElement(
             Checkbox,
             {
               hideLabel: true,
@@ -4725,7 +4906,7 @@ window.Aura = (() => {
               onChange: toggleAll
             }
           ) : null,
-          nRows ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
+          pageKeys.length ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
         )
       );
     vis.forEach(function(c, i) {
@@ -4863,12 +5044,12 @@ window.Aura = (() => {
               className: cx("aura-table__sel", nPinned && "is-pinned"),
               tabIndex: tabFor(ri, 0),
               "data-rc": ri + ":0",
-              "aria-label": t.selectRow(k),
+              "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
               onFocus: function(e) {
                 if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
               }
             },
-            /* @__PURE__ */ React28.createElement(
+            canSelect(r) ? /* @__PURE__ */ React28.createElement(
               Checkbox,
               {
                 hideLabel: true,
@@ -4879,7 +5060,7 @@ window.Aura = (() => {
                   toggle(k, on);
                 }
               }
-            )
+            ) : null
           )
         );
       vis.forEach(function(c, j) {
@@ -4982,7 +5163,7 @@ window.Aura = (() => {
                 key: k,
                 role: "row",
                 "aria-rowindex": first + i + 2,
-                "aria-selected": selectable ? isSel : void 0,
+                "aria-selected": selectable && canSelect(r) ? isSel : void 0,
                 className: cx(
                   "aura-table__row",
                   isSel && "is-selected",
@@ -5584,7 +5765,10 @@ window.Aura = (() => {
     const items2 = props.items || [];
     return /* @__PURE__ */ React32.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React32.createElement("ol", null, items2.map(function(it, i) {
       const last = i === items2.length - 1;
-      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
+        /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
+        /* @__PURE__ */ React32.createElement("span", { className: "aura-crumbs__text" }, it.label)
+      ), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
     })));
   });
@@ -5779,7 +5963,7 @@ window.Aura = (() => {
         },
         "aria-expanded": open
       }
-    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
+    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
   });
   // src/ActionBar.tsx
@@ -5934,8 +6118,11 @@ window.Aura = (() => {
       /* @__PURE__ */ React42.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
         const on = active === it.id;
         const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
+        const suffix = count || it.badge && it.badgeLabel ? " (" + (count || it.badgeLabel) + ")" : "";
         const common = {
           className: cx("aura-bottomnav__item", on && "is-active"),
+          /* 5.7: a full name when the label is shortened; the count / badge words still follow. */
+          "aria-label": it.ariaLabel ? it.ariaLabel + suffix : void 0,
           "aria-current": on ? "page" : void 0,
           onClick: function(e) {
             if (!it.href) e.preventDefault();
@@ -5946,7 +6133,7 @@ window.Aura = (() => {
         const inner = [
           /* @__PURE__ */ React42.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React42.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
           /* @__PURE__ */ React42.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
-          count || it.badge && it.badgeLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
+          suffix && !it.ariaLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, suffix) : null
         ];
         return /* @__PURE__ */ React42.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React42.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React42.createElement("button", { type: "button", ...common }, inner));
       }))