@kaizen/components 0.0.0-canary-test-select-aria-props-update-20250616233358 → 0.0.0-canary-fix-tab-20250626012516

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/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/styles.css

@@ -5062,7 +5062,7 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-test-select-aria-props-update-20250616233358",
+  "version": "0.0.0-canary-fix-tab-20250626012516",
   "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/_docs/Select.mdx

@@ -98,7 +98,7 @@ When using the `isRequired` property you can also specify the `validationBehavio
 
 <Canvas of={SelectStories.SelectNativeValidationBehavior} />
 
-While both use `aria-required` to announce whether the field has to have value to assistive technologies, the `native` will option will prevent form submissions if the `selectedKey` is `undefined`.
+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
 

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

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