@patternfly/chatbot 6.3.0-prerelease.10 → 6.3.0-prerelease.12

package/src/MessageBar/MessageBar.test.tsx

@@ -73,9 +73,9 @@ describe('Message bar', () => {
   });
   it('should render correctly', () => {
     render(<MessageBar onSendMessage={jest.fn} />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-    expect(screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
-    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
   });
   it('can send via enter key', async () => {
@@ -110,15 +110,15 @@ describe('Message bar', () => {
     const input = screen.getByRole('textbox', { name: /Send a message.../i });
     await userEvent.type(input, 'Hello world');
     expect(input).toHaveTextContent('Hello world');
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
   });
   it('can disable send button shown when text is input', async () => {
     render(<MessageBar onSendMessage={jest.fn} isSendButtonDisabled />);
     const input = screen.getByRole('textbox', { name: /Send a message.../i });
     await userEvent.type(input, 'Hello world');
     expect(input).toHaveTextContent('Hello world');
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
   });
   it('can click send button', async () => {
     const spy = jest.fn();
@@ -126,26 +126,26 @@ describe('Message bar', () => {
     const input = screen.getByRole('textbox', { name: /Send a message.../i });
     await userEvent.type(input, 'Hello world');
     expect(input).toHaveTextContent('Hello world');
-    const sendButton = screen.getByRole('button', { name: 'Send button' });
+    const sendButton = screen.getByRole('button', { name: 'Send' });
     expect(sendButton).toBeTruthy();
     await userEvent.click(sendButton);
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('can always show send button', () => {
     render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton />);
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeEnabled();
   });
   it('can disable send button if always showing', () => {
     render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton isSendButtonDisabled />);
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
   });
   it('can handle buttonProps tooltipContent  appropriately for send', async () => {
     render(
       <MessageBar onSendMessage={jest.fn} alwayShowSendButton buttonProps={{ send: { tooltipContent: 'Test' } }} />
     );
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('can handle buttonProps props appropriately for send', async () => {
@@ -203,13 +203,13 @@ describe('Message bar', () => {
     expect(screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
     expect(screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
     expect(screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
-    const attachButton = screen.getByRole('button', { name: 'Attach button' });
+    const attachButton = screen.getByRole('button', { name: 'Attach' });
     await userEvent.click(attachButton);
     expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
   });
   it('can hide attach button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
-    expect(screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
   });
   // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
   // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
@@ -223,17 +223,17 @@ describe('Message bar', () => {
         buttonProps={{ attach: { inputTestId: 'input' } }}
       />
     );
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     const file = new File(['test'], 'test.json');
     const input = screen.getByTestId('input') as HTMLInputElement;
     await userEvent.upload(input, file);
     expect(input.files).toHaveLength(1);
     expect(spy).toHaveBeenCalledTimes(1);
   });
-  it('can handle buttonProps tooltipContent  appropriately for attach', async () => {
+  it('can handle buttonProps tooltipContent appropriately for attach', async () => {
     render(<MessageBar onSendMessage={jest.fn} hasAttachButton buttonProps={{ attach: { tooltipContent: 'Test' } }} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('can handle buttonProps props appropriately for attach', async () => {
@@ -251,12 +251,12 @@ describe('Message bar', () => {
   // --------------------------------------------------------------------------
   it('can show stop button', () => {
     render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={jest.fn} />);
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
   });
   it('can call handleStopButton', async () => {
     const spy = jest.fn();
     render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('can handle buttonProps tooltipContent appropriately for stop', async () => {
@@ -268,7 +268,7 @@ describe('Message bar', () => {
         buttonProps={{ stop: { tooltipContent: 'Test' } }}
       />
     );
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('can handle buttonProps props appropriately for stop', async () => {
@@ -287,12 +287,12 @@ describe('Message bar', () => {
   // --------------------------------------------------------------------------
   it('can hide microphone button when window.SpeechRecognition is not there', () => {
     render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
-    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
   });
   it('can show microphone button', () => {
     mockSpeechRecognition();
     render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
-    expect(screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
   });
   it('can handle buttonProps appropriately for microphone', async () => {
     mockSpeechRecognition();
@@ -305,15 +305,15 @@ describe('Message bar', () => {
         }}
       />
     );
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
     expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop listening' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
   it('can customize the listening placeholder', async () => {
     mockSpeechRecognition();
     render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
     const input = screen.getByRole('textbox', { name: /I am listening/i });
     expect(input).toBeTruthy();
   });
@@ -330,9 +330,9 @@ describe('Message bar', () => {
   });
   it('can be controlled', () => {
     render(<MessageBar onSendMessage={jest.fn} value="test" />);
-    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
     expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
   });

package/src/MessageBar/MicrophoneButton.tsx

@@ -105,7 +105,8 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       <Button
         variant="plain"
         className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-        aria-label={props['aria-label'] || 'Microphone button'}
+        aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
+        aria-pressed={isListening}
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBar/SendButton.test.tsx

@@ -12,23 +12,23 @@ const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 describe('Send button', () => {
   it('should render button correctly', () => {
     renderSend();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<SendButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<SendButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle className prop', () => {
     renderSend({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
   });
 
   it('should handle spread props, including aria-label', () => {
@@ -37,7 +37,7 @@ describe('Send button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderSend({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
   });
   it('should handle isCompact', () => {

package/src/MessageBar/SendButton.tsx

@@ -43,7 +43,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     <Button
       variant="plain"
       className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-      aria-label={props['aria-label'] || 'Send button'}
+      aria-label={props['aria-label'] || 'Send'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBar/StopButton.test.tsx

@@ -12,23 +12,23 @@ const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 describe('Stop button', () => {
   it('should render button correctly', () => {
     renderStop();
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<StopButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<StopButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle className prop', () => {
     renderStop({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
   });
   it('should handle spread props, including aria-label', () => {
     renderStop({ 'aria-label': 'test' });
@@ -36,7 +36,7 @@ describe('Stop button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderStop({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
   });
   it('should handle isCompact', () => {

package/src/MessageBar/StopButton.tsx

@@ -41,7 +41,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     <Button
       className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variant="link"
-      aria-label={props['aria-label'] || 'Stop button'}
+      aria-label={props['aria-label'] || 'Stop'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBox/JumpButton.test.tsx

@@ -7,20 +7,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -24,7 +24,7 @@ const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidd
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position} button`}
+        aria-label={`Jump ${position}`}
         onClick={onClick}
       >
         <Icon iconSize="lg" isInline>

package/src/MessageBox/MessageBox.test.tsx

@@ -40,7 +40,7 @@ describe('MessageBox', () => {
     region.dispatchEvent(new Event('scroll'));
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
       expect(spy).toHaveBeenCalled();
     });
   });
@@ -63,7 +63,7 @@ describe('MessageBox', () => {
     region.dispatchEvent(new Event('scroll'));
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump top button/i }));
+      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
       expect(spy).toHaveBeenCalled();
     });
   });

package/src/ResponseActions/ResponseActionButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 
-export interface ResponseActionButtonProps {
+export interface ResponseActionButtonProps extends ButtonProps {
   /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
   ariaLabel?: string;
   /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */

package/src/ResponseActions/ResponseActions.test.tsx

@@ -41,6 +41,14 @@ const CUSTOM_ACTIONS = [
   }
 ];
 
+const ALL_ACTIONS_DATA_TEST = [
+  { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+  { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+  { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'share', label: 'Share', dataTestId: 'share' },
+  { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
+
 describe('ResponseActions', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -181,6 +189,13 @@ describe('ResponseActions', () => {
     });
   });
 
+  it('should be able to add custom attributes to buttons', () => {
+    ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), 'data-testid': dataTestId } }} />);
+      expect(screen.getByTestId(dataTestId)).toBeTruthy();
+    });
+  });
+
   it('should be able to add custom actions', () => {
     CUSTOM_ACTIONS.forEach((action) => {
       const key = Object.keys(action)[0];
@@ -192,12 +207,14 @@ describe('ResponseActions', () => {
               onClick: action[key].onClick,
               // doing this just because it's easier to test without a regex for the button name
               ariaLabel: action[key].ariaLabel.toLowerCase(),
-              icon: action[key].icon
+              icon: action[key].icon,
+              'data-testid': action[key]
             }
           }}
         />
       );
       expect(screen.getByRole('button', { name: key })).toBeTruthy();
+      expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
 });

package/src/ResponseActions/ResponseActions.tsx

@@ -36,9 +36,12 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   'aria-controls'?: string;
 }
 
+type ExtendedActionProps = ActionProps & {
+  [key: string]: any;
+};
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
-  actions: Record<string, ActionProps | undefined> & {
+  actions: Record<string, ExtendedActionProps | undefined> & {
     positive?: ActionProps;
     negative?: ActionProps;
     copy?: ActionProps;
@@ -78,6 +81,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     <div ref={responseActions} className="pf-chatbot__response-actions">
       {positive && (
         <ResponseActionButton
+          {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
           clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'positive', positive.onClick)}
@@ -95,6 +99,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {negative && (
         <ResponseActionButton
+          {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
           clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'negative', negative.onClick)}
@@ -112,6 +117,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {copy && (
         <ResponseActionButton
+          {...copy}
           ariaLabel={copy.ariaLabel ?? 'Copy'}
           clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
           onClick={(e) => handleClick(e, 'copy', copy.onClick)}
@@ -129,6 +135,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {share && (
         <ResponseActionButton
+          {...share}
           ariaLabel={share.ariaLabel ?? 'Share'}
           clickedAriaLabel={share.ariaLabel ?? 'Shared'}
           onClick={(e) => handleClick(e, 'share', share.onClick)}
@@ -146,6 +153,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {listen && (
         <ResponseActionButton
+          {...listen}
           ariaLabel={listen.ariaLabel ?? 'Listen'}
           clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
           onClick={(e) => handleClick(e, 'listen', listen.onClick)}
@@ -163,6 +171,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
+          {...additionalActions[action]}
           key={action}
           ariaLabel={additionalActions[action]?.ariaLabel}
           clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}