@apliteni/apliteni-ui 0.25.2 → 0.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.25.2",
+  "version": "0.25.3",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -31,6 +31,14 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 
 Components: `DataTable`, `Modal`, `Button`, `Badge`, `Card`, `Icon`.
 
+## What the Modal does with focus
+
+Opening moves focus to the first eligible control in the body, in DOM order, or to
+the dialog itself if none exists. Links and disclosure summaries are eligible; hidden
+controls, disabled controls, controls inside a closed disclosure and elements with a
+negative tabindex are skipped. Tab and Shift+Tab wrap at the ends of the same list.
+Escape and a click on the scrim dismiss the dialog and return focus to its opener.
+
 ## Work on them
 
 From the repo root — one `npm install` covers the workspace:

package/react/dist/index.js

@@ -84,7 +84,25 @@ function Card({ title, sub, children }) {
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
+function tabbable(el) {
+  const tabindex = el.getAttribute("tabindex");
+  if (tabindex !== null && Number(tabindex) < 0) return false;
+  if (el.matches(":disabled")) return false;
+  for (let node = el; node; node = node.parentElement) {
+    if (node.inert || node.hasAttribute("inert") || node.hasAttribute("hidden")) return false;
+    const holder = node.parentElement;
+    const folded = holder?.tagName === "DETAILS" && !holder.open;
+    if (folded && node !== holder.querySelector(":scope > summary")) return false;
+  }
+  return typeof el.checkVisibility !== "function" || el.checkVisibility({ visibilityProperty: true });
+}
+var tabbablesIn = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(tabbable);
+var dismissOnScrim = (onClose) => (e) => {
+  if (e.target !== e.currentTarget) return;
+  e.preventDefault();
+  onClose();
+};
 function Modal({ open, title, onClose, footer, children }) {
   const panel = useRef(null);
   useEffect(() => {
@@ -95,7 +113,7 @@ function Modal({ open, title, onClose, footer, children }) {
         return;
       }
       if (e.key !== "Tab" || !panel.current) return;
-      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      const items = tabbablesIn(panel.current);
       if (items.length === 0) {
         e.preventDefault();
         panel.current.focus();
@@ -112,7 +130,7 @@ function Modal({ open, title, onClose, footer, children }) {
       if (!e.shiftKey && active === last) {
         e.preventDefault();
         first.focus();
-      } else if (e.shiftKey && active === first) {
+      } else if (e.shiftKey && (active === first || active === panel.current)) {
         e.preventDefault();
         last.focus();
       }
@@ -133,16 +151,13 @@ function Modal({ open, title, onClose, footer, children }) {
   }, [open]);
   useEffect(() => {
     if (!open) return;
-    const target = panel.current?.querySelector(
-      ".rx-modal__body input, .rx-modal__body select, .rx-modal__body textarea, .rx-modal__body button"
-    ) || panel.current;
+    const body = panel.current?.querySelector(".rx-modal__body");
+    const target = (body ? tabbablesIn(body) : [])[0] || panel.current;
     target?.focus();
   }, [open]);
   if (!open) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: (e) => {
-      if (e.target === e.currentTarget) onClose();
-    }, children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
         /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
         /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })