Merge pull request #228 from rebeccaalpert/a11y-214

fix(Chatbot/JumpButton): Remove content from DOM when not visible
patternfly · Oct 14, 2024 · 4bdcd2c · 4bdcd2c
2 parents 6652dc8 + 59cd014
commit 4bdcd2c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/packages/module/src/Chatbot/Chatbot.tsx b/packages/module/src/Chatbot/Chatbot.tsx
@@ -50,7 +50,7 @@ export const Chatbot: React.FunctionComponent<ChatbotProps> = ({
       initial="hidden"
       animate={isVisible ? 'visible' : 'hidden'}
     >
-      {children}
+      {isVisible ? children : undefined}
     </motion.div>
   );
 };

diff --git a/packages/module/src/MessageBox/JumpButton.tsx b/packages/module/src/MessageBox/JumpButton.tsx
@@ -18,20 +18,21 @@ export interface JumpButtonProps {
   isHidden?: boolean;
 }
 
-const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) => (
-  <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
-    <Button
-      variant="plain"
-      className={`pf-chatbot__jump pf-chatbot__jump--${position} ${isHidden && `pf-chatbot__jump--${position}--hidden`}`}
-      aria-label={`Jump ${position} button`}
-      aria-describedby={`pf-chatbot__tooltip--jump-${position}`}
-      onClick={onClick}
-    >
-      <Icon iconSize="xl" isInline>
-        {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
-      </Icon>
-    </Button>
-  </Tooltip>
-);
+const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+  isHidden ? undefined : (
+    <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
+      <Button
+        variant="plain"
+        className={`pf-chatbot__jump pf-chatbot__jump--${position} ${isHidden && `pf-chatbot__jump--${position}--hidden`}`}
+        aria-label={`Jump ${position} button`}
+        aria-describedby={`pf-chatbot__tooltip--jump-${position}`}
+        onClick={onClick}
+      >
+        <Icon iconSize="xl" isInline>
+          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </Icon>
+      </Button>
+    </Tooltip>
+  );
 
 export default JumpButton;