Fix Dataframe whole-table keyboard focus

.changeset/fuzzy-tables-focus.md

@@ -0,0 +1,7 @@
+---
+"@gradio/dataframe": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+Prevent Dataframe container elements from adding whole-table stops to keyboard navigation.

js/dataframe/Dataframe.test.ts

@@ -6,6 +6,7 @@ import {
 	waitFor,
 	within
 } from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 import { tick } from "svelte";
 
 import Dataframe from "./Index.svelte";
@@ -37,6 +38,15 @@ const default_props = {
 	max_height: 500
 };
 
+run_shared_prop_tests({
+	component: Dataframe,
+	name: "Dataframe",
+	base_props: default_props,
+	// Dataframe renders visible and screen-reader label copies; targeted tests below cover its label behavior.
+	has_label: false,
+	has_validation_error: false
+});
+
 function get_cell(container: HTMLElement, row: number, col: number) {
 	return container.querySelector(
 		`[data-row='${row}'][data-col='${col}']`
@@ -64,6 +74,27 @@ async function wait(ms = 50) {
 describe("Dataframe rendering", () => {
 	afterEach(() => cleanup());
 
+	test("tabbing skips dataframe containers and reaches individual cells", async () => {
+		const { getAllByRole, getByRole } = await render(Dataframe, default_props);
+
+		await waitFor(() => {
+			expect(getByRole("button", { name: "Alice" })).toBeVisible();
+		});
+
+		expect(getAllByRole("grid").every((grid) => grid.tabIndex === -1)).toBe(
+			true
+		);
+		expect(
+			getByRole("button", {
+				name: "dataframe.drop_to_upload"
+			})
+		).toHaveAttribute("tabindex", "-1");
+		expect(getByRole("button", { name: "Alice" })).toHaveAttribute(
+			"tabindex",
+			"0"
+		);
+	});
+
 	test("renders provided headers", async () => {
 		const { container } = await render(Dataframe, default_props);
 		await wait();

js/dataframe/shared/Table.svelte

@@ -947,7 +947,7 @@
 		class:menu-open={active_cell_menu || active_header_menu}
 		onkeydown={handle_keydown}
 		role="grid"
-		tabindex="0"
+		tabindex="-1"
 		style="--df-max-col-width: {viewport_width}px;"
 	>
 		<Upload

js/upload/src/Upload.svelte

@@ -308,7 +308,7 @@
 					? height + "px"
 					: height
 				: "100%"}
-		tabindex={hidden ? -1 : 0}
+		tabindex={hidden || disable_click ? -1 : 0}
 		use:drag={{
 			on_drag_change: (d) => (dragging = d),
 			on_files: (files) => load_files_from_upload(files),