fix(ChatbotConversationHistoryDropdown): Add separate prop for aria label (#684)

Author: rebeccaalpert

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -78,4 +78,9 @@ describe('ChatbotConversationHistoryDropdown', () => {
       expect(screen.queryByText('Actions dropdown')).toBeInTheDocument();
     });
   });
+
+  it('should be able to set a custom aria-label', () => {
+    render(<ChatbotConversationHistoryDropdown menuItems={menuItems} aria-label="Custom conversation options" />);
+    expect(screen.queryByRole('menuitem', { name: /Custom conversation options/i })).toBeInTheDocument();
+  });
 });

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -15,8 +15,10 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   menuItems: React.ReactNode;
   /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation settings dropdown */
+  /** Tooltip content applied to conversation settings dropdown */
   label?: string;
+  /** Aria-label applied to conversation settings dropdown */
+  'aria-label'?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
   /** Id applied to dropdown menu toggle */
@@ -27,23 +29,24 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
   menuItems,
   menuClassName,
   onSelect,
-  label,
+  label = 'Conversation options',
+  'aria-label': ariaLabel,
   id
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
-      content={label ?? 'Conversation options'}
+      content={label}
       position="bottom"
       // prevents VO announcements of both aria label and tooltip
       aria="none"
     >
       <MenuToggle
         className="pf-chatbot__history-actions"
         variant="plain"
-        aria-label={label ?? 'Conversation options'}
+        aria-label={ariaLabel ?? label}
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}