Address feedback

Author: rebeccaalpert

packages/module/src/MessageBox/JumpButton.scss

@@ -44,28 +44,6 @@
     inset-block-end: var(--pf-t--global--spacer--md) !important;
   }
 
-  // inclusively hidden: stay in tab order but reveal on keyboard focus
-  // https://css-tricks.com/inclusively-hidden/
-  &--hidden:not(:focus):not(:focus-visible):not(:active) {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px !important;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 1px !important;
-  }
-
-  &--hidden:focus,
-  &--hidden:focus-visible,
-  &--hidden:active {
-    clip: auto;
-    clip-path: none;
-    height: 2rem !important;
-    overflow: visible;
-    white-space: normal;
-    width: 2rem !important;
-  }
-
   // allows for zoom conditions; try zooming to 200% to see
   @media screen and (max-height: 518px) {
     display: none;

packages/module/src/MessageBox/JumpButton.test.tsx

@@ -18,17 +18,8 @@ describe('JumpButton', () => {
     await userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
-  it('should remain in the DOM but visually hidden when isHidden is used', () => {
+  it('should be hidden if isHidden prop is used', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    const button = screen.getByRole('button', { name: /Back to bottom/i });
-    expect(button).toHaveClass('pf-chatbot__jump--hidden');
-  });
-
-  it('should become visible when focused while hidden', () => {
-    render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    const button = screen.getByRole('button', { name: /Back to bottom/i });
-    button.focus();
-    expect(button).toHaveFocus();
-    expect(button).toHaveClass('pf-chatbot__jump--hidden');
+    expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });
 });

packages/module/src/MessageBox/JumpButton.tsx

@@ -28,25 +28,26 @@ const JumpButton: FunctionComponent<JumpButtonProps> = ({
   onClick,
   jumpButtonProps,
   jumpButtonTooltipProps
-}: JumpButtonProps) => (
-  <Tooltip
-    id={`pf-chatbot__tooltip--jump-${position}`}
-    content={`Back to ${position}`}
-    position="top"
-    {...jumpButtonTooltipProps}
-  >
-    <Button
-      variant="plain"
-      className={`pf-chatbot__jump pf-chatbot__jump--${position} ${isHidden ? 'pf-chatbot__jump--hidden' : ''}`}
-      aria-label={`Back to ${position}`}
-      onClick={onClick}
-      {...jumpButtonProps}
+}: JumpButtonProps) =>
+  isHidden ? null : (
+    <Tooltip
+      id={`pf-chatbot__tooltip--jump-${position}`}
+      content={`Back to ${position}`}
+      position="top"
+      {...jumpButtonTooltipProps}
     >
-      <Icon iconSize="lg" isInline>
-        {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
-      </Icon>
-    </Button>
-  </Tooltip>
-);
+      <Button
+        variant="plain"
+        className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
+        aria-label={`Back to ${position}`}
+        onClick={onClick}
+        {...jumpButtonProps}
+      >
+        <Icon iconSize="lg" isInline>
+          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </Icon>
+      </Button>
+    </Tooltip>
+  );
 
 export default JumpButton;

packages/module/src/MessageBox/MessageBox.test.tsx

@@ -378,8 +378,8 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Back to top/i })).toHaveClass('pf-chatbot__jump--hidden');
-      expect(screen.getByRole('button', { name: /Back to bottom/i })).not.toHaveClass('pf-chatbot__jump--hidden');
+      expect(screen.queryByRole('button', { name: /Back to top/i })).toBeFalsy();
+      expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
     });
   });
 
@@ -400,8 +400,8 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Back to top/i })).not.toHaveClass('pf-chatbot__jump--hidden');
-      expect(screen.getByRole('button', { name: /Back to bottom/i })).toHaveClass('pf-chatbot__jump--hidden');
+      expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
+      expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
     });
   });
 });

packages/module/src/MessageBox/MessageBox.tsx

@@ -166,6 +166,10 @@ export const MessageBox = forwardRef(
       );
       setIsOverflowing(metrics.isOverflowing);
 
+      if (isAtBottom) {
+        programmaticScrollRef.current = false;
+      }
+
       if (!enableSmartScroll || scrollQueued.current) {
         return;
       }
@@ -178,10 +182,6 @@ export const MessageBox = forwardRef(
         clearTimeout(debounceTimeout.current);
       }
 
-      if (isAtBottom) {
-        programmaticScrollRef.current = false;
-      }
-
       if (!isAtBottom && !metrics.nearBottom && !pauseAutoScrollRef.current && !programmaticScrollRef.current) {
         setAutoScroll(false);
       }