test: cover pinned scrollbar aria-controls across an unpin/re-pin cycle

The unit test drives the remount directly against PinnedScrollbar. Exercise
the same path through DataTable's public API, where unpinning every column
drops hasPinnedColumns and re-pinning mounts a fresh scrollbar over the
wrapper the previous mount already labelled.

Author: askalf

src/__tests__/pinning.test.tsx

@@ -101,6 +101,32 @@ describe('DataTable column pinning', () => {
 		expect(offsets).toContain(0);
 		expect(offsets.some(v => v > 0)).toBe(true);
 	});
+
+	test('pinned scrollbar aria-controls still resolves after a column is unpinned and re-pinned', async () => {
+		const unpinnedCols: TableColumn<Row>[] = columns.map(c => ({ ...c, pinned: undefined }));
+		const { container, rerender } = render(<DataTable columns={columns} data={data} responsive />);
+
+		const wrapper = container.querySelector('.rdt_responsiveWrapper') as HTMLElement;
+		Object.defineProperty(wrapper, 'scrollWidth', { configurable: true, get: () => 1000 });
+		Object.defineProperty(wrapper, 'clientWidth', { configurable: true, get: () => 400 });
+		await act(async () => {
+			wrapper.dispatchEvent(new Event('scroll'));
+		});
+
+		// Unpinning every column drops hasPinnedColumns, which unmounts the
+		// scrollbar; re-pinning mounts a fresh one with a new useId, while the
+		// wrapper keeps the id the first mount stamped on it.
+		rerender(<DataTable columns={unpinnedCols} data={data} responsive />);
+		rerender(<DataTable columns={columns} data={data} responsive />);
+		await act(async () => {
+			wrapper.dispatchEvent(new Event('scroll'));
+		});
+
+		const thumb = container.querySelector('.rdt_pinnedScrollbarThumb') as HTMLElement;
+		const controls = thumb.getAttribute('aria-controls');
+		expect(controls).toBe(wrapper.id);
+		expect(document.getElementById(controls!)).toBe(wrapper);
+	});
 });
 
 // ── PinnedScrollbar ──────────────────────────────────────────────────────────

src/components/PinnedScrollbar.tsx

@@ -13,9 +13,6 @@ export default function PinnedScrollbar({
 	rightInset,
 }: PinnedScrollbarProps): JSX.Element | null {
 	const scrollContainerId = React.useId();
-	// The id the thumb points at. Only equals scrollContainerId when this
-	// component is the one that labelled the container — see the sync effect.
-	const [controlsId, setControlsId] = React.useState(scrollContainerId);
 	const trackRef = React.useRef<HTMLDivElement>(null);
 	const thumbRef = React.useRef<HTMLDivElement>(null);
 	const [thumbWidth, setThumbWidth] = React.useState(0);
@@ -65,11 +62,6 @@ export default function PinnedScrollbar({
 		if (!el.id) {
 			el.id = scrollContainerId;
 		}
-		// The container keeps whatever id it already had — a host-supplied one, or
-		// one left behind by a previous mount (useId hands out a fresh value each
-		// time). Point aria-controls at the id that is actually on the element, or
-		// it dangles and assistive tech can't resolve the scrollbar's target.
-		setControlsId(el.id);
 		el.addEventListener('scroll', update, { passive: true });
 		const ro = new ResizeObserver(update);
 		ro.observe(el);
@@ -199,7 +191,7 @@ export default function PinnedScrollbar({
 				ref={thumbRef}
 				role="scrollbar"
 				tabIndex={0}
-				aria-controls={controlsId}
+				aria-controls={scrollContainerId}
 				aria-orientation="horizontal"
 				aria-valuenow={scrollPercent}
 				aria-valuemin={0}