fix(JumpButton): Back to bottom a11y (#865)

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

Assisted-by: Cursor

Author: rebeccaalpert

.github/workflows/build-lint-test.yml

@@ -156,6 +156,6 @@ jobs:
       - name: Build docs
         run: npm run build:docs
       - name: Install Chrome for Puppeteer
-        run: npx puppeteer browsers install chrome
+        run: npm exec -w packages/module -- puppeteer browsers install chrome
       - name: A11y tests
         run: npm run serve:docs & npm run test:a11y

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

@@ -18,7 +18,7 @@ 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 be hidden if isHidden prop is used', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
     expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });

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.queryByRole('button', { name: /Back to top/i })).toBeFalsy();
+      expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
+    });
+  });
+
+  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 })).toBeTruthy();
+      expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
+    });
+  });
 });