[a11y] ResizableTableContainer: focused row obscured by table header with position: sticky

[majornista]

Provide a general summary of the issue here

When a table within a ResizableTableContainer is scrolled, and its thead has position: sticky, when a row receives focus, it can be obscured by the sticky header.

🤔 Expected Behavior?

Focused elements should not be obscured by other content. See https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum

😯 Current Behavior

The RAC table example has a fixed header that can obscure focused content in the row, when the table is scrolled.

💁 Possible Solution

Use scroll-padding to fix the issue with CSS, or with JavaScript, add a listener as follows:

// Ensure that the row containing focus is not obscured by a thead with position: sticky.
  const onFocusCapture = useCallback((e: React.FocusEvent<HTMLDivElement>) => {
    const target = e.target as HTMLElement;
    const {scrollTop, scrollLeft} = e.currentTarget;
    const row = target.tagName === 'TR' || target.getAttribute('role') === 'row' ? target : target.closest('tr, [role="row"]') as HTMLElement;
    const thead = target.closest('table, [role="grid"], [role="table"]').querySelector('thead, [role="rowgroup"]') as HTMLElement;
    const top = row.offsetTop - thead.offsetHeight;
    if (
      scrollTop > top &&
      getComputedStyle(thead).position === 'sticky'
    ) {
      e.currentTarget.scrollTo({
        top,
        left: scrollLeft,
        behavior: 'smooth'
      });
    }
  }, []);

to the ResizableTableContainer at https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Table.tsx#L211-L245

🔦 Context

No response

🖥️ Steps to Reproduce

Open https://react-spectrum.adobe.com/react-aria/

1. Navigate to the Example App
2. Scroll the Table
3. Tab or use arrow keys to focus rows or cells within the table
4. Notice that focused content can become obscured by the sticky thead.

Screen.Recording.2023-12-21.at.12.05.00.PM.mov

Version

RAC 1.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

Adobe/Accessibility

🕷 Tracking Issue

No response