fix(JumpButton): Back to bottom a11y

Users should be able to tab to both buttons. Both should perform well in auto-scroll and normal usage.

Assisted-by: Cursor

Author: rebeccaalpert

packages/module/src/MessageBox/JumpButton.scss

@@ -44,6 +44,7 @@
     inset-block-end: var(--pf-t--global--spacer--md) !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,8 +18,17 @@ describe('JumpButton', () => {
     await userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
-  it('should be hidden if isHidden prop is used', async () => {
+  it('should remain in the DOM but visually hidden when isHidden is used', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
+    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');
   });
 });

packages/module/src/MessageBox/JumpButton.tsx

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

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

@@ -1,5 +1,6 @@
 import { createRef } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { MessageBox, MessageBoxHandle } from './MessageBox';
 import userEvent from '@testing-library/user-event';
 
@@ -313,4 +314,94 @@ describe('MessageBox', () => {
 
     expect(ref.current?.isSmartScrollActive()).toBe(true);
   });
+
+  it('should keep auto-scroll active during programmatic scroll to bottom', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(element, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      ref.current?.scrollToBottom({ behavior: 'smooth' });
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+
+    act(() => {
+      element.scrollTop = 500;
+      element.dispatchEvent(new Event('scroll', { bubbles: true }));
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
+
+  it('should not scroll to bottom on initial layout when the message box is at the top', () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Tall message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(region.scrollTop).toBe(0);
+  });
+
+  it('should show the bottom jump button at the top on initial load when overflowing', async () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Tall message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    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');
+    });
+  });
+
+  it('should hide the bottom jump button while smart scroll is actively following content', async () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 640, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    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');
+    });
+  });
 });