Add new aria-props to PillSelector component

Author: Kubit

src/components/pillSelector/pillSelectorStandAlone.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Pill } from '@/components/pill';
 import { useRoveFocus } from '@/hooks';
 import { ROLES } from '@/types';
+import { pickAriaProps } from '@/utils';
 
 import { PillSelectorWrapper, ThumbStyled } from './pillSelector.styled';
 import type { IPillSelectorStandAlone } from './types';
@@ -14,6 +15,8 @@ const PillSelectorStandAloneComponent = (
   { dataTestId, maxPills = MAX_PILLS, ...props }: IPillSelectorStandAlone,
   ref: React.ForwardedRef<HTMLDivElement>
 ): React.JSX.Element => {
+  const ariaProps = pickAriaProps(props);
+
   const roveFocusProps = React.useMemo(
     () => ({
       size: props.pills.length,
@@ -36,6 +39,7 @@ const PillSelectorStandAloneComponent = (
 
   return (
     <PillSelectorWrapper
+      {...ariaProps}
       ref={listEl as React.RefObject<HTMLDivElement>}
       data-testid={`${dataTestId}PillSelector`}
       hasThumb={!!(!props.multiSelect && props.styles?.thumb)}

src/components/pillSelector/stories/argtypes.ts

@@ -115,6 +115,50 @@ export const argtypes = (
         category: CATEGORY_CONTROL.TESTING,
       },
     },
+    ['aria-label']: {
+      description: 'Aria label of the button',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-describedby']: {
+      description: 'Aria text that should be read when the button is focused',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-labelledby']: {
+      description: 'Aria labelledby',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-disabled']: {
+      description: 'Aria for disabled buttons',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     ctv: {
       description: 'Object used for update variant styles',
       control: { type: 'object' },

src/components/pillSelector/stories/pillSelector.stories.tsx

@@ -28,6 +28,7 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
 export const PillSelector: Story = {
   args: {
+    ['aria-label']: 'Aria label pill selector',
     dataTestId: 'dataTestId',
     multiSelect: false,
     variant: Object.values(variantsObject[themeSelected].PillSelectorVariant || {})[0] as string,

src/components/pillSelector/types/pillSelector.ts

@@ -5,6 +5,11 @@ import { CustomTokenTypes } from '@/types';
 
 import { PillSelectorStyles } from './pillSelectorTheme';
 
+type PillSelectorAriaAttributes = Pick<
+  React.AriaAttributes,
+  'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-disabled'
+>;
+
 export type PillType = Pick<
   IPillUnControlled,
   | 'disabled'
@@ -25,7 +30,7 @@ type PillSelectedType = number | string;
 
 type Pill = Omit<PillType, 'size'> & { size?: string };
 
-export interface IPillSelectorStandAlone {
+export interface IPillSelectorStandAlone extends PillSelectorAriaAttributes {
   pillVariant: string;
   pillSize?: string;
   pillSelected?: PillSelectedType[];