@kaizen/components 1.78.0 → 1.78.2

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/Menu/subcomponents/StatelessMenu/StatelessMenu.d.ts

@@ -41,7 +41,6 @@ export type StatelessMenuProps = {
     'renderButton': (args: {
         'onClick': (e: any) => void;
         'onMouseDown': (e: any) => void;
-        'aria-haspopup': boolean;
         'aria-expanded': boolean;
     }) => React.ReactElement;
     'onClick'?: (event: SyntheticEvent) => void;

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

@@ -51,7 +51,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, 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, portalContainerId, onSelectionChange, ...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.78.0",
+  "version": "1.78.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -103,25 +103,25 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "^2.2.2",
-    "@internationalized/date": "^3.8.0",
+    "@headlessui/react": "^2.2.4",
+    "@internationalized/date": "^3.8.1",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.13.0",
-    "@react-aria/datepicker": "^3.14.2",
-    "@react-aria/focus": "^3.20.2",
-    "@react-aria/i18n": "^3.12.8",
-    "@react-aria/listbox": "^3.14.3",
-    "@react-aria/menu": "^3.18.2",
-    "@react-aria/overlays": "^3.27.0",
-    "@react-aria/select": "^3.15.4",
-    "@react-aria/utils": "^3.28.2",
-    "@react-stately/collections": "^3.12.3",
-    "@react-stately/datepicker": "^3.14.0",
-    "@react-stately/list": "^3.12.1",
-    "@react-stately/menu": "^3.9.3",
-    "@react-stately/select": "^3.6.12",
-    "@react-types/shared": "^3.29.0",
+    "@react-aria/button": "^3.13.1",
+    "@react-aria/datepicker": "^3.14.3",
+    "@react-aria/focus": "^3.20.3",
+    "@react-aria/i18n": "^3.12.9",
+    "@react-aria/listbox": "^3.14.4",
+    "@react-aria/menu": "^3.18.3",
+    "@react-aria/overlays": "^3.27.1",
+    "@react-aria/select": "^3.15.5",
+    "@react-aria/utils": "^3.29.0",
+    "@react-stately/collections": "^3.12.4",
+    "@react-stately/datepicker": "^3.14.1",
+    "@react-stately/list": "^3.12.2",
+    "@react-stately/menu": "^3.9.4",
+    "@react-stately/select": "^3.6.13",
+    "@react-types/shared": "^3.29.1",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
@@ -136,10 +136,10 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.4",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.39.2",
+    "prosemirror-view": "^1.39.3",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.39.0",
-    "react-aria-components": "^1.8.0",
+    "react-aria": "^3.40.0",
+    "react-aria-components": "^1.9.0",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.6",
     "react-focus-on": "^3.9.4",
@@ -154,9 +154,9 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.8.0",
-    "@cultureamp/package-bundler": "^2.3.1",
+    "@cultureamp/frontend-apis": "13.3.0",
+    "@cultureamp/i18n-react-intl": "^2.9.1",
+    "@cultureamp/package-bundler": "^2.3.2",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -174,7 +174,7 @@
     "postcss-import": "^16.1.0",
     "postcss-preset-env": "^10.1.6",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.1.2",
+    "query-string": "^9.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-highlight": "^0.15.0",
@@ -190,7 +190,8 @@
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
-    "typescript": "Installed in root"
+    "typescript": "Installed in root",
+    "frontend-apis": "There's an unresolved dep with 13.4.0 and onwards with node/msw, so we are locking to 13.3.0 for this update."
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/src/Avatar/Avatar.module.css

@@ -74,7 +74,7 @@
 }
 
 .fallbackIcon {
-  color: rgba(var(--color-purple-800-rgb), 0.7);
+  color: rgb(var(--color-purple-800-rgb), 0.7);
   font-size: calc(var(--avatar-x-y) * 0.7);
 }
 

package/src/Badge/Badge.module.css

@@ -15,7 +15,7 @@
 }
 
 .reversed {
-  --badge-background-color: rgba(var(--color-white-rgb), 0.1);
+  --badge-background-color: rgb(var(--color-white-rgb), 0.1);
 
   color: var(--color-white);
 }
@@ -50,7 +50,7 @@
 }
 
 .dark {
-  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.1);
+  --badge-background-color: rgb(var(--color-purple-700-rgb), 0.1);
 
   color: var(--color-purple-800);
 }
@@ -87,7 +87,7 @@
 }
 
 .animationOn .badge.dark {
-  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
+  --badge-background-color: rgb(var(--color-purple-700-rgb), 0.2);
 }
 
 .animationOn .badge.active {

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -60,7 +60,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
         <FilterBarButton {...triggerProps} filterId={id} isRemovable={filterState.isRemovable} />
       )}
       onSelectionChange={(key): void => {
-        updateValue(id, key)
+        updateValue(id, key ?? undefined)
         onSelectionChange?.(key)
       }}
       isOpen={filterState.isOpen}

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/Link/Link.module.css

@@ -94,7 +94,7 @@
 }
 
 .white.isDisabled {
-  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+  --link-text-color: rgb(var(--color-white-rgb), 0.2);
 }
 
 .reversed {
@@ -110,5 +110,5 @@
 }
 
 .reversed.isDisabled {
-  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+  --link-text-color: rgb(var(--color-white-rgb), 0.2);
 }

package/src/Menu/subcomponents/StatelessMenu/StatelessMenu.tsx

@@ -46,7 +46,6 @@ export type StatelessMenuProps = {
   'renderButton': (args: {
     'onClick': (e: any) => void
     'onMouseDown': (e: any) => void
-    'aria-haspopup': boolean
     'aria-expanded': boolean
   }) => React.ReactElement
   'onClick'?: (event: SyntheticEvent) => void
@@ -76,7 +75,6 @@ export const StatelessMenu = ({
       toggleMenuDropdown()
     },
     'onMouseDown': (e: React.MouseEvent<Element, MouseEvent>) => e.preventDefault(),
-    'aria-haspopup': true,
     'aria-expanded': isMenuVisible,
   })
 

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.css

@@ -4,6 +4,6 @@
   justify-content: center;
   width: 36px;
   background-color: transparent;
-  color: rgba(var(color-purple-800-rgb), 0.7);
+  color: rgb(var(color-purple-800-rgb), 0.7);
   margin: 0 var(--spacing-4);
 }

package/src/Popover/Popover.module.scss

@@ -46,7 +46,7 @@ $large-width: 450px;
   --border-width: var(--border-width-1);
 
   border: var(--border-width) var(--border-solid-border-style);
-  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(0 0 7px rgb(0, 0, 0, 0.1));
   border-radius: $border-solid-border-radius;
   color: $color-purple-800;
   text-align: start;

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

@@ -7,9 +7,8 @@ $dt-color-radio-background-color-hover: $color-gray-200;
 
 .container {
   position: relative;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: normal;
   margin-bottom: $spacing-sm;
 
   label {

package/src/Table/Table.module.scss

@@ -6,7 +6,7 @@
 
 // Taken from design-tokens/sass/shadow
 // we need control of the x and y offset in this component
-$box-shadow-color-sm: rgba(53, 55, 74, 0.09);
+$box-shadow-color-sm: rgb(53, 55, 74, 0.09);
 $row-height: 60px;
 $row-height-data-variant: 48px;
 
@@ -170,7 +170,7 @@ $row-height-data-variant: 48px;
 
   // This is an optical hack to stop the card shadow from overlapping over
   // the proceeding cards
-  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
+  box-shadow: 0 4px 6px rgb(53, 55, 74, 0.04);
   border: solid 1px rgba($color-purple-700-rgb, 0.1);
   transition:
     box-shadow $animation-duration-rapid,

package/src/TextArea/TextArea.module.css

@@ -58,7 +58,7 @@
 .default {
   &:not(.error, .caution) {
     &:disabled {
-      border-color: rgba(var(--color-gray-500-rgb), 0.3);
+      border-color: rgb(var(--color-gray-500-rgb), 0.3);
     }
   }
 
@@ -91,13 +91,13 @@
 
   &.disabled {
     background-color: var(--color-white);
-    border-color: rgba(var(--color-gray-500-rgb), 0.3);
-    color: rgba(var(--color-purple-800-rgb), 0.3);
+    border-color: rgb(var(--color-gray-500-rgb), 0.3);
+    color: rgb(var(--color-purple-800-rgb), 0.3);
   }
 }
 
 .reversed {
-  border-color: rgba(var(--color-white-rgb), 0.65);
+  border-color: rgb(var(--color-white-rgb), 0.65);
   background: transparent;
   color: var(--color-white);
 
@@ -108,7 +108,7 @@
   &:focus:not([disabled]),
   &:hover:not([disabled]),
   &:hover:focus:not([disabled]) {
-    background: rgba(var(--color-white-rgb), 0.1);
+    background: rgb(var(--color-white-rgb), 0.1);
     border-color: var(--color-white);
   }
 
@@ -134,7 +134,7 @@
 
   &.disabled {
     background: transparent;
-    border-color: rgba(var(--color-white-rgb), 0.3);
-    color: rgba(var(--color-white-rgb), 0.3);
+    border-color: rgb(var(--color-white-rgb), 0.3);
+    color: rgb(var(--color-white-rgb), 0.3);
   }
 }

package/src/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.css

@@ -8,7 +8,7 @@
   padding: var(--spacing-24) var(--spacing-12);
   background: var(--color-white);
   gap: var(--spacing-16);
-  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-top: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
 
   @media (width >= 768px) {
     grid-template-columns: 1fr 5fr 1fr;

package/src/__next__/Button/Button.module.css

@@ -185,9 +185,9 @@
   }
 
   &.isDisabled {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
     --button-border-color: transparent;
-    --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
+    --button-text-color: rgb(var(--color-purple-800-rgb), 0.7);
   }
 }
 
@@ -197,24 +197,24 @@
   --button-text-color: var(--color-white);
 
   &[data-hovered] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
     --button-border-color: var(--color-white);
   }
 
   &[data-pressed] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
     --button-border-color: var(--color-white);
   }
 
   &[data-pending] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
     --button-border-color: var(--color-white);
   }
 
   &.isDisabled {
     --button-bg-color: transparent;
-    --button-border-color: rgba(var(--color-white), 0.2);
-    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: rgb(var(--color-white), 0.2);
+    --button-text-color: rgb(var(--color-white-rgb), 0.2);
   }
 }
 
@@ -224,24 +224,24 @@
   --button-text-color: var(--color-white);
 
   &[data-hovered] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.2);
     --button-border-color: transparent;
   }
 
   &[data-pressed] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
     --button-border-color: transparent;
   }
 
   &[data-pending] {
-    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-bg-color: rgb(var(--color-white-rgb), 0.1);
     --button-border-color: transparent;
   }
 
   &.isDisabled {
     --button-bg-color: transparent;
     --button-border-color: transparent;
-    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+    --button-text-color: rgb(var(--color-white-rgb), 0.2);
   }
 }
 

package/src/__next__/Select/Select.tsx

@@ -85,6 +85,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   status,
   validationMessage,
   isReversed,
+  isRequired = false,
   isFullWidth,
   disabledValues,
   classNameOverride,
@@ -93,6 +94,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   placeholder = '',
   isDisabled,
   portalContainerId,
+  onSelectionChange,
   ...restProps
 }: SelectProps<Option>): JSX.Element => {
   const { refs } = useFloating<HTMLButtonElement>()
@@ -114,6 +116,8 @@ export const Select = <Option extends SelectOption = SelectOption>({
     description,
     placeholder,
     isDisabled,
+    isRequired,
+    onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
     ...restProps,
   }
 
@@ -153,6 +157,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__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -91,7 +91,7 @@
   }
 
   &.selectToggle .icon {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgb(255, 255, 255, 0.8);
   }
 
   &:active,