Add aria props to PillV2

Author: Kubit

src/components/pillV2/pillStandAlone.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { useId } from '@/hooks/useId/useId';
 import { InputTypeType } from '@/types/inputType/inputType';
+import { pickAriaProps } from '@/utils/aria/aria';
 
 import { ROLES } from '../../types/role/role';
 import { ButtonType } from '../button/types/type';
@@ -22,13 +22,14 @@ const PillStandAloneComponent = (
   { dataTestId = 'pill', type = PillType.BUTTON, ...props }: IPillStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
+  const ariaProps = pickAriaProps(props);
   const id = useId('pill');
   const pillContentId = `${id}-content`;
 
   return (
     <PillRootContainerStyled
-      ref={ref as any}
-      aria-controls={props['aria-controls']}
+      ref={ref}
+      {...ariaProps}
       aria-selected={type === PillType.TAB ? props.selected : undefined}
       as={[PillType.BUTTON, PillType.TAB].includes(type) ? PillAsButton : undefined}
       data-testid={dataTestId}

src/components/pillV2/stories/argtypes.ts

@@ -169,6 +169,72 @@ export const argtypes = (
         category: CATEGORY_CONTROL.TESTING,
       },
     },
+    ['aria-label']: {
+      description: 'Text applied to aria-label property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-labelledby']: {
+      description: 'Text applied to aria-labelledby property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-describedby']: {
+      description: 'Text applied to aria-describedby property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-pressed']: {
+      description: 'Text applied to aria-describedby property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-disabled']: {
+      description: 'Text applied to aria-describedby property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    ['aria-expanded']: {
+      description: 'Apply to aria-expanded property of input component',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     ctv: {
       description: 'Object used for update variant styles',
       type: { name: 'object' },

src/components/pillV2/types/index.ts

@@ -4,6 +4,10 @@ export type {
   PillSizePropsStylesType as PillSizePropsStylesTypeV2,
   PillPropsStylesType as PillPropsStylesTypeV2,
 } from './pillTheme';
-export type { IPill as IPillV2, PillLabelType as PillLabelTypeV2 } from './pill';
+export type {
+  IPill as IPillV2,
+  PillLabelType as PillLabelTypeV2,
+  PillAriaAttributes as PillAriaAttributesV2,
+} from './pill';
 export { PillStateType as PillStateTypeV2 } from './pillStateType';
 export { PillType as PillTypeV2 } from './pillType';

src/components/pillV2/types/pill.ts

@@ -11,7 +11,19 @@ export type PillLabelType = Omit<IText<string>, 'children'> & {
   content?: ReactNode;
 };
 
-export interface IPillStandAlone {
+export type PillAriaAttributes = Pick<
+  React.AriaAttributes,
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'aria-checked'
+  | 'aria-describedby'
+  | 'aria-pressed'
+  | 'aria-disabled'
+  | 'aria-controls'
+  | 'aria-expanded'
+>;
+
+export interface IPillStandAlone extends PillAriaAttributes {
   styles?: PillPropsStylesType;
   leftIcon?: IElementOrIcon;
   label?: PillLabelType;