@kaizen/components 1.42.7 → 1.44.0

package/dist/types/LikertScaleLegacy/LikertScaleLegacy.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Scale, ScaleItem } from "./types";
+import { Scale, ScaleItem, ColorSchema } from "./types";
 export type LikertScaleProps = {
     labelId: string;
     scale: Scale;
@@ -10,6 +10,7 @@ export type LikertScaleProps = {
     automationId?: string;
     "data-testid"?: string;
     reversed?: boolean;
+    colorSchema?: ColorSchema | "classical";
     validationMessage?: string;
     status?: "default" | "error";
     onSelect: (value: ScaleItem | null) => void;
@@ -18,4 +19,4 @@ export type LikertScaleProps = {
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */
-export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, }: LikertScaleProps) => JSX.Element;
+export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, colorSchema, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, }: LikertScaleProps) => JSX.Element;

package/dist/types/LikertScaleLegacy/types.d.ts

@@ -3,4 +3,5 @@ export type ScaleItem = {
     value: ScaleValue;
     label: string;
 };
+export type ColorSchema = "classical" | "blue";
 export type Scale = ScaleItem[];

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

@@ -13,6 +13,9 @@ export type ConfirmationModalProps = {
     title: string;
     onConfirm?: () => void;
     onDismiss: () => void;
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void;
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
     confirmLabel?: string;
     dismissLabel?: string;
@@ -32,7 +35,7 @@ type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
  */
 export declare const ConfirmationModal: {
-    ({ isOpen, isProminent, unpadded, mood, title, onConfirm, onAfterLeave, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
+    ({ isOpen, isProminent, unpadded, mood, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -16,6 +16,9 @@ export type ContextModalProps = Readonly<{
     title: string;
     onConfirm?: () => void;
     onDismiss: () => void;
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void;
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
     confirmLabel?: string;
     confirmWorking?: {
@@ -36,6 +39,6 @@ export type ContextModalProps = Readonly<{
  * {@link https://cultureamp.design/?path=/docs/components-modals--contextmodal--docs Storybook}
  */
 export declare const ContextModal: {
-    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, ...props }: ContextModalProps): JSX.Element;
+    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, onAfterEnter, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, ...props }: ContextModalProps): JSX.Element;
     displayName: string;
 };

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

@@ -6,9 +6,12 @@ export type GenericModalProps = {
     focusLockDisabled?: boolean;
     onEscapeKeyup?: (event: KeyboardEvent) => void;
     onOutsideModalClick?: (event: React.MouseEvent) => void;
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void;
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
 };
 export declare const GenericModal: {
-    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterLeave: propsOnAfterLeave, }: GenericModalProps): JSX.Element;
+    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterEnter, onAfterLeave: propsOnAfterLeave, }: GenericModalProps): JSX.Element;
     displayName: string;
 };

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

@@ -7,6 +7,9 @@ export type InputEditModalProps = {
     onSubmit: () => void;
     onSecondaryAction?: () => void;
     onDismiss: () => void;
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void;
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
     localeDirection?: "rtl" | "ltr";
     submitLabel?: string;
@@ -27,6 +30,6 @@ export type InputEditModalProps = {
  * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}
  */
 export declare const InputEditModal: {
-    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, localeDirection, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, ...props }: InputEditModalProps): JSX.Element;
+    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, localeDirection, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, onAfterEnter, ...props }: InputEditModalProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.42.7",
+  "version": "1.44.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -108,8 +108,8 @@
     "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7",
-    "@kaizen/design-tokens": "10.3.20",
-    "@kaizen/tailwind": "1.2.6"
+    "@kaizen/tailwind": "1.2.6",
+    "@kaizen/design-tokens": "10.3.20"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.5",

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -23,11 +23,17 @@ $block-height: 35px;
 $desktop-rater-width: 220px;
 $desktop-rater-height: 63px;
 
-$first: $color-yellow-300;
-$second: $color-yellow-400;
-$third: $color-orange-400;
-$fourth: $color-orange-500;
-$fifth: $color-red-500;
+$classical-first: $color-yellow-300;
+$classical-second: $color-yellow-400;
+$classical-third: $color-orange-400;
+$classical-fourth: $color-orange-500;
+$classical-fifth: $color-red-500;
+
+$blue-first: $color-blue-100;
+$blue-second: $color-blue-200;
+$blue-third: $color-blue-300;
+$blue-fourth: $color-blue-400;
+$blue-fifth: $color-blue-500;
 
 @mixin pop {
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
@@ -212,45 +218,88 @@ $fifth: $color-red-500;
     left: 100%;
   }
 
-  &.suggested,
-  &.selected {
+  &.suggested.classicalColorSchema,
+  &.selected.classicalColorSchema {
     .field1 {
-      background-color: $first;
+      background-color: $classical-first;
 
       &::after {
-        background-color: $first;
+        background-color: $classical-first;
       }
     }
 
     .field2 {
-      background-color: $second;
+      background-color: $classical-second;
 
       &::after {
-        background-color: $second;
+        background-color: $classical-second;
       }
     }
 
     .field3 {
-      background-color: $third;
+      background-color: $classical-third;
 
       &::after {
-        background-color: $third;
+        background-color: $classical-third;
       }
     }
 
     .field4 {
-      background-color: $fourth;
+      background-color: $classical-fourth;
 
       &::after {
-        background-color: $fourth;
+        background-color: $classical-fourth;
       }
     }
 
     .field5 {
-      background-color: $fifth;
+      background-color: $classical-fifth;
 
       &::after {
-        background-color: $fifth;
+        background-color: $classical-fifth;
+      }
+    }
+  }
+
+  &.suggested.blueColorSchema,
+  &.selected.blueColorSchema {
+    .field1 {
+      background-color: $blue-first;
+
+      &::after {
+        background-color: $blue-first;
+      }
+    }
+
+    .field2 {
+      background-color: $blue-second;
+
+      &::after {
+        background-color: $blue-second;
+      }
+    }
+
+    .field3 {
+      background-color: $blue-third;
+
+      &::after {
+        background-color: $blue-third;
+      }
+    }
+
+    .field4 {
+      background-color: $blue-fourth;
+
+      &::after {
+        background-color: $blue-fourth;
+      }
+    }
+
+    .field5 {
+      background-color: $blue-fifth;
+
+      &::after {
+        background-color: $blue-fifth;
       }
     }
   }

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
 import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { ScaleValue, Scale, ScaleItem } from "./types"
+import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
 
@@ -22,6 +22,7 @@ export type LikertScaleProps = {
   automationId?: string
   "data-testid"?: string
   reversed?: boolean
+  colorSchema?: ColorSchema | "classical"
   validationMessage?: string
   status?: "default" | "error"
   onSelect: (value: ScaleItem | null) => void
@@ -39,6 +40,7 @@ export const LikertScaleLegacy = ({
   scale,
   selectedItem,
   reversed,
+  colorSchema = "classical",
   "data-testid": dataTestId,
   onSelect,
   validationMessage,
@@ -156,6 +158,9 @@ export const LikertScaleLegacy = ({
             <div
               className={classnames(
                 styles.likertItem,
+                colorSchema == "blue"
+                  ? styles.blueColorSchema
+                  : styles.classicalColorSchema,
                 styles[`likertItem${item.value}`],
                 isSelected && styles.selected,
                 isSuggested && styles.suggested,

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx

@@ -43,7 +43,7 @@ const scale: Scale = [
 ]
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
+  render: ({ isReversed, colorSchema }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Not rated">
@@ -53,6 +53,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly disagree">
@@ -62,6 +63,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[1]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Disagree">
@@ -71,6 +73,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[2]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Neither agree or disagree">
@@ -80,6 +83,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[3]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Agree">
@@ -89,6 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[4]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly agree">
@@ -98,6 +103,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[5]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Validation">
@@ -107,6 +113,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
             validationMessage="Error message here"
             status="error"
           />
@@ -118,18 +125,33 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: "Sticker Sheet (Default - Classical)",
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
+export const StickerBlueSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
+  name: "Sticker Sheet (Blue)",
+  args: { colorSchema: "blue" },
+}
+
+export const StickerSheetClassicalReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Classical Reversed)",
   parameters: {
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
 }
 
+export const StickerSheetBlueReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Blue Reversed)",
+  parameters: {
+    backgrounds: { default: "Purple 700" },
+  },
+  args: { isReversed: true, colorSchema: "blue" },
+}
+
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",

package/src/LikertScaleLegacy/types.ts

@@ -5,4 +5,6 @@ export type ScaleItem = {
   label: string
 }
 
+export type ColorSchema = "classical" | "blue"
+
 export type Scale = ScaleItem[]

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -39,6 +39,9 @@ export type ConfirmationModalProps = {
   title: string
   onConfirm?: () => void
   onDismiss: () => void
+  /** A callback that is triggered after the modal is opened. */
+  onAfterEnter?: () => void
+  /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
   confirmLabel?: string
   dismissLabel?: string
@@ -99,6 +102,7 @@ export const ConfirmationModal = ({
   title,
   onConfirm,
   onAfterLeave,
+  onAfterEnter,
   confirmLabel = "Confirm",
   dismissLabel = "Cancel",
   confirmWorking,
@@ -134,6 +138,7 @@ export const ConfirmationModal = ({
       onEscapeKeyup={onDismiss}
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={onAfterEnter}
     >
       <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>

package/src/Modal/ContextModal/ContextModal.tsx

@@ -32,6 +32,9 @@ export type ContextModalProps = Readonly<
     title: string
     onConfirm?: () => void
     onDismiss: () => void
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void
     confirmLabel?: string
     confirmWorking?: { label: string; labelHidden?: boolean }
@@ -59,6 +62,7 @@ export const ContextModal = ({
   onConfirm,
   onDismiss: propsOnDismiss,
   onAfterLeave,
+  onAfterEnter,
   confirmLabel = "Confirm",
   confirmWorking,
   renderBackground,
@@ -100,6 +104,7 @@ export const ContextModal = ({
       onEscapeKeyup={onDismiss}
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={onAfterEnter}
     >
       <div className={styles.modal} data-modal {...props}>
         {renderBackground && renderBackground()}

package/src/Modal/GenericModal/GenericModal.tsx

@@ -13,6 +13,9 @@ export type GenericModalProps = {
   focusLockDisabled?: boolean
   onEscapeKeyup?: (event: KeyboardEvent) => void
   onOutsideModalClick?: (event: React.MouseEvent) => void
+  /** A callback that is triggered after the modal is opened. */
+  onAfterEnter?: () => void
+  /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
 }
 
@@ -23,6 +26,7 @@ export const GenericModal = ({
   focusLockDisabled,
   onEscapeKeyup,
   onOutsideModalClick,
+  onAfterEnter,
   onAfterLeave: propsOnAfterLeave,
 }: GenericModalProps): JSX.Element => {
   const reactId = useId()
@@ -50,18 +54,19 @@ export const GenericModal = ({
     }
   }
 
-  const focusAccessibleLabel = (): void => {
-    if (modalLayer) {
-      const labelElement: HTMLElement | null =
-        document.getElementById(labelledByID)
-      if (labelElement) {
-        labelElement.focus()
-      }
+  const focusOnAccessibleLabel = (): void => {
+    // Check if focus already exists within the modal
+    if (modalLayer?.contains(document.activeElement)) {
+      return
     }
+
+    const labelElement: HTMLElement | null =
+      document.getElementById(labelledByID)
+
+    labelElement?.focus()
   }
 
   const a11yWarn = (): void => {
-    if (!modalLayer) return
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -86,8 +91,11 @@ export const GenericModal = ({
 
   const onAfterEnterHandler = (): void => {
     scrollModalToTop()
-    focusAccessibleLabel()
-    a11yWarn()
+    if (modalLayer) {
+      onAfterEnter?.()
+      focusOnAccessibleLabel()
+      a11yWarn()
+    }
   }
 
   const onBeforeEnterHandler = (): void => {

package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx

@@ -0,0 +1,124 @@
+import React from "react"
+import { action } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, within, waitFor } from "@storybook/test"
+
+import {
+  GenericModal,
+  ModalAccessibleLabel,
+  ModalBody,
+  ModalHeader,
+} from "../index"
+
+const meta: Meta<typeof GenericModal> = {
+  title: "Components/Modals/Generic Modal/Tests",
+  component: GenericModal,
+}
+
+export default meta
+
+type Story = StoryObj<typeof GenericModal>
+
+export const TestBase: Story = {
+  render: ({ isOpen: propsIsOpen, ...args }) => {
+    const [isOpen, setIsOpen] = React.useState<boolean>(propsIsOpen)
+    const handleDismiss = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={() => setIsOpen(true)}
+        >
+          Open Modal
+        </button>
+        <GenericModal
+          {...args}
+          isOpen={isOpen}
+          onOutsideModalClick={handleDismiss}
+          onEscapeKeyup={handleDismiss}
+          id="GenericModalTestId"
+        >
+          <ModalHeader>
+            <ModalAccessibleLabel>Test Modal</ModalAccessibleLabel>
+          </ModalHeader>
+          <ModalBody>
+            <form>
+              <label htmlFor="modal-input-play-test">Add link</label>
+              <input type="text" id="modal-input-play-test" />
+            </form>
+          </ModalBody>
+        </GenericModal>
+      </>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const { getByRole } = within(canvasElement)
+
+    const openModalButton = getByRole("button", { name: "Open Modal" })
+
+    await step("Open modal", async () => {
+      await userEvent.click(openModalButton)
+    })
+
+    await step("Default focus is shifted to the Accessible title", async () => {
+      await waitFor(() => {
+        // document has to be use as Modal will append to document body
+        expect(document.activeElement).toHaveTextContent("Test Modal")
+      })
+    })
+  },
+}
+
+export const ModalAccessibleLabelRetainsFocus: Story = {
+  ...TestBase,
+  name: "ModalAccessibleLabel retains focus if onAfterEnter is called",
+  args: {
+    onAfterEnter: () => action("openCallBack"),
+  },
+  play: async ({ canvasElement, step }) => {
+    const { getByRole } = within(canvasElement)
+
+    const openModalButton = getByRole("button", { name: "Open Modal" })
+
+    await step("Open modal", async () => {
+      await userEvent.click(openModalButton)
+    })
+
+    await step("Accessible title still has focus", async () => {
+      await waitFor(() => {
+        expect(document.activeElement).toHaveTextContent("Test Modal")
+      })
+    })
+  },
+}
+
+export const TriggerOnAfterEnterFocus: Story = {
+  ...TestBase,
+  args: {
+    onAfterEnter: () =>
+      document.getElementById("modal-input-play-test")?.focus(),
+  },
+  name: "onAfterEnter can shift focus to internal elements of the modal",
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+    const openModalButton = canvas.getByRole("button", { name: "Open Modal" })
+
+    await step("Open modal", async () => {
+      await userEvent.click(openModalButton)
+    })
+
+    await step("Expect activeElement to be the Input", async () => {
+      await waitFor(() => {
+        expect(document.activeElement).toHaveAccessibleName("Add link")
+      })
+    })
+
+    await step("Expect to be able to type without shifting focus", async () => {
+      await userEvent.keyboard(
+        "All lorem and no ipsum make dolar a dull boy..."
+      )
+    })
+  },
+}

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -19,6 +19,9 @@ export type InputEditModalProps = {
   onSubmit: () => void
   onSecondaryAction?: () => void
   onDismiss: () => void
+  /** A callback that is triggered after the modal is opened. */
+  onAfterEnter?: () => void
+  /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
   localeDirection?: "rtl" | "ltr"
   submitLabel?: string
@@ -51,6 +54,7 @@ export const InputEditModal = ({
   children,
   unpadded = false,
   onDismiss: propsOnDismiss,
+  onAfterEnter,
   ...props
 }: InputEditModalProps): JSX.Element => {
   const onDismiss = submitWorking ? undefined : propsOnDismiss
@@ -79,6 +83,7 @@ export const InputEditModal = ({
       isOpen={isOpen}
       onEscapeKeyup={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={onAfterEnter}
     >
       <div className={styles.modal} dir={localeDirection} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>

package/src/Modal/InputEditModal/_docs/InputEditModal.mdx

@@ -39,3 +39,14 @@ When your modal is preforming a destructive action eg. delete customer data.
 ### Unpadded
 
 <Canvas of={InputEditModalStories.Unpadded} />
+
+## onAfterEnter and shifting focus
+
+It is an important accessibility consideration that any time we shift focus on the page, no important content is skipped that may provide context to assistive technologies. This is why the default behaviour for our modals is to shift focus to the accessible title.
+
+There are instances, such as single input modals, where shifting focus may not impact the users context. In these instances, we can leverage the `onAfterEnter` callback to shift focus to an input.
+
+<Canvas of={InputEditModalStories.OnAfterEnter} sourceState="shown" />
+
+As both the button and input label have clear intent and the focus does not skip past crucial content, this should provide enough context for an end user.
+