Fix gr.Dataframe's focus for accessibility

.changeset/tall-items-smile.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:Fix gr.Dataframe's focus for accessibility 

js/dataframe/shared/RowNumber.svelte

@@ -4,15 +4,22 @@
 </script>
 
 {#if is_header}
-	<th tabindex="-1" class="row-number">
+	<th tabindex="-1" class="row-number" role="columnheader" aria-hidden="true">
 		<div class="cell-wrap">
 			<div class="header-content">
 				<div class="header-text"></div>
 			</div>
 		</div>
 	</th>
 {:else}
-	<td class="row-number" tabindex="-1" data-row={index} data-col="row-number">
+	<td
+		class="row-number"
+		tabindex="-1"
+		data-row={index}
+		data-col="row-number"
+		role="rowheader"
+		aria-hidden="true"
+	>
 		{index !== null ? index + 1 : ""}
 	</td>
 {/if}

js/dataframe/shared/Table.svelte

@@ -836,14 +836,9 @@
 		class:no-wrap={!wrap}
 		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
-		on:keydown={(e) => handle_keydown(e, df_ctx)}
-		on:mousemove={handle_mouse_move}
-		on:mouseup={handle_mouse_up}
-		on:mouseleave={handle_mouse_up}
-		role="grid"
-		tabindex="0"
+		role="group"
 	>
-		<table bind:this={table} aria-hidden="true">
+		<table bind:this={table} aria-hidden="true" role="presentation">
 			{#if label && label.length !== 0}
 				<caption class="sr-only">{label}</caption>
 			{/if}
@@ -949,6 +944,11 @@
 					bind:viewport
 					bind:show_scroll_button
 					on:scroll_top={(_) => {}}
+					aria_label={label}
+					on_keydown={(e) => handle_keydown(e, df_ctx)}
+					on_mousemove={handle_mouse_move}
+					on_mouseup={handle_mouse_up}
+					on_mouseleave={handle_mouse_up}
 				>
 					{#if label && label.length !== 0}
 						<caption class="sr-only">{label}</caption>

js/dataframe/shared/TableCell.svelte

@@ -116,6 +116,7 @@
 		active_cell_menu.row === index &&
 		active_cell_menu.col === j}
 	class:dragging={is_dragging}
+	role="gridcell"
 >
 	<div class="cell-wrap">
 		<EditableCell

js/dataframe/shared/TableHeader.svelte

@@ -85,6 +85,7 @@
 		event.stopPropagation();
 	}}
 	title={value}
+	role="columnheader"
 >
 	<div class="cell-wrap">
 		<div class="header-content">

js/dataframe/shared/VirtualTable.svelte

@@ -13,9 +13,15 @@
 	export let disable_scroll = false;
 	export let show_scroll_button = false;
 	export let viewport: HTMLTableElement;
+	export let aria_label: string | null = null;
+	export let on_keydown: ((e: KeyboardEvent) => void) | null = null;
+	export let on_mousemove: ((e: MouseEvent) => void) | null = null;
+	export let on_mouseup: ((e: MouseEvent) => void) | null = null;
+	export let on_mouseleave: ((e: MouseEvent) => void) | null = null;
 
 	const dispatch = createEventDispatcher<{
 		scroll_top: number;
+		mouse_leave: void;
 	}>();
 
 	let height = "100%";
@@ -211,6 +217,16 @@
 			bind:contentRect={viewport_box}
 			on:scroll={refresh_height_map}
 			style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px; --max-height: {max_height}px"
+			role="grid"
+			aria-label={aria_label || undefined}
+			tabindex="0"
+			on:keydown={(e) => on_keydown && on_keydown(e)}
+			on:mousemove={(e) => on_mousemove && on_mousemove(e)}
+			on:mouseup={(e) => on_mouseup && on_mouseup(e)}
+			on:mouseleave={(e) => {
+				on_mouseleave && on_mouseleave(e);
+				dispatch("mouse_leave");
+			}}
 		>
 			<thead class="thead" bind:offsetHeight={head_height}>
 				<slot name="thead" />