Move aria-labelledby

Author: rebeccaalpert

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

@@ -749,7 +749,7 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(screen.getByRole('button', { name: 'Chats' })).toBeInTheDocument();
   });
 
-  it('labels each MenuGroup with aria-labelledby referencing its visible label', () => {
+  it('labels each MenuList with aria-labelledby referencing its visible label', () => {
     const groups: ConversationGroup[] = [
       {
         id: 'pinned',
@@ -767,7 +767,7 @@ describe('ChatbotConversationHistoryNav', () => {
       }
     ];
 
-    const { container } = render(
+    render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
@@ -781,17 +781,40 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(pinnedHeading).toHaveAttribute('id', 'chatbot-nav-group-pinned-label');
     expect(pinnedHeading.closest('section')).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
 
-    const staticMenu = container.querySelector('.pf-v6-c-menu.pf-chatbot__history-menu');
-    expect(staticMenu).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+    expect(screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute(
+      'aria-labelledby',
+      'chatbot-nav-group-pinned-label'
+    );
+    expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-pinned-label"]')).toBeTruthy();
 
     const chatsToggle = screen.getByRole('button', { name: 'Chats' });
     expect(chatsToggle).toHaveAttribute('id', 'chatbot-nav-group-chats-toggle');
 
-    const expandableMenu = container.querySelectorAll('.pf-v6-c-menu.pf-chatbot__history-menu')[1];
-    expect(expandableMenu).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-chats-toggle');
+    expect(screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute(
+      'aria-labelledby',
+      'chatbot-nav-group-chats-toggle'
+    );
+    expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-chats-toggle"]')).toBeTruthy();
+  });
+
+  it('labels grouped object conversations on the menu list element', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+      />
+    );
+
+    expect(document.querySelector('ul.pf-v6-c-menu__list')).toHaveAttribute(
+      'aria-labelledby',
+      'chatbot-nav-group-Today-label'
+    );
   });
 
-  it('labels a shared static menu with all group title ids', () => {
+  it('labels each menu list in a shared static menu with its group title id', () => {
     const groups: ConversationGroup[] = [
       {
         id: 'pinned',
@@ -805,7 +828,7 @@ describe('ChatbotConversationHistoryNav', () => {
       }
     ];
 
-    const { container } = render(
+    render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
@@ -815,9 +838,13 @@ describe('ChatbotConversationHistoryNav', () => {
       />
     );
 
-    expect(container.querySelector('.pf-v6-c-menu.pf-chatbot__history-menu')).toHaveAttribute(
+    expect(screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute(
+      'aria-labelledby',
+      'chatbot-nav-group-pinned-label'
+    );
+    expect(screen.getByRole('menu', { name: 'Recent chats' })).toHaveAttribute(
       'aria-labelledby',
-      'chatbot-nav-group-pinned-label chatbot-nav-group-recent-label'
+      'chatbot-nav-group-recent-label'
     );
   });
 
@@ -883,7 +910,7 @@ describe('ChatbotConversationHistoryNav', () => {
       }
     ];
 
-    const { container } = render(
+    render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
@@ -895,8 +922,8 @@ describe('ChatbotConversationHistoryNav', () => {
 
     // Collapsed expandable groups render their toggle outside the menu and omit the menu
     // entirely until expanded, so their items are not part of arrow-key navigation.
-    expect(container.querySelectorAll('.pf-v6-c-menu.pf-chatbot__history-menu')).toHaveLength(1);
-    expect(container.querySelector('.pf-v6-c-menu.pf-chatbot__history-menu')).toHaveAttribute(
+    expect(screen.getAllByRole('menu')).toHaveLength(1);
+    expect(screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute(
       'aria-labelledby',
       'chatbot-nav-group-chats-label'
     );

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -72,6 +72,35 @@ const getExpandableGroupToggleId = (groupId: string) => `chatbot-nav-group-${gro
 
 const getShowAllToggleId = (groupId: string) => `chatbot-nav-group-${groupId}-show-all-toggle`;
 
+const getStaticMenuLabelId = (group: { id: string; menuGroupProps?: MenuGroupProps }) =>
+  group.menuGroupProps?.titleId ?? getGroupLabelId(group.id);
+
+const getMenuListLabelledBy = (group: {
+  id: string;
+  expandable?: { isExpanded: boolean; onToggle: (isExpanded: boolean) => void };
+  menuGroupProps?: MenuGroupProps;
+}) => {
+  if (group.expandable) {
+    return group.menuGroupProps?.['aria-labelledby'] ?? getExpandableGroupToggleId(group.id);
+  }
+
+  return group.menuGroupProps?.['aria-labelledby'] ?? getStaticMenuLabelId(group);
+};
+
+const getMenuListLabelText = (label: ReactNode) =>
+  typeof label === 'string' || typeof label === 'number' ? String(label) : undefined;
+
+const getMenuListProps = (group: {
+  id: string;
+  label: ReactNode;
+  expandable?: { isExpanded: boolean; onToggle: (isExpanded: boolean) => void };
+  menuGroupProps?: MenuGroupProps;
+  menuListProps?: Omit<MenuListProps, 'children'>;
+}): Omit<MenuListProps, 'children'> => ({
+  ...group.menuListProps,
+  'aria-labelledby': group.menuListProps?.['aria-labelledby'] ?? getMenuListLabelledBy(group)
+});
+
 const focusElementById = (id: string) => {
   document.getElementById(id)?.focus();
 };
@@ -128,7 +157,7 @@ const ShowAllGroupBody: FunctionComponent<ShowAllGroupBodyProps> = ({ group, get
 
   return (
     <>
-      <MenuList {...group.menuListProps}>
+      <MenuList {...getMenuListProps(group)}>
         {alwaysVisibleItems.map((chat) => (
           <Fragment key={chat.id}>{getNavItem(chat)}</Fragment>
         ))}
@@ -212,14 +241,6 @@ const buildConversationMenuSegments = (groups: ConversationGroup[]): Conversatio
     return [...segments, { type: 'static', groups: [group] }];
   }, []);
 
-const getStaticMenuLabelId = (group: ConversationGroup) => group.menuGroupProps?.titleId ?? getGroupLabelId(group.id);
-
-const getStaticMenuLabelledBy = (groups: ConversationGroup[]) =>
-  groups
-    .map((group) => group.menuGroupProps?.['aria-labelledby'] ?? getStaticMenuLabelId(group))
-    .join(' ')
-    .trim();
-
 export interface Conversation {
   /** Conversation id */
   id: string;
@@ -477,7 +498,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
 
     return (
       <>
-        <MenuList {...group.menuListProps}>{renderConversationItems(group.items, group.id)}</MenuList>
+        <MenuList {...getMenuListProps(group)}>
+          {renderConversationItems(group.items, group.id)}
+        </MenuList>
         {group.footer}
       </>
     );
@@ -510,14 +533,13 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     );
   };
 
-  const renderConversationMenu = (labelledBy: string | undefined, content: ReactNode, key?: string) => (
+  const renderConversationMenu = (content: ReactNode, key?: string) => (
     <Menu
       key={key}
       className="pf-chatbot__history-menu"
       isPlain
       onSelect={onSelectActiveItem}
       activeItemId={activeItemId}
-      {...(labelledBy ? { 'aria-labelledby': labelledBy } : {})}
       {...menuProps}
     >
       <MenuContent {...menuContentProps}>{content}</MenuContent>
@@ -527,20 +549,14 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   const renderConversationMenuSegment = (segment: ConversationMenuSegment) => {
     if (segment.type === 'static') {
       return renderConversationMenu(
-        getStaticMenuLabelledBy(segment.groups),
         <>{segment.groups.map(renderConversationGroup)}</>,
         segment.groups.map((group) => group.id).join('-')
       );
     }
 
-    const toggleId = getExpandableGroupToggleId(segment.group.id);
-
     return (
       <ExpandableConversationGroup group={segment.group} key={segment.group.id}>
-        {renderConversationMenu(
-          segment.group.menuGroupProps?.['aria-labelledby'] ?? toggleId,
-          renderGroupBody(segment.group)
-        )}
+        {renderConversationMenu(renderGroupBody(segment.group))}
       </ExpandableConversationGroup>
     );
   };
@@ -567,7 +583,6 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
       }
 
       return renderConversationMenu(
-        undefined,
         <MenuList {...menuListProps}>{renderConversationItems(conversations)}</MenuList>
       );
     }