@kaizen/components 0.0.0-canary-split-purify-styles-step-20240502055001 → 0.0.0-canary-expose-ref-for-icon-button-20240506023922

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.
+

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useRef, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import isChromatic from "chromatic"
@@ -101,3 +101,65 @@ export const Unpadded: Story = {
   args: { unpadded: true },
   ...chromaticModalSettings,
 }
+
+export const OnAfterEnter: Story = {
+  ...chromaticModalSettings,
+  args: {
+    title: "Create new link",
+    submitLabel: "Add link",
+  },
+  render: args => {
+    const [isOpen, setIsOpen] = useState(IS_CHROMATIC)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const handleOpen = (): void => setIsOpen(true)
+    const handleClose = (): void => setIsOpen(false)
+
+    return (
+      <>
+        <button
+          type="button"
+          className="border border-gray-500"
+          onClick={handleOpen}
+        >
+          Create a link
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+          onAfterEnter={() => inputRef.current?.focus()}
+        >
+          <form>
+            <TextField inputRef={inputRef} labelText="Link URL" />
+          </form>
+        </InputEditModal>
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        // The label of the button and the input it is focused to may provide enough context.
+        <button
+          onClick={handleOpen}
+        >
+          Create a link
+        </button>
+        <InputEditModal
+          {...args}
+          isOpen={isOpen}
+          onSubmit={handleClose}
+          onDismiss={handleClose}
+          onAfterEnter={() => inputRef.current?.focus()}
+        >
+          <form>
+            <TextField inputRef={inputRef} labelText="Link URL" />
+          </form>
+        </InputEditModal>
+        `,
+      },
+    },
+  },
+}

package/src/Radio/Radio/Radio.module.scss

@@ -29,6 +29,14 @@ $dt-color-radio-border-color-focus-reversed: $color-blue-300;
   &.reversed {
     background: $color-white;
   }
+
+  @media (forced-colors: active) {
+    // High contrast mode with remove the background color so we have to use border to create the selected icon state.
+    // Transparent is used so the user defined colors for borders will be used here
+    border: $icon-offset solid transparent;
+    width: 0;
+    height: 0;
+  }
 }
 
 .box {

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx

@@ -44,6 +44,7 @@ export const LinkModal = ({
       onSubmit={handleSubmit}
       onDismiss={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={() => inputRef.current?.focus()}
     >
       <TextField
         id="href"

package/src/Tag/_docs/Tag.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls , Meta } from "@storybook/blocks"
+import { InlineNotification } from "~components/Notification"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TagStories from "./Tag.stories"
 
@@ -13,6 +14,12 @@ import * as TagStories from "./Tag.stories"
   className="!mb-8"
 />
 
+
+<InlineNotification type="cautionary" persistent>
+  {`This version of the Tag will soon be deprecated and will be removed in the next major release.
+  Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` }
+</InlineNotification>
+
 <KAIOInstallation exportNames="Tag" />
 
 ## Overview
@@ -59,7 +66,7 @@ An Avatar can be added in two ways, either by importing the `<Avatar />` compone
 <Canvas of={TagStories.ProfileWithAvatarProps} />
 
 ### Dismissable
-<Canvas of={TagStories.Dismissable} />
+<Canvas of={TagStories.Dismissible} />
 
 ### TruncateWidth
 A pixel width which sets a limit for when the text starts to truncate.

package/src/Tag/_docs/Tag.stories.tsx

@@ -137,7 +137,7 @@ export const ProfileWithAvatarProps: Story = {
   },
 }
 
-export const Dismissable: Story = {
+export const Dismissible: Story = {
   args: {
     dismissible: true,
     onDismiss: () => alert("Dismissed"),

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -550,6 +550,25 @@ $tab-container-height-medium-and-small-collapsed: 0;
     text-decoration: underline;
   }
 
+  &:focus {
+    outline: none;
+
+    &::after {
+      $focus-ring-offset: calc(
+        (-2 * #{$border-focus-ring-border-width}) - #{$border-focus-ring-border-width}
+      );
+
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-200;
+      border-radius: 50%;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      inset: $focus-ring-offset;
+    }
+  }
+
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
 

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { assetUrl } from "@kaizen/hosted-assets"
 import { AddIcon, StarOnIcon } from "~components/Icon"
+import { StickerSheet } from "~storybook/components/StickerSheet"
 import { NavigationTab, TitleBlockZen } from "../index"
 
 const SECONDARY_ACTIONS = [
@@ -97,76 +98,38 @@ export const Playground: Story = {
   },
 }
 
-// export const WithBadge: Story = {
-//   render: args => {
-//     const [badgeCount, setBadgeCount] = React.useState(1)
-//     return (
-//       <TitleBlockZen
-//         {...args}
-//         primaryAction={{
-//           label: "Click Me",
-//           icon: <ArrowForwardIcon role="presentation" />,
-//           iconPosition: "end",
-//           href: "#",
-//           onClick: () => setBadgeCount(b => b + 1),
-//           badge: {
-//             text: String(badgeCount),
-//             animateChange: true,
-//           },
-//         }}
-//         defaultAction={{
-//           label: "Default link",
-//           onClick: () => setBadgeCount(b => b + 1),
-//           href: "#",
-//         }}
-//       />
-//     )
-//   },
-// }
-
-// export const WithAvatarProps: Story = {
-//   args: {
-//     avatar: {
-//       avatarSrc: assetUrl("site/empty-state.png"),
-//       fullName: "Blanca Wheeler",
-//     },
-//   },
-// }
-
-// export const WithDefaultTag: Story = {
-//   args: {
-//     surveyStatus: { text: "Due July 8, 2030", status: "default" },
-//   },
-// }
-
-// export const WithMenuButton: Story = {
-//   args: {
-//     primaryAction: {
-//       label: "Menu button",
-//       menuItems: [
-//         {
-//           action: "#",
-//           label: "Item 1",
-//         },
-//         {
-//           action: () => alert("Item 2 clicked"),
-//           label: "Item 2",
-//         },
-//         {
-//           action: "#",
-//           label: "Item 3",
-//         },
-//       ],
-//     },
-//   },
-// }
-
-// export const Subtitle: Story = {
-//   args: {
-//     subtitle: (
-//       <Text variant="body">
-//         This is a <a href="/">link</a>
-//       </Text>
-//     ),
-//   },
-// }
+export const StickerSheetDefault: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+    pseudo: {
+      hover: [
+        '#tab-hover-example [class^="TitleBlockZen-TitleBlockZen-module__navigationTabsList"] li:nth-child(2) a',
+        '#Breadcrumbs-hover-example [class^="TitleBlockZen-TitleBlockZen-module__breadcrumb"]',
+      ],
+      focus: [
+        '#tab-focus-example [class^="TitleBlockZen-TitleBlockZen-module__navigationTabsList"] li:nth-child(2) a',
+        '#Breadcrumbs-focus-example [class^="TitleBlockZen-TitleBlockZen-module__breadcrumb"]',
+      ],
+    },
+  },
+  render: args => (
+    <StickerSheet>
+      <StickerSheet.Row rowTitle="Tab hover">
+        <TitleBlockZen {...args} id="tab-hover-example" />
+      </StickerSheet.Row>
+      <StickerSheet.Row rowTitle="Tab focus">
+        <TitleBlockZen {...args} id="tab-focus-example" />
+      </StickerSheet.Row>
+      <StickerSheet.Row rowTitle="Breadcrumbs hover">
+        <TitleBlockZen {...args} id="Breadcrumbs-hover-example" />
+      </StickerSheet.Row>
+      <StickerSheet.Row rowTitle="Breadcrumbs focus">
+        <TitleBlockZen {...args} id="Breadcrumbs-focus-example" />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}

package/src/TitleBlockZen/subcomponents/NavigationTabs.module.scss

@@ -59,13 +59,16 @@
     margin: 0;
   }
 
-  &.active {
+  $active-tab-marker-height: 5px;
+
+  &.active,
+  &:focus {
     color: $color-white;
 
     &::before {
       content: "";
       display: block;
-      height: 5px;
+      height: $active-tab-marker-height;
       position: absolute;
       top: 0;
       left: 0;
@@ -82,6 +85,46 @@
       }
     }
   }
+
+  &:focus {
+    outline: none;
+
+    &::before {
+      background-color: $color-blue-200;
+    }
+
+    &::after {
+      $focus-ring-offset: calc((-1 * #{$border-focus-ring-border-width}));
+
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-200;
+      border-radius: 0 0 $border-focus-ring-border-radius
+        $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      inset: 0 $focus-ring-offset $active-tab-marker-height $focus-ring-offset;
+
+      @include title-block-medium-and-small {
+        border-radius: $border-focus-ring-border-radius
+          $border-focus-ring-border-radius 0 0;
+        inset: $active-tab-marker-height $focus-ring-offset 0 $focus-ring-offset;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    &.active,
+    &:focus {
+      &::before {
+        background: transparent;
+        // instead of height we're using the border to create a active tab mark to make it friendlier for Windows High Contrast Mode.
+        border: $active-tab-marker-height solid transparent;
+        height: 0;
+      }
+    }
+  }
 }
 
 .linkAnchor.lightBackground {