@truedat/core 8.14.1 → 8.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.14.1",
+  "version": "8.14.2",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.1",
+    "@truedat/test": "8.14.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "391e4e51eebb33b37b9676e541cda5f6f262e5e7"
+  "gitHead": "3814d239579315d817ba0e3467771e6a128e5788"
 }

package/src/components/TrueModal.js

@@ -1,4 +1,4 @@
-import { useId } from "react";
+import { useCallback, useId, useRef } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Button, Icon, Modal } from "semantic-ui-react";
@@ -26,9 +26,44 @@ export const TrueModal = ({
   onCancel,
   onCreate,
   className,
+  closeDisabled = false,
   ...modalProps
 }) => {
   const titleId = useId();
+  const headingRef = useRef(null);
+  const setHeading = useCallback((node) => {
+    headingRef.current = node;
+    if (!node) return undefined;
+    const frame = requestAnimationFrame(() => {
+      node.closest(".ui.modal")?.querySelector(".true-modal-close")?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const handleKeyDown = (event) => {
+    modalProps.onKeyDown?.(event);
+    if (event.key !== "Tab" || event.defaultPrevented) return;
+    const dialog = headingRef.current?.closest(".ui.modal");
+    const controls = Array.from(
+      dialog?.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex="0"]',
+      ) || [],
+    ).filter(
+      (node) =>
+        node.getClientRects().length &&
+        !node.closest("[aria-disabled=true], fieldset[disabled]"),
+    );
+    const first = controls[0];
+    const last = controls[controls.length - 1];
+    if (
+      first &&
+      (!dialog.contains(document.activeElement) ||
+        (event.shiftKey && document.activeElement === first) ||
+        (!event.shiftKey && document.activeElement === last))
+    ) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+    }
+  };
   const { formatMessage } = useIntl();
   const defaultActions = _.compact([
     onCancel && {
@@ -50,6 +85,7 @@ export const TrueModal = ({
     <Modal
       {..._.omit(["header", "content", "closeIcon"])(modalProps)}
       className={_.compact(["true-modal", className]).join(" ")}
+      onKeyDown={handleKeyDown}
       role="dialog"
       aria-labelledby={
         modalProps["aria-labelledby"] ||
@@ -58,6 +94,7 @@ export const TrueModal = ({
       closeIcon={
         <button
           type="button"
+          disabled={closeDisabled}
           className="true-modal-close"
           style={{ color: headerTextColor }}
           aria-label={formatMessage({
@@ -71,7 +108,7 @@ export const TrueModal = ({
     >
       <Modal.Header style={{ background: headerColor, color: headerTextColor }}>
         {icon ? <Icon name={icon} size="large" /> : null}
-        <div className="true-modal-heading">
+        <div ref={setHeading} className="true-modal-heading">
           <span id={titleId}>{title}</span>
           {subtitle != null ? (
             <p className="true-modal-subtitle">{subtitle}</p>
@@ -132,6 +169,7 @@ TrueModal.propTypes = {
   onCancel: PropTypes.func,
   onCreate: PropTypes.func,
   className: PropTypes.string,
+  closeDisabled: PropTypes.bool,
 };
 
 export default TrueModal;

package/src/components/__tests__/TrueModal.spec.js

@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { act, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { TrueModal } from "../index";
@@ -190,4 +190,27 @@ describe("<TrueModal />", () => {
     rerender(<TrueModal open={false} title="Title" />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
+  it("focuses the dialog and wraps keyboard focus within its controls", async () => {
+    const rects = jest
+      .spyOn(HTMLElement.prototype, "getClientRects")
+      .mockReturnValue([{}]);
+    renderModal({
+      children: <input aria-label="Name" />,
+      actions: [{ key: "save", content: "Save" }],
+    });
+    act(() => jest.advanceTimersByTime(20));
+    const close = screen.getByRole("button", { name: "Close" });
+    await waitFor(() => expect(close).toHaveFocus());
+    const user = setupUser();
+    await user.tab({ shift: true });
+    expect(screen.getByRole("button", { name: "Save" })).toHaveFocus();
+    await user.tab();
+    expect(close).toHaveFocus();
+    rects.mockRestore();
+  });
+
+  it("exposes disabled semantics on the close control while an operation is pending", () => {
+    renderModal({ closeDisabled: true });
+    expect(screen.getByRole("button", { name: "Close" })).toBeDisabled();
+  });
 });