@jobber/components 6.97.1 → 6.98.0

package/dist/Modal/Modal.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ModalLegacyProps } from "./Modal.types";
-export declare function ModalLegacy({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalLegacyProps): React.JSX.Element;
+export declare function ModalLegacy({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }: ModalLegacyProps): React.JSX.Element;

package/dist/Modal/Modal.types.d.ts

@@ -1,30 +1,8 @@
 import type { MutableRefObject, PropsWithChildren, ReactNode } from "react";
-import type React from "react";
 import type { ExtendedRefs, FloatingContext, ReferenceType, UseInteractionsReturn } from "@floating-ui/react";
 import type { XOR } from "ts-xor";
 import type sizes from "./ModalSizes.module.css";
 import type { ButtonProps } from "../Button";
-export interface ModalProviderProps {
-    readonly children: React.ReactNode;
-    /**
-     * Size of the modal.
-     */
-    readonly size?: keyof typeof sizes;
-    /**
-     * Whether the modal is open.
-     */
-    readonly open?: boolean;
-    /**
-     * Callback executed when the user wants to close/dismiss the Modal
-     */
-    readonly onRequestClose?: () => void;
-    /**
-     * Ref to specify the activator element. Useful if the activator can unmount
-     * and focus needs to be returned to the activator element.
-     */
-    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
-    readonly dismissible?: boolean;
-}
 export type ModalContentProps = PropsWithChildren;
 export type ModalOverlayProps = PropsWithChildren;
 export interface ModalContextType {
@@ -66,6 +44,11 @@ export interface ModalContextType {
      * @default "ATL-Modal-Header"
      */
     readonly modalLabelledBy?: string;
+    /**
+     * Accessible name for the Modal.
+     * Intended for use when no Header/Title content is provided, as the Heading/title takes precedence over ariaLabel.
+     */
+    readonly ariaLabel?: string;
     /**
      * Floating-ui props to position the modal.
      */
@@ -119,5 +102,10 @@ export interface ModalLegacyProps {
     readonly tertiaryAction?: ButtonProps;
     onRequestClose?(): void;
     readonly version?: 1;
+    /**
+     * Accessible name for the Modal.
+     * Only required if no title is provided. Title takes precedence over ariaLabel.
+     */
+    readonly ariaLabel?: string;
 }
 export {};

package/dist/Modal/ModalContext.rebuilt.d.ts

@@ -11,6 +11,7 @@ export interface ModalProviderProps {
     readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
     readonly dismissible?: boolean;
     readonly modalLabelledBy?: string;
+    readonly ariaLabel?: string;
 }
-export declare function ModalProvider({ children, open, size, onRequestClose, activatorRef: refProp, dismissible, modalLabelledBy, }: ModalProviderProps): React.JSX.Element;
+export declare function ModalProvider({ children, open, size, onRequestClose, activatorRef: refProp, dismissible, modalLabelledBy, ariaLabel, }: ModalProviderProps): React.JSX.Element;
 export declare function useModalContext(): ModalContextType;

package/dist/Modal/constants.d.ts

@@ -0,0 +1 @@
+export declare const MODAL_HEADER_ID: "ATL-Modal-Header";

package/dist/Modal/index.cjs

@@ -32,12 +32,14 @@ var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMP
 
 var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
 
-function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
+const MODAL_HEADER_ID = "ATL-Modal-Header";
+
+function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     jobberHooks.useRefocusOnActivator(open);
     const modalRef = jobberHooks.useFocusTrap(open);
     jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
-    const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
+    const template = (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
         React.createElement(framerMotion.motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React.createElement(framerMotion.motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                 duration: 0.2,
@@ -57,7 +59,7 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
 }
 function Header({ title, dismissible, onRequestClose }) {
     return (React.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
-        React.createElement(Heading.Heading, { level: 2 }, title),
+        React.createElement(Heading.Heading, { level: 2, id: MODAL_HEADER_ID }, title),
         dismissible && (React.createElement("div", { className: styles$1.closeButton },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
 }
@@ -120,7 +122,7 @@ const ModalContext = React.createContext({
     dismissible: true,
     getFloatingProps: identity.identity,
 });
-function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
+function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
@@ -136,6 +138,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop.noo
             floatingNodeId: nodeId,
             dismissible,
             modalLabelledBy,
+            ariaLabel,
             getFloatingProps,
         } }, children));
     if (parentId) {
@@ -168,8 +171,8 @@ function ModalHeader({ title, children }) {
     if (children) {
         return React.createElement(React.Fragment, null, children);
     }
-    return (React.createElement("div", { className: header, "data-testid": "ATL-Modal-Header", id: modalLabelledBy },
-        React.createElement(Heading.Heading, { level: 2 }, title),
+    return (React.createElement("div", { className: header, "data-testid": MODAL_HEADER_ID },
+        React.createElement(Heading.Heading, { level: 2, id: modalLabelledBy }, title),
         dismissible && (React.createElement("div", { className: dismissButton },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
 }
@@ -198,7 +201,7 @@ function ModalOverlay({ children }) {
         children));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, } = useModalContext();
     const { modal } = useModalStyles(size);
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
@@ -213,6 +216,8 @@ function ModalContent({ children }) {
                                 role: "dialog",
                                 className: modal,
                                 "aria-labelledby": modalLabelledBy,
+                                "aria-label": ariaLabel,
+                                "aria-modal": true,
                             })), children))))))))));
 }
 

package/dist/Modal/index.mjs

@@ -30,12 +30,14 @@ var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMP
 
 var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
 
-function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
+const MODAL_HEADER_ID = "ATL-Modal-Header";
+
+function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     useRefocusOnActivator(open);
     const modalRef = useFocusTrap(open);
     useOnKeyDown(handleRequestClose, "Escape");
-    const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
+    const template = (React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0, "aria-modal": "true", "aria-labelledby": title ? MODAL_HEADER_ID : undefined, "aria-label": ariaLabel },
         React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                 duration: 0.2,
@@ -55,7 +57,7 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
 }
 function Header({ title, dismissible, onRequestClose }) {
     return (React__default.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
-        React__default.createElement(Heading, { level: 2 }, title),
+        React__default.createElement(Heading, { level: 2, id: MODAL_HEADER_ID }, title),
         dismissible && (React__default.createElement("div", { className: styles$1.closeButton },
             React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
 }
@@ -118,7 +120,7 @@ const ModalContext = createContext({
     dismissible: true,
     getFloatingProps: identity,
 });
-function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
+function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
@@ -134,6 +136,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop, ac
             floatingNodeId: nodeId,
             dismissible,
             modalLabelledBy,
+            ariaLabel,
             getFloatingProps,
         } }, children));
     if (parentId) {
@@ -166,8 +169,8 @@ function ModalHeader({ title, children }) {
     if (children) {
         return React__default.createElement(React__default.Fragment, null, children);
     }
-    return (React__default.createElement("div", { className: header, "data-testid": "ATL-Modal-Header", id: modalLabelledBy },
-        React__default.createElement(Heading, { level: 2 }, title),
+    return (React__default.createElement("div", { className: header, "data-testid": MODAL_HEADER_ID },
+        React__default.createElement(Heading, { level: 2, id: modalLabelledBy }, title),
         dismissible && (React__default.createElement("div", { className: dismissButton },
             React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
 }
@@ -196,7 +199,7 @@ function ModalOverlay({ children }) {
         children));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, } = useModalContext();
     const { modal } = useModalStyles(size);
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
@@ -211,6 +214,8 @@ function ModalContent({ children }) {
                                 role: "dialog",
                                 className: modal,
                                 "aria-labelledby": modalLabelledBy,
+                                "aria-label": ariaLabel,
+                                "aria-modal": true,
                             })), children))))))))));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.97.1",
+  "version": "6.98.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "7ad3ab047c32d137b34e2b9d8c067b16f9d46a49"
+  "gitHead": "2a10b70a25ca29414cfddfa2daf3fc980e976efc"
 }