Updates Input Option

.changeset/big-wasps-fix.md

@@ -0,0 +1,35 @@
+---
+'@leafygreen-ui/input-option': major
+---
+
+### API changes
+- Renames `selected` prop to `checked` (this is done to avoid confusion with the `aria-selected` attribute, which is conditionally applied via the `highlighted` prop)
+ - `checked` applies the `aria-checked` attribute
+ - Note: `checked` _does not_ apply any styles. Any "checked" styles must be applied by the consuming component (this is consistent with previous behavior)
+- Adds `preserveIconSpace` prop to `InputOptionContent` to determine whether menu items should preserve space for a left glyph, or left align all text content. Use this prop in menus where some items may or may not have icons/glyphs, in order to keep text across menu items aligned.
+- Extends `AriaLabelPropsWithChildren` in `InputOptionProps`
+  - [`AriaLabelPropsWithChildren`](../packages/a11y/src/AriaLabelProps.ts) allows a component to accept any of `aria-label`, `aria-labelledby` or `children` as sufficient text for screen-reader accessibility
+
+### Styling changes
+
+- Updates `InputOption` and `InputOptionContent` styles to use updated `color` and `spacing` tokens
+- Exports `inputOptionClassName`, and `inputOptionContentClassName`.
+
+#### Spacing overview
+ - block padding: 8px
+ - inline padding: 12px
+ - icon/text/chevron gap: 8px
+ - label & description font-size: 13px
+ - label & description line-height: 16px
+
+#### Colors overview
+ - Left & right icon color: `color.[theme].icon.primary` tokens 
+ - Label & Description: use default `Label` & `Description` colors from `typography`
+ - Background uses `color[theme].background.primary` tokens (including hover & focus states)
+ - Wedge uses `palette.blue.base` for all modes
+ - The `highlight` prop uses the `.focus` state color for Icon, Text & Background colors
+
+
+### Internal updates
+
+- Establishes internal `InputOptionContext` to track `disabled`,  `highlighted`, & `checked` attributes.

.changeset/shaggy-cheetahs-ring.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/a11y': minor
+---
+
+Adds `AriaLabelPropsWithChildren` type that requires either `children`, or other `aria-label` attributes to be defined. Allows a component to accept any of `aria-label`, `aria-labelledby` or `children` as sufficient text for screen-reader accessibility

packages/a11y/src/A11y.spec.tsx

@@ -4,7 +4,11 @@ import { axe } from 'jest-axe';
 
 import { renderHook } from '@leafygreen-ui/testing-lib';
 
-import { AriaLabelProps, AriaLabelPropsWithLabel } from './AriaLabelProps';
+import {
+  AriaLabelProps,
+  AriaLabelPropsWithChildren,
+  AriaLabelPropsWithLabel,
+} from './AriaLabelProps';
 import {
   prefersReducedMotion,
   useAccessibleForm,
@@ -123,50 +127,100 @@ describe('packages/a11y', () => {
   /* eslint-disable jest/no-disabled-tests, jest/expect-expect, @typescript-eslint/no-unused-vars */
   describe.skip('AriaLabelProps types', () => {
     test('AriaLabelProps', () => {
-      // @ts-expect-error
-      const _1: AriaLabelProps = {};
-      const _2: AriaLabelProps = {
+      // @ts-expect-error - empty object not allowed
+      const empty: AriaLabelProps = {};
+      const aria_label: AriaLabelProps = {
         'aria-label': 'some label',
       };
-      const _3: AriaLabelProps = {
+      const labelledby: AriaLabelProps = {
         'aria-labelledby': '#some-id',
       };
-      const _4: AriaLabelProps = {
+      const both_aria: AriaLabelProps = {
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      [_1, _2, _3, _4]; // Avoid TS error
+      [empty, aria_label, labelledby, both_aria]; // Avoid TS error
     });
     test('AriaLabelPropsWithLabel', () => {
       // @ts-expect-error
-      const _1: AriaLabelPropsWithLabel = {};
-      const _2: AriaLabelPropsWithLabel = {
+      const empty: AriaLabelPropsWithLabel = {};
+      const aria_label: AriaLabelPropsWithLabel = {
         'aria-label': 'some label',
       };
-      const _3: AriaLabelPropsWithLabel = {
+      const labelledby: AriaLabelPropsWithLabel = {
         'aria-labelledby': '#some-id',
       };
-      const _4: AriaLabelPropsWithLabel = {
+      const both_aria: AriaLabelPropsWithLabel = {
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      const _5: AriaLabelPropsWithLabel = {
+      const label_only: AriaLabelPropsWithLabel = {
         label: 'some label',
       };
-      const _6: AriaLabelPropsWithLabel = {
+      const label_and_aria: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-label': 'some label',
       };
-      const _7: AriaLabelPropsWithLabel = {
+      const label_and_labelledby: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-labelledby': '#some-id',
       };
-      const _8: AriaLabelPropsWithLabel = {
+      const all: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      [_1, _2, _3, _4, _5, _6, _7, _8]; // Avoid TS error
+      [
+        empty,
+        aria_label,
+        labelledby,
+        both_aria,
+        label_only,
+        label_and_aria,
+        label_and_labelledby,
+        all,
+      ]; // Avoid TS error
+    });
+    test('AriaLabelPropsWithChildren', () => {
+      // @ts-expect-error - empty object not allowed
+      const empty: AriaLabelPropsWithChildren = {};
+      const label: AriaLabelPropsWithChildren = {
+        'aria-label': 'some label',
+      };
+      const labelledby: AriaLabelPropsWithChildren = {
+        'aria-labelledby': '#some-id',
+      };
+      const both_aria: AriaLabelPropsWithChildren = {
+        'aria-label': 'some label',
+        'aria-labelledby': '#some-id',
+      };
+      const children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+      };
+      const label_and_children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-label': 'some label',
+      };
+      const labelledby_and_children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-labelledby': '#some-id',
+      };
+      const all: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-label': 'some label',
+        'aria-labelledby': '#some-id',
+      };
+
+      [
+        empty,
+        label,
+        labelledby,
+        both_aria,
+        children,
+        label_and_children,
+        labelledby_and_children,
+        all,
+      ]; //
     });
   });
 });

packages/a11y/src/AriaLabelProps.ts

@@ -55,3 +55,15 @@ export type AriaLabelPropsWithLabel =
        */
       label: ReactNode;
     } & Partial<AriaLabelProps>);
+
+/**
+ * Conditionally requires {@link AriaLabelProps}
+ * if `children` is not provided
+ */
+export type AriaLabelPropsWithChildren =
+  | ({
+      children: ReactNode;
+    } & Partial<AriaLabelProps>)
+  | ({
+      children?: ReactNode | undefined;
+    } & AriaLabelProps);

packages/a11y/src/index.ts

@@ -1,6 +1,7 @@
-export {
-  type AriaLabelProps,
-  type AriaLabelPropsWithLabel,
+export type {
+  AriaLabelProps,
+  AriaLabelPropsWithChildren,
+  AriaLabelPropsWithLabel,
 } from './AriaLabelProps';
 export { default as prefersReducedMotion } from './prefersReducedMotion';
 export { default as useAccessibleForm } from './useAccessibleForm';

packages/input-option/src/InputOption/InputOption.stories.tsx

@@ -1,10 +1,11 @@
+/* eslint-disable react/jsx-key */
 import React from 'react';
 import {
   storybookArgTypes,
   storybookExcludedControlParams,
   StoryMetaType,
 } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 
@@ -15,7 +16,7 @@ import {
 
 import { InputOption, type InputOptionProps } from '.';
 
-const meta: StoryMetaType<typeof InputOption> = {
+export default {
   title: 'Components/InputOption',
   component: InputOption,
   parameters: {
@@ -31,17 +32,15 @@ const meta: StoryMetaType<typeof InputOption> = {
       ],
     },
     generate: {
+      storyNames: ['Generated', 'WithContent'],
       combineArgs: {
         darkMode: [false, true],
-        selected: [false, true],
-        isInteractive: [false, true],
-        showWedge: [false, true],
-        disabled: [false, true],
       },
     },
   },
   args: {
     children: 'Some text',
+    showWedge: true,
   },
   argTypes: {
     disabled: {
@@ -50,7 +49,7 @@ const meta: StoryMetaType<typeof InputOption> = {
     highlighted: {
       control: 'boolean',
     },
-    selected: {
+    checked: {
       control: 'boolean',
     },
     showWedge: {
@@ -69,9 +68,7 @@ const meta: StoryMetaType<typeof InputOption> = {
     },
     as: storybookArgTypes.as,
   },
-};
-
-export default meta;
+} satisfies StoryMetaType<typeof InputOption>;
 
 export const LiveExample: StoryFn<
   InputOptionProps & InputOptionContentProps
@@ -95,4 +92,15 @@ LiveExample.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const Generated = () => {};
+export const Generated = {
+  render: () => <></>,
+  parameters: {
+    generate: {
+      combineArgs: {
+        highlighted: [false, true],
+        checked: [false, true],
+        disabled: [false, true],
+      },
+    },
+  },
+} satisfies StoryObj<typeof InputOption>;