Merge pull request #231 from rebeccaalpert/a11y-dropdowns

fix(ChatbotHeaderSelectorDropdown/ChatbotHeaderOptionsDropdown): Should be keyboard navigable

Author: nicolethoen

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotHeaderDrawer.tsx

@@ -70,6 +70,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
         isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
         // eslint-disable-next-line no-console
         onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
         conversations={conversations}

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotHeaderDrawerInHeader.tsx

@@ -47,6 +47,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
       displayMode={displayMode}
       onDrawerToggle={() => setIsOpen(!isOpen)}
       isDrawerOpen={isOpen}
+      setIsDrawerOpen={setIsOpen}
       conversations={conversations}
       drawerContent={
         <ChatbotHeader>

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotConversationHistoryNav/ChatbotHeaderDrawerWithActions.tsx

@@ -66,6 +66,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         displayMode={displayMode}
         onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
         isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
         conversations={conversations}
         drawerContent={<div>Drawer content</div>}
       />

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.tsx

@@ -296,6 +296,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
             setConversations(initialConversations);
           }}
           isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
           activeItemId="1"
           // eslint-disable-next-line no-console
           onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/EmbeddedChatbot.tsx

@@ -312,6 +312,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
             setConversations(initialConversations);
           }}
           isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
           activeItemId="1"
           // eslint-disable-next-line no-console
           onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -50,6 +50,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   /** Flag to indicate whether drawer is open */
   isDrawerOpen: boolean;
+  /** Function called to close drawer */
+  setIsDrawerOpen: (bool: boolean) => void;
   /* itemId of the currently active item. */
   activeItemId?: string | number;
   /** Callback function for when an item is selected */
@@ -75,6 +77,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
   onDrawerToggle,
   isDrawerOpen,
+  setIsDrawerOpen,
   activeItemId,
   onSelectActiveItem,
   conversations,
@@ -180,15 +183,13 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   // the drawer panel and deactivating the focus trap via the Escape key.
   const onEscape = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
-      onDrawerToggle(event);
+      // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
+      if ('type' in event.target && event.target.type !== 'button') {
+        setIsDrawerOpen(false);
+      }
     }
   };
 
-  // Prevent 'Escape' key usage in main chatbot from toggling drawer; only panel content should work
-  const onChildKeyDown = (event: React.KeyboardEvent) => {
-    event.stopPropagation();
-  };
-
   return (
     <Drawer
       className="pf-chatbot__history"
@@ -200,7 +201,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       {...props}
     >
       <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody onKeyDown={onChildKeyDown}>
+        <DrawerContentBody>
           {isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? (
             <>
               <div className="pf-v6-c-backdrop pf-chatbot__drawer-backdrop"></div>

packages/module/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -59,9 +59,9 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
         setIsOptionsMenuOpen(false);
       }}
       onOpenChange={(isOpen) => setIsOptionsMenuOpen(isOpen)}
-      popperProps={{ position: 'right', preventOverflow: true }}
+      popperProps={{ position: 'right', preventOverflow: true, appendTo: 'inline' }}
       shouldFocusToggleOnSelect
-      shouldFocusFirstItemOnOpen={false}
+      shouldFocusFirstItemOnOpen
       toggle={toggle}
       {...props}
     >

packages/module/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -49,9 +49,9 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         setIsOptionsMenuOpen(false);
       }}
       onOpenChange={(isOpen) => setIsOptionsMenuOpen(isOpen)}
-      popperProps={{ position: 'right' }}
+      popperProps={{ position: 'right', appendTo: 'inline' }}
       shouldFocusToggleOnSelect
-      shouldFocusFirstItemOnOpen={false}
+      shouldFocusFirstItemOnOpen
       toggle={toggle}
       {...props}
     >