Reset data-table paging when panel collapses

Reset the visible row count to the sample size whenever the data-summary panel collapses to avoid re-rendering large row sets on reopen. Added useEffect hooks in AccessibleDataTable and NetworkAccessibleDataTable to reset visibleCount when isExpanded becomes false, and removed redundant setVisibleCount calls from dismiss. Added a test to verify paging resets after collapsing and reopened. Also fixed a docs comment ("sales" -> "revenue").

Author: emeeks

docs/src/pages/features/AccessibilityPage.js

@@ -251,7 +251,7 @@ export default function AccessibilityPage() {
 </ChartContainer>
 
 // The summary shows:
-// "72 data points. month: 1 to 12, mean 6.5. sales: 12000 to 27000, mean 18500."
+// "72 data points. month: 1 to 12, mean 6.5. revenue: 12000 to 27000, mean 18500."
 // + a sample table of the real data values, pageable to all 72 rows
 
 // For screen readers, the summary is always available via a hidden button

src/components/stream/AccessibleDataTable.test.tsx

@@ -211,6 +211,18 @@ describe("AccessibleDataTable — focus & pagination", () => {
     // No further "Show more" once everything is shown.
     expect(screen.queryByRole("button", { name: /show .* more/i })).toBeNull()
   })
+
+  it("resets paging back to the initial sample after the panel collapses", () => {
+    render(<AccessibleDataTable tableId="t4" chartType="line chart" scene={lineScene(40)} />)
+    fireEvent.click(screen.getByRole("button", { name: /view data summary/i }))
+    fireEvent.click(screen.getByRole("button", { name: /show .* more rows/i }))
+    expect(screen.getAllByRole("row")).toHaveLength(30 + 1)
+
+    // Collapse, then reopen — must be back to the bounded 5-row sample, not 30.
+    fireEvent.click(screen.getByRole("button", { name: /close data summary/i }))
+    fireEvent.click(screen.getByRole("button", { name: /view data summary/i }))
+    expect(screen.getAllByRole("row")).toHaveLength(5 + 1)
+  })
 })
 
 // ── extractAllRows logic ────────────────────────────────────────────────

src/components/stream/AccessibleDataTable.tsx

@@ -413,6 +413,13 @@ export function AccessibleDataTable({ scene, chartType, tableId, chartTitle }: A
   const containerRef = React.useRef<HTMLDivElement>(null)
   const regionLabel = chartTitle ? `Data summary for ${chartTitle}` : tableId ? `Data summary for ${chartType} ${tableId}` : `Data summary for ${chartType}`
 
+  // Reset paging whenever the panel collapses — via the close button, a blur in
+  // sr-only mode, or ChartContainer toggling visibility off — so reopening never
+  // re-renders the full (potentially huge) row set at once.
+  React.useEffect(() => {
+    if (!isExpanded) setVisibleCount(SAMPLE_SIZE)
+  }, [isExpanded])
+
   // Expand only when focus lands on the region container itself (the skip-link
   // path programmatically focuses it). Focus bubbling up from the inner trigger
   // button must NOT auto-expand — otherwise merely tabbing onto the button
@@ -463,7 +470,7 @@ export function AccessibleDataTable({ scene, chartType, tableId, chartTitle }: A
   const dismiss = () => {
     if (visible && dataSummary) dataSummary.setVisible(false)
     setSrExpanded(false)
-    setVisibleCount(SAMPLE_SIZE)
+    // visibleCount resets via the collapse effect above.
   }
 
   const showMore = () => setVisibleCount((c) => c + PAGE_SIZE)
@@ -526,6 +533,12 @@ export function NetworkAccessibleDataTable({ nodes, edges, chartType, tableId, c
   const regionLabel = chartTitle ? `Data summary for ${chartTitle}` : tableId ? `Data summary for ${chartType} ${tableId}` : `Data summary for ${chartType}`
   const containerRef = React.useRef<HTMLDivElement>(null)
 
+  // Reset paging on any collapse path (close button, blur, ChartContainer
+  // toggle) so reopening never re-renders the full node set at once.
+  React.useEffect(() => {
+    if (!isExpanded) setVisibleCount(SAMPLE_SIZE)
+  }, [isExpanded])
+
   // Only the skip-link path (which focuses the region container itself) auto-
   // expands; focus bubbling from the inner trigger button must not. See the
   // matching note in AccessibleDataTable.
@@ -629,7 +642,7 @@ export function NetworkAccessibleDataTable({ nodes, edges, chartType, tableId, c
   const dismiss = () => {
     if (visible && dataSummary) dataSummary.setVisible(false)
     setSrExpanded(false)
-    setVisibleCount(SAMPLE_SIZE)
+    // visibleCount resets via the collapse effect above.
   }
 
   const showMore = () => setVisibleCount((c) => c + PAGE_SIZE)