#5621 [a11y] ResizableTableContainer: focused row obscured by table header with position: sticky (#5622)

Author: Michael Jordan

examples/rac-tailwind/src/App.js

@@ -419,7 +419,7 @@ function DatePickerExample() {
 function ContactListExample() {
   return (
     <div className="bg-gradient-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pt-6">
+      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
         <ContactSection title="Favorites">
           <Contact id="wade" name="Tony Baldwin" handle="@tony" avatar="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
           <Contact id="arelene" name="Julienne Langstrath" handle="@jlangstrath" avatar="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
@@ -499,7 +499,7 @@ function TableExample() {
 
   return (
     <div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
-      <div className="max-h-[280px] overflow-auto relative bg-white rounded-lg shadow text-gray-600">
+      <div className="max-h-[280px] overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow text-gray-600">
         <Table aria-label="Stocks" selectionMode="single" selectionBehavior="replace" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor} className="border-separate border-spacing-0">
           <TableHeader>
             <StockColumn id="symbol" allowsSorting>Symbol</StockColumn>

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -252,7 +252,7 @@ export function ExampleApp() {
           )}
         </GridList>
       }
-      {!isSmall && <ResizableTableContainer className="flex-1 w-full overflow-auto relative border dark:border-zinc-700 rounded-lg" onScroll={onScroll}>
+      {!isSmall && <ResizableTableContainer className="flex-1 w-full overflow-auto scroll-pt-[2.281rem] relative border dark:border-zinc-700 rounded-lg" onScroll={onScroll}>
         <Table aria-label="My plants" selectionMode="multiple" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}>
           <TableHeader columns={columns}>
             {column => <Column {...column} />}

packages/react-aria-components/docs/examples/contact-list.mdx

@@ -112,7 +112,7 @@ import {ListBox, ListBoxItem, Section, Header, Collection, Text} from 'react-ari
 function ContactListExample() {
   return (
     <div className="bg-gradient-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pt-6">
+      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
         <ContactSection title="Favorites" items={favorites}>
           {item => <Contact item={item} />}
         </ContactSection>

packages/react-aria-components/docs/examples/stock-table.mdx

@@ -106,7 +106,7 @@ function StockTableExample() {
 
   return (
     <div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
-      <ResizableTableContainer className="max-h-[280px] w-full overflow-auto relative bg-white rounded-lg shadow text-gray-600">
+      <ResizableTableContainer className="max-h-[280px] w-full overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow text-gray-600">
         <Table aria-label="Stocks" selectionMode="multiple" selectionBehavior="replace" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor} className="border-separate border-spacing-0">
           <TableHeader>
             <StockColumn id="symbol" allowsSorting>Symbol</StockColumn>

starters/tailwind/src/Table.tsx

@@ -25,7 +25,7 @@ import {focusRing} from './utils';
 
 export function Table(props: TableProps) {
   return (
-    <ResizableTableContainer className="max-h-[280px] w-[550px] overflow-auto relative border dark:border-zinc-600 rounded-lg">
+    <ResizableTableContainer className="max-h-[280px] w-[550px] overflow-auto scroll-pt-[2.281rem] scroll-pt-[2.281rem] relative border dark:border-zinc-600 rounded-lg">
       <AriaTable {...props} className="border-separate border-spacing-0" />
     </ResizableTableContainer>
   );