chore(docs): For fullscreen and embedded, change focus

For fullscreen and embedded, put focus on first element in section instead

Author: rebeccaalpert

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

@@ -171,6 +171,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const chatbotRef = React.useRef<HTMLDivElement>(null);
+  const historyRef = React.useRef<HTMLButtonElement>(null);
 
   // Autu-scrolls to the latest message
   React.useEffect(() => {
@@ -285,18 +286,29 @@ export const ChatbotDemo: React.FunctionComponent = () => {
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
-    if (displayMode === ChatbotDisplayMode.default) {
-      if (!chatbotVisible && toggleRef.current) {
-        toggleRef.current.focus();
-      }
-      if (chatbotVisible && chatbotRef.current) {
-        chatbotRef.current.focus();
-      }
-    } else {
-      if (chatbotRef.current) {
-        chatbotRef.current.focus();
-      }
+    /* eslint-disable indent */
+    switch (displayMode) {
+      case ChatbotDisplayMode.default:
+        if (!chatbotVisible && toggleRef.current) {
+          toggleRef.current.focus();
+        }
+        if (chatbotVisible && chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+
+      case ChatbotDisplayMode.docked:
+        if (chatbotRef.current) {
+          chatbotRef.current.focus();
+        }
+        break;
+      default:
+        if (historyRef.current) {
+          historyRef.current.focus();
+        }
+        break;
     }
+    /* eslint-enable indent */
   };
 
   return (
@@ -342,7 +354,11 @@ export const ChatbotDemo: React.FunctionComponent = () => {
             <>
               <ChatbotHeader>
                 <ChatbotHeaderMain>
-                  <ChatbotHeaderMenu aria-expanded={isDrawerOpen} onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)} />
+                  <ChatbotHeaderMenu
+                    ref={historyRef}
+                    aria-expanded={isDrawerOpen}
+                    onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+                  />
                   <ChatbotHeaderTitle
                     displayMode={displayMode}
                     showOnFullScreen={horizontalLogo}

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

@@ -176,7 +176,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
   const [announcement, setAnnouncement] = React.useState<string>();
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
+  const historyRef = React.useRef<HTMLButtonElement>(null);
 
   const displayMode = ChatbotDisplayMode.embedded;
   // Autu-scrolls to the latest message
@@ -307,7 +307,9 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
 
   const skipToChatbot = (event: React.MouseEvent) => {
     event.preventDefault();
-    chatbotRef.current?.focus();
+    if (historyRef.current) {
+      historyRef.current.focus();
+    }
   };
 
   const skipToContent = (
@@ -319,7 +321,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
 
   return (
     <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>
-      <Chatbot displayMode={displayMode} ref={chatbotRef}>
+      <Chatbot displayMode={displayMode}>
         <ChatbotConversationHistoryNav
           displayMode={displayMode}
           onDrawerToggle={() => {
@@ -350,7 +352,11 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
             <>
               <ChatbotHeader>
                 <ChatbotHeaderMain>
-                  <ChatbotHeaderMenu aria-expanded={isDrawerOpen} onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)} />
+                  <ChatbotHeaderMenu
+                    ref={historyRef}
+                    aria-expanded={isDrawerOpen}
+                    onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+                  />
                   <ChatbotHeaderTitle>{horizontalLogo}</ChatbotHeaderTitle>
                 </ChatbotHeaderMain>
                 <ChatbotHeaderActions>

packages/module/src/Chatbot/Chatbot.tsx

@@ -15,6 +15,8 @@ export interface ChatbotProps {
   className?: string;
   /** Ref applied to chatbot  */
   innerRef?: React.Ref<HTMLDivElement>;
+  /** Custom aria label applied to focusable container */
+  ariaLabel?: string;
 }
 
 export enum ChatbotDisplayMode {
@@ -30,6 +32,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   isVisible = true,
   className,
   innerRef,
+  ariaLabel,
   ...props
 }: ChatbotProps) => {
   // Configure docked mode
@@ -59,7 +62,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
       {/* Motion.div does not accept refs */}
       {isVisible ? (
         <section
-          aria-label={props['aria-label'] ?? 'Chatbot'}
+          aria-label={ariaLabel ?? 'Chatbot'}
           className={`pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`}
           tabIndex={-1}
           ref={innerRef}

packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -12,13 +12,16 @@ export interface ChatbotHeaderMenuProps {
   tooltipProps?: TooltipProps;
   /** Aria label for menu */
   menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
 }
 
-export const ChatbotHeaderMenu: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
+const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
-  menuAriaLabel = 'Toggle menu'
+  menuAriaLabel = 'Toggle menu',
+  innerRef
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
     <Tooltip content="Menu" position="bottom" {...tooltipProps}>
@@ -27,6 +30,7 @@ export const ChatbotHeaderMenu: React.FunctionComponent<ChatbotHeaderMenuProps>
         variant="plain"
         onClick={onMenuToggle}
         aria-label={menuAriaLabel}
+        ref={innerRef}
         icon={
           <Icon size="xl" isInline>
             <BarsIcon />
@@ -37,4 +41,8 @@ export const ChatbotHeaderMenu: React.FunctionComponent<ChatbotHeaderMenuProps>
   </div>
 );
 
-export default ChatbotHeaderMenu;
+export const ChatbotHeaderMenu = React.forwardRef(
+  (props: ChatbotHeaderMenuProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+  )
+);