@kaizen/components 1.79.4 → 1.79.6

package/dist/cjs/src/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -36,7 +36,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = React.useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -83,11 +84,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return React__default.default.createElement("div", {
     className: classnames__default.default(LikertScaleLegacy_module.container, isRated && LikertScaleLegacy_module.rated, reversed && [LikertScaleLegacy_module.reversed], hoveredItem !== null && LikertScaleLegacy_module.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, React__default.default.createElement("div", {
     className: LikertScaleLegacy_module.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

package/dist/cjs/src/__next__/Select/Select.cjs

@@ -44,17 +44,19 @@ var Select = function (_a) {
     status = _a.status,
     validationMessage = _a.validationMessage,
     isReversed = _a.isReversed,
+    _c = _a.isRequired,
+    isRequired = _c === void 0 ? false : _c,
     isFullWidth = _a.isFullWidth,
     disabledValues = _a.disabledValues,
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    _c = _a.placeholder,
-    placeholder = _c === void 0 ? '' : _c,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
     onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -72,18 +74,19 @@ var Select = function (_a) {
     description: description,
     placeholder: placeholder,
     isDisabled: isDisabled,
+    isRequired: isRequired,
     onSelectionChange: onSelectionChange ? function (key) {
       return onSelectionChange(key);
     } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _d.labelProps,
-    reactAriaTriggerProps = _d.triggerProps,
-    valueProps = _d.valueProps,
-    menuProps = _d.menuProps,
-    errorMessageProps = _d.errorMessageProps,
-    descriptionProps = _d.descriptionProps;
+  var _e = select$1.useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _e.labelProps,
+    reactAriaTriggerProps = _e.triggerProps,
+    valueProps = _e.valueProps,
+    menuProps = _e.menuProps,
+    errorMessageProps = _e.errorMessageProps,
+    descriptionProps = _e.descriptionProps;
   // Hack incoming:
   // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
   // We use role=combobox, meaning screen readers will read the value.
@@ -105,11 +108,12 @@ var Select = function (_a) {
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
     'ref': refs.setReference,
-    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId)
+    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired
   });
-  var _e = React.useState(),
-    portalContainer = _e[0],
-    setPortalContainer = _e[1];
+  var _f = React.useState(),
+    portalContainer = _f[0],
+    setPortalContainer = _f[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);

package/dist/esm/src/LikertScaleLegacy/LikertScaleLegacy.mjs

@@ -27,7 +27,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -74,11 +75,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, isRated && styles.rated, reversed && [styles.reversed], hoveredItem !== null && styles.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

package/dist/esm/src/__next__/Select/Select.mjs

@@ -36,17 +36,19 @@ const Select = /*#__PURE__*/function () {
       status = _a.status,
       validationMessage = _a.validationMessage,
       isReversed = _a.isReversed,
+      _c = _a.isRequired,
+      isRequired = _c === void 0 ? false : _c,
       isFullWidth = _a.isFullWidth,
       disabledValues = _a.disabledValues,
       classNameOverride = _a.classNameOverride,
       selectedKey = _a.selectedKey,
       description = _a.description,
-      _c = _a.placeholder,
-      placeholder = _c === void 0 ? '' : _c,
+      _d = _a.placeholder,
+      placeholder = _d === void 0 ? '' : _d,
       isDisabled = _a.isDisabled,
       onSelectionChange = _a.onSelectionChange,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -64,18 +66,19 @@ const Select = /*#__PURE__*/function () {
       description: description,
       placeholder: placeholder,
       isDisabled: isDisabled,
+      isRequired: isRequired,
       onSelectionChange: onSelectionChange ? function (key) {
         return onSelectionChange(key);
       } : undefined
     }, restProps);
     var state = useSelectState(ariaSelectProps);
-    var _d = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _d.labelProps,
-      reactAriaTriggerProps = _d.triggerProps,
-      valueProps = _d.valueProps,
-      menuProps = _d.menuProps,
-      errorMessageProps = _d.errorMessageProps,
-      descriptionProps = _d.descriptionProps;
+    var _e = useSelect(ariaSelectProps, state, triggerRef),
+      labelProps = _e.labelProps,
+      reactAriaTriggerProps = _e.triggerProps,
+      valueProps = _e.valueProps,
+      menuProps = _e.menuProps,
+      errorMessageProps = _e.errorMessageProps,
+      descriptionProps = _e.descriptionProps;
     // Hack incoming:
     // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
     // We use role=combobox, meaning screen readers will read the value.
@@ -97,11 +100,12 @@ const Select = /*#__PURE__*/function () {
       'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
       'ref': refs.setReference,
-      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId)
+      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+      'aria-required': isRequired
     });
-    var _e = useState(),
-      portalContainer = _e[0],
-      setPortalContainer = _e[1];
+    var _f = useState(),
+      portalContainer = _f[0],
+      setPortalContainer = _f[1];
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);

package/dist/styles.css

@@ -5062,7 +5062,9 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+
+    /* from $ca-z-index-fixed */
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;

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

@@ -12,10 +12,14 @@ export type LikertScaleProps = {
     'colorSchema'?: ColorSchema | 'classical';
     'validationMessage'?: string;
     'status'?: 'default' | 'error';
+    /**
+     * Sets aria-required value on radiogroup for assistive technologies. Validation must still be handled.
+     */
+    'isRequired'?: boolean;
     'onSelect': (value: ScaleItem | null) => void;
 };
 /**
  * {@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, colorSchema, "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, isRequired, }: LikertScaleProps) => JSX.Element;

package/dist/types/__next__/Select/Select.d.ts

@@ -55,7 +55,7 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
 export declare const Select: {
-    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
+    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isRequired, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
         <Option extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.4",
+  "version": "1.79.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/LikertScaleLegacy/LikertScaleLegacy.spec.tsx

@@ -36,6 +36,7 @@ const LikertScaleLegacyWrapper = (props: Partial<LikertScaleProps>): JSX.Element
     labelId="test__likert-scale"
     selectedItem={null}
     onSelect={(): void => undefined}
+    isRequired
     {...props}
   />
 )

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -25,6 +25,10 @@ export type LikertScaleProps = {
   'colorSchema'?: ColorSchema | 'classical'
   'validationMessage'?: string
   'status'?: 'default' | 'error'
+  /**
+   * Sets aria-required value on radiogroup for assistive technologies. Validation must still be handled.
+   */
+  'isRequired'?: boolean
   'onSelect': (value: ScaleItem | null) => void
 }
 
@@ -46,6 +50,7 @@ export const LikertScaleLegacy = ({
   validationMessage,
   status,
   labelId,
+  isRequired,
 }: LikertScaleProps): JSX.Element => {
   const [hoveredItem, setHoveredItem] = useState<ScaleItem | null>(null)
   const itemRefs: ItemRefs = scale.map((s) => ({
@@ -104,11 +109,12 @@ export const LikertScaleLegacy = ({
         reversed && [styles.reversed],
         hoveredItem !== null && styles.hovered,
       )}
-      aria-labelledby={labelId}
+      aria-labelledby={isRequired ? `${labelId}` : labelId}
       role="radiogroup"
       tabIndex={-1}
       aria-describedby={validationMessageId}
       data-testid={dataTestId}
+      aria-required={isRequired}
     >
       <div className={styles.legend} data-testid={dataTestId && `${dataTestId}-legend`}>
         <Text variant="small" color={reversed ? 'white' : 'dark'}>

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx

@@ -21,3 +21,11 @@ Likert scale radio buttons let people select one option in a Likert scale rangin
 
 <Canvas of={LikertScaleLegacyStories.Playground} />
 <Controls of={LikertScaleLegacyStories.Playground} />
+
+## API
+
+### isRequired
+
+Sets aria-required value on radiogroup for assistive technologies. An accessible label must be provided and validation must still be handled within implementations.
+
+<Canvas of={LikertScaleLegacyStories.IsRequired} />

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, within } from '@storybook/test'
+import { VisuallyHidden } from '~components/VisuallyHidden'
 import { LikertScaleLegacy } from '../index'
 import { type Scale, type ScaleItem } from '../types'
 
@@ -57,7 +59,7 @@ export const Playground: Story = {
         code: `
   const SatisfactionExample = () => {
     const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
-  
+
     return (
       <LikertScaleLegacy
         scale={[
@@ -82,3 +84,30 @@ export const Playground: Story = {
     },
   },
 }
+
+export const IsRequired: Story = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
+    const labelId = React.useId()
+    return (
+      <div>
+        <VisuallyHidden id={labelId}>Likert scale label</VisuallyHidden>
+        <LikertScaleLegacy
+          {...args}
+          labelId={labelId}
+          selectedItem={selectedItem}
+          onSelect={setSelectedItem}
+        />
+      </div>
+    )
+  },
+  args: {
+    isRequired: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const likertScale = canvas.getByRole('radiogroup', { name: 'Likert scale label' })
+
+    expect(likertScale).toHaveAttribute('aria-required', 'true')
+  },
+}

package/src/__next__/Menu/_docs/Menu--migration-guide.mdx

@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Components/Menu/Migration guide" />
+
+# Menu migration guide
+
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating menu usage from the `deprecated` (`@kaizen/components`) `Menu` component to the `next` (`@kaizen/components/next`) `Menu` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
+
+## Key API changes
+
+`next/Menu` separates its functionality into the following components:
+
+- `MenuTrigger` wraps the `MenuPopover` component and its trigger element.
+- `MenuPopover` contains a `Menu` component, and controls the popover placement and open and close interactions.
+- `Menu` contains one or more `MenuItem` and `MenuSection` components.
+- `MenuSection` enables menu items to be grouped into sections.
+- `MenuHeader` provides a section's header content.
+- `MenuItem` provides a menu item's content, and handles item selection.
+
+Other notable changes:
+
+- `Menu.align` prop becomes MenuPopover.placement, and values are mapped as follows:
+  - `left` becomes `start`
+  - `right` becomes `end`
+- `Menu.autoHide` prop is retired
+- `Menu.button` prop becomes `MenuTrigger.children`
+  - The trigger element must be a `next/Button`
+- `Menu.dropdownWidth` prop is retired
+- `Menu.portalSelector` prop is retired
+  - Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
+- `MenuItem.destructive` prop is retired
+  - This change aligns with a broader move towards more judicious use of colour
+- `MenuItem.disabled` prop becomes `MenuItem.isDisabled`
+- `MenuItem.label` prop becomes `MenuItem.children`
+- `MenuItem.onClick` prop becomes `MenuItem.onAction`
+  - React Aria's `Menu` does not expose native click events, e.g. `MenuItem.onAction` cannot call `e.preventDefault()`
+  - See React Aria [Menu documentation](https://react-spectrum.adobe.com/react-aria/Menu.html) for more details on working with `Menu` and `MenuItem` events
+- `MenuList.heading` prop becomes `MenuHeader` in a `MenuSection`
+
+## Migration example
+
+### Before
+
+```tsx
+<Menu button={<Button>Trigger</Button>}>
+  <MenuList>
+    <MenuList heading={<MenuHeading>Section One</MenuHeading>}>
+      <MenuItem onClick={() => alert('1')} label="Item 1" />
+      <MenuItem onClick={() => alert('2')} label="Item 2" />
+    </MenuList>
+    <MenuList heading={<MenuHeading>Section Two</MenuHeading>}>
+      <MenuItem onClick={() => alert('3')} label="Item 3" />
+      <MenuItem onClick={() => alert('4')} label="Item 4" />
+    </MenuList>
+  </MenuList>
+</Menu>
+```
+
+### After
+
+```tsx
+<MenuTrigger>
+  <Button>Trigger</Button>
+  <MenuPopover>
+    <Menu>
+      <MenuSection>
+        <MenuHeader>Section One</MenuHeader>
+        <MenuItem onAction={() => alert('1')}>Item 1</MenuItem>
+        <MenuItem onAction={() => alert('2')}>Item 2</MenuItem>
+      </MenuSection>
+      <MenuSection>
+        <MenuHeader>Section Two</MenuHeader>
+        <MenuItem onAction={() => alert('3')}>Item 3</MenuItem>
+        <MenuItem onAction={() => alert('4')}>Item 4</MenuItem>
+      </MenuSection>
+    </Menu>
+  </MenuPopover>
+</MenuTrigger>
+```
+
+## More information
+
+More information about `next/Menu` can be found at [API Specification](/docs/components-menu-menu-next-api-specification--docs) and [Usage Guidelines](/docs/components-menu-menu-next-usage-guidelines--docs).

package/src/__next__/Select/Select.tsx

@@ -89,6 +89,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   status,
   validationMessage,
   isReversed,
+  isRequired = false,
   isFullWidth,
   disabledValues,
   classNameOverride,
@@ -119,6 +120,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
     description,
     placeholder,
     isDisabled,
+    isRequired,
     onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
     ...restProps,
   }
@@ -159,6 +161,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
     isReversed,
     'ref': refs.setReference,
     'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired,
   }
 
   const [portalContainer, setPortalContainer] = useState<HTMLElement>()

package/src/__next__/Select/_docs/Select.mdx

@@ -92,6 +92,14 @@ Add validation messages using `status` and `validationMessage`.
 
 <Canvas of={SelectStories.Validation} />
 
+#### isRequired and validationBehavior
+
+When using the `isRequired` property you can also specify the `validationBehavior` to change from `aria` to `native` form validation.
+
+<Canvas of={SelectStories.SelectNativeValidationBehavior} />
+
+While both use `aria-required` to announce whether the field has to have a value to assistive technologies, the `native` will option will prevent form submissions if the `selectedKey` is `undefined`.
+
 ### Full width
 
 Set `isFullWidth` to `true` to have the Select span the full width of its container.

package/src/__next__/Select/_docs/Select.stories.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
+import { FieldMessage } from '~components/FieldMessage'
 import { ContextModal } from '~components/Modal'
 import { RadioField, RadioGroup } from '~components/Radio'
+import { Button } from '~components/__next__'
 import { Select } from '../Select'
 import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
@@ -229,3 +232,93 @@ export const TouchDeviceTest: Story = {
     )
   },
 }
+
+export const RequiredSelect: Story = {
+  args: {
+    label: 'Required Select',
+    isRequired: true,
+    validationBehavior: 'native',
+  },
+  render: (args) => <Select {...args} />,
+}
+
+export const SelectNativeValidationBehavior: Story = {
+  parameters: {
+    name: 'Required Select with native form validation',
+  },
+  args: {
+    label: 'Required Select',
+    isRequired: true,
+    validationBehavior: 'native',
+  },
+  render: (args) => {
+    const [hasSubmitted, setHasSubmitted] = React.useState(false)
+    return (
+      <div>
+        <form
+          className="flex flex-col gap-16"
+          name="form-with-required-select"
+          aria-describedby={hasSubmitted ? 'id--field-message-form' : undefined}
+          onSubmit={(e) => {
+            e.preventDefault()
+            setHasSubmitted(true)
+          }}
+        >
+          <Select {...args} isRequired />
+          <div>
+            <Button type="submit">Submit</Button>
+          </div>
+        </form>
+        {hasSubmitted && (
+          <FieldMessage
+            id="id--field-message-form"
+            classNameOverride="mt-8"
+            status="success"
+            message={'Form submitted!'}
+          />
+        )}
+      </div>
+    )
+  },
+}
+
+export const NativeFormValidationWithoutSelectedVal: Story = {
+  ...SelectNativeValidationBehavior,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const submitButton = canvas.getByRole('button', { name: 'Submit' })
+    const requiredSelect = canvas.getByRole('combobox', { name: 'Required Select' })
+    const form = await canvas.findByRole('form')
+
+    await step('Select has aria-required attribute', async () => {
+      expect(requiredSelect).toHaveAttribute('aria-required', 'true')
+    })
+
+    await step('Submit will not call onSubmit without a selected value', async () => {
+      await userEvent.click(submitButton)
+      await waitFor(() => {
+        expect(form).toHaveAccessibleDescription('')
+      })
+    })
+  },
+}
+
+export const NativeFormValidationWithSelectedVal: Story = {
+  ...SelectNativeValidationBehavior,
+  args: {
+    selectedKey: 'short-black',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const submitButton = canvas.getByRole('button', { name: 'Submit' })
+    const form = await canvas.findByRole('form')
+
+    await step('Submit will call onSubmit with a selected value', async () => {
+      await userEvent.click(submitButton)
+
+      await waitFor(() => {
+        expect(form).toHaveAccessibleDescription('Form submitted!')
+      })
+    })
+  },
+}

package/src/__next__/Tabs/subcomponents/TabList/TabList.module.css

@@ -26,7 +26,9 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+
+    /* from $ca-z-index-fixed */
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;