Address PR feedback

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/CompactOnboarding.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react';
 import {
   Button,
-  Checkbox,
   SkipToContent,
   MenuToggle,
   MenuToggleElement,
@@ -20,12 +19,10 @@ import {
 } from '@patternfly/react-core';
 import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
-import onboardingHeader from './RH-Hat-Image.svg';
 
 export const OnboardingExample: FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
-  const [hasImage, setHasImage] = useState(true);
   const chatbotRef = useRef<HTMLDivElement>(null);
   const termsRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -85,6 +82,7 @@ export const OnboardingExample: FunctionComponent = () => {
           width: '200px'
         } as CSSProperties
       }
+      aria-label={selected === 'Select display mode' ? 'Select display mode' : `Display mode, ${selected}`}
     >
       {selected}
     </MenuToggle>
@@ -122,15 +120,7 @@ export const OnboardingExample: FunctionComponent = () => {
               <SelectOption value="Embedded">Embedded</SelectOption>
             </SelectList>
           </Select>
-          <Checkbox
-            isChecked={hasImage}
-            aria-label="Toggle whether terms and conditions has a header image"
-            id="toggle-header-image"
-            name="toggle-header-image"
-            label="Has image in header"
-            onChange={(_event, checked) => setHasImage(checked)}
-          ></Checkbox>
-          <Button onClick={handleModalToggle}>Launch modal</Button>
+          <Button onClick={handleModalToggle}>Toggle modal</Button>
         </Stack>
       </div>
       <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible isCompact></Chatbot>
@@ -141,8 +131,6 @@ export const OnboardingExample: FunctionComponent = () => {
         handleModalToggle={handleModalToggle}
         onPrimaryAction={onPrimaryAction}
         onSecondaryAction={onSecondaryAction}
-        image={hasImage ? onboardingHeader : undefined}
-        altText={hasImage ? 'Open book' : undefined}
         title="Redefine work in the age of AI"
         isCompact
       >

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Onboarding.tsx

@@ -85,6 +85,7 @@ export const OnboardingExample: FunctionComponent = () => {
           width: '200px'
         } as CSSProperties
       }
+      aria-label={selected === 'Select display mode' ? 'Select display mode' : `Display mode, ${selected}`}
     >
       {selected}
     </MenuToggle>
@@ -124,13 +125,12 @@ export const OnboardingExample: FunctionComponent = () => {
           </Select>
           <Checkbox
             isChecked={hasImage}
-            aria-label="Toggle whether terms and conditions has a header image"
             id="toggle-header-image"
             name="toggle-header-image"
             label="Has image in header"
             onChange={(_event, checked) => setHasImage(checked)}
           ></Checkbox>
-          <Button onClick={handleModalToggle}>Launch modal</Button>
+          <Button onClick={handleModalToggle}>Toggle modal</Button>
         </Stack>
       </div>
       <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
@@ -141,8 +141,7 @@ export const OnboardingExample: FunctionComponent = () => {
         handleModalToggle={handleModalToggle}
         onPrimaryAction={onPrimaryAction}
         onSecondaryAction={onSecondaryAction}
-        image={hasImage ? onboardingHeader : undefined}
-        altText={hasImage ? 'Open book' : undefined}
+        headerImage={hasImage ? onboardingHeader : undefined}
         title="Redefine work in the age of AI"
       >
         {body}

packages/module/patternfly-docs/generated/patternfly-ai/chatbot/ui/react/compact-onboarding.png

@@ -38,8 +38,8 @@ describe('Onboarding', () => {
         isModalOpen
         onSecondaryAction={onSecondaryAction}
         handleModalToggle={handleModalToggle}
-        image="./image.png"
-        altText="Test image"
+        headerImage="./image.png"
+        headerImageAltText="Test image"
       >
         {body}
       </Onboarding>
@@ -136,8 +136,8 @@ describe('Onboarding', () => {
         onSecondaryAction={onSecondaryAction}
         handleModalToggle={handleModalToggle}
         isCompact={true}
-        image="./image.png"
-        altText="Test image"
+        headerImage="./image.png"
+        headerImageAltText="Test image"
       >
         {body}
       </Onboarding>

packages/module/patternfly-docs/generated/patternfly-ai/chatbot/ui/react/onboarding.png

@@ -27,9 +27,9 @@ export interface OnboardingProps extends ModalProps {
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
   /** Optional image displayed in header */
-  image?: string;
+  headerImage?: string;
   /** Alt text for optional image displayed in header */
-  altText?: string;
+  headerImageAltText?: string;
   /** Ref applied to modal */
   innerRef?: React.Ref<HTMLDivElement>;
   /** OuiaID applied to modal */
@@ -46,8 +46,8 @@ export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
   primaryActionBtn = 'Continue',
   secondaryActionBtn = 'Skip',
   title = 'Onboarding',
-  image,
-  altText,
+  headerImage,
+  headerImageAltText,
   displayMode = ChatbotDisplayMode.default,
   className,
   children,
@@ -80,9 +80,9 @@ export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
       <section className={`pf-chatbot__onboarding--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
         <>
           <ModalBody className="pf-chatbot__onboarding--modal-body">
-            {!isCompact && image && altText && (
+            {!isCompact && headerImage && (
               <div className="pf-chatbot__onboarding--header">
-                <img src={image} className="pf-chatbot__onboarding--image" alt={altText} />
+                <img src={headerImage} className="pf-chatbot__onboarding--image" alt={headerImageAltText} />
               </div>
             )}
             <div className="pf-chatbot__onboarding--modal-text">