Address Eric's feedback

Author: rebeccaalpert

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

@@ -170,6 +170,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
   const [announcement, setAnnouncement] = React.useState<string>();
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const chatbotRef = React.useRef<HTMLDivElement>(null);
 
   // Autu-scrolls to the latest message
   React.useEffect(() => {
@@ -284,8 +285,14 @@ export const ChatbotDemo: React.FunctionComponent = () => {
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
-    if (toggleRef.current) {
-      toggleRef.current.focus();
+    if (displayMode === ChatbotDisplayMode.default) {
+      if (toggleRef.current) {
+        toggleRef.current.focus();
+      }
+    } else {
+      if (chatbotRef.current) {
+        chatbotRef.current.focus();
+      }
     }
   };
 
@@ -301,7 +308,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         id="chatbot-toggle"
         ref={toggleRef}
       />
-      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
         <ChatbotConversationHistoryNav
           displayMode={displayMode}
           onDrawerToggle={() => {

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

@@ -319,7 +319,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
 
   return (
     <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>
-      <Chatbot displayMode={displayMode}>
+      <Chatbot displayMode={displayMode} ref={chatbotRef}>
         <ChatbotConversationHistoryNav
           displayMode={displayMode}
           onDrawerToggle={() => {
@@ -372,7 +372,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
               <ChatbotContent>
                 {/* Update the announcement prop on MessageBox whenever a new message is sent
                  so that users of assistive devices receive sufficient context  */}
-                <MessageBox announcement={announcement} ref={chatbotRef}>
+                <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
                     title="Hello, Chatbot User"
                     description="How may I help you today?"

packages/module/src/Chatbot/Chatbot.scss

@@ -64,3 +64,14 @@ html.pf-chatbot-allow--docked {
   border-radius: 0;
   box-shadow: none;
 }
+
+.pf-chatbot-container--embedded {
+  min-height: 100%;
+}
+
+.pf-chatbot-container {
+  // Hide chatbot
+  &--hidden {
+    pointer-events: none;
+  }
+}

packages/module/src/Chatbot/Chatbot.tsx

@@ -13,6 +13,8 @@ export interface ChatbotProps {
   isVisible?: boolean;
   /** Custom classname for the Chatbot component */
   className?: string;
+  /** Ref applied to chatbot  */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
 export enum ChatbotDisplayMode {
@@ -22,11 +24,12 @@ export enum ChatbotDisplayMode {
   fullscreen = 'fullscreen'
 }
 
-export const Chatbot: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
   className,
+  innerRef,
   ...props
 }: ChatbotProps) => {
   // Configure docked mode
@@ -52,9 +55,25 @@ export const Chatbot: React.FunctionComponent<ChatbotProps> = ({
       animate={isVisible ? 'visible' : 'hidden'}
       {...props}
     >
-      {isVisible ? children : undefined}
+      {/* Ref is intended for use with skip to chatbot links, etc. */}
+      {/* Motion.div does not accept refs */}
+      {isVisible ? (
+        <div
+          role="region"
+          aria-label={props['aria-label'] ?? 'Chatbot'}
+          className={`pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`}
+          tabIndex={0}
+          ref={innerRef}
+        >
+          {children}
+        </div>
+      ) : undefined}
     </motion.div>
   );
 };
 
+const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+  <ChatbotBase innerRef={ref} {...props} />
+));
+
 export default Chatbot;