@gradio/dataframe 0.24.3 → 0.24.4

package/dist/shared/DataCell.svelte

@@ -11,9 +11,12 @@
 		datatype = "str",
 		row_idx,
 		col_idx,
+		aria_col_index = col_idx + 1,
 		col_style = "",
 		cell_style = "",
 		selection_classes = "",
+		is_active = false,
+		aria_row_index,
 		is_editing = false,
 		is_flash = false,
 		is_static = false,
@@ -32,6 +35,7 @@
 		onmousedown,
 		ondblclick,
 		oncontextmenu,
+		onfocus,
 		onblur,
 		on_menu_click,
 		on_select_column,
@@ -42,9 +46,12 @@
 		datatype?: Datatype;
 		row_idx: number;
 		col_idx: number;
+		aria_col_index?: number;
 		col_style?: string;
 		cell_style?: string;
 		selection_classes?: string;
+		is_active?: boolean;
+		aria_row_index: number;
 		is_editing?: boolean;
 		is_flash?: boolean;
 		is_static?: boolean;
@@ -63,6 +70,7 @@
 		onmousedown: (event: MouseEvent) => void;
 		ondblclick: (event: MouseEvent) => void;
 		oncontextmenu: (event: MouseEvent) => void;
+		onfocus: () => void;
 		onblur: (detail: {
 			blur_event: FocusEvent;
 			coords: [number, number];
@@ -98,10 +106,15 @@
 	data-row={row_idx}
 	data-col={col_idx}
 	data-testid={`cell-${row_idx}-${col_idx}`}
-	tabindex={is_static ? -1 : undefined}
+	role="gridcell"
+	aria-rowindex={aria_row_index}
+	aria-colindex={aria_col_index}
+	aria-selected={is_selected}
+	tabindex={is_active ? 0 : -1}
 	{onmousedown}
 	{ondblclick}
 	{oncontextmenu}
+	{onfocus}
 	style="{col_style} {cell_style}"
 >
 	<div class="cell-wrap" bind:this={wrap_el} style={locked_height}>
@@ -127,7 +140,7 @@
 			expanded={is_solo}
 		/>
 		{#if show_menu_button}
-			<CellMenuButton on_click={on_menu_click} />
+			<CellMenuButton on_click={on_menu_click} tab_index={-1} />
 		{/if}
 	</div>
 </div>
@@ -146,6 +159,17 @@
 		min-width: 0;
 	}
 
+	.body-cell:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	@media (forced-colors: active) {
+		.body-cell:focus-visible {
+			outline-color: CanvasText;
+		}
+	}
+
 	.body-cell.static {
 		user-select: text;
 	}

package/dist/shared/DataCell.svelte.d.ts

@@ -7,9 +7,12 @@ type $$ComponentProps = {
     datatype?: Datatype;
     row_idx: number;
     col_idx: number;
+    aria_col_index?: number;
     col_style?: string;
     cell_style?: string;
     selection_classes?: string;
+    is_active?: boolean;
+    aria_row_index: number;
     is_editing?: boolean;
     is_flash?: boolean;
     is_static?: boolean;
@@ -32,6 +35,7 @@ type $$ComponentProps = {
     onmousedown: (event: MouseEvent) => void;
     ondblclick: (event: MouseEvent) => void;
     oncontextmenu: (event: MouseEvent) => void;
+    onfocus: () => void;
     onblur: (detail: {
         blur_event: FocusEvent;
         coords: [number, number];

package/dist/shared/EditableCell.svelte

@@ -175,8 +175,7 @@
 	<span
 		class:dragging={is_dragging}
 		onkeydown={handle_keydown}
-		tabindex="0"
-		role="button"
+		tabindex="-1"
 		class:edit
 		class:expanded={edit}
 		class:header

package/dist/shared/HeaderCell.svelte

@@ -12,6 +12,7 @@
 	let {
 		value,
 		col_idx,
+		aria_col_index = col_idx + 1,
 		is_editing = false,
 		is_selected = false,
 		is_static = false,
@@ -30,12 +31,14 @@
 		i18n,
 		wrap_text = false,
 		onclick,
+		onfocus,
 		on_menu_click,
 		on_end_edit,
 		on_select_all
 	}: {
 		value: string;
 		col_idx: number;
+		aria_col_index?: number;
 		is_editing?: boolean;
 		is_selected?: boolean;
 		is_static?: boolean;
@@ -54,8 +57,9 @@
 		i18n: I18nFormatter;
 		wrap_text?: boolean;
 		onclick: (event: MouseEvent, col: number) => void;
+		onfocus: (col: number) => void;
 		on_menu_click: (event: MouseEvent, col: number) => void;
-		on_end_edit: (key: string) => void;
+		on_end_edit: (event: KeyboardEvent) => void;
 		on_select_all?: (col: number, checked: boolean) => void;
 	} = $props();
 
@@ -71,6 +75,11 @@
 	class:filtered={is_filtered}
 	class:first-column={is_first_column}
 	data-heading={col_idx}
+	data-testid={`header-${col_idx}`}
+	role="columnheader"
+	aria-colindex={aria_col_index}
+	tabindex={is_selected ? 0 : -1}
+	onfocus={() => onfocus(col_idx)}
 	onclick={(e) => onclick(e, col_idx)}
 	onmousedown={(e) => {
 		e.preventDefault();
@@ -94,6 +103,7 @@
 						indeterminate={select_all_state === "indeterminate"}
 						label={`Toggle all: ${value}`}
 						interactive={true}
+						tab_index={-1}
 						on_select={() =>
 							on_select_all?.(col_idx, select_all_state !== "checked")}
 					/>
@@ -106,7 +116,8 @@
 				edit={is_editing}
 				onkeydown={(event) => {
 					if (["Enter", "Escape", "Tab"].includes(event.key)) {
-						on_end_edit(event.key);
+						event.stopPropagation();
+						on_end_edit(event);
 					}
 				}}
 				header
@@ -148,7 +159,10 @@
 			</span>
 		{/if}
 		{#if show_menu_button}
-			<CellMenuButton on_click={(e) => on_menu_click(e, col_idx)} />
+			<CellMenuButton
+				on_click={(e) => on_menu_click(e, col_idx)}
+				tab_index={-1}
+			/>
 		{/if}
 	</div>
 </th>

package/dist/shared/HeaderCell.svelte.d.ts

@@ -3,6 +3,7 @@ import type { SortDirection } from "./types";
 type $$ComponentProps = {
     value: string;
     col_idx: number;
+    aria_col_index?: number;
     is_editing?: boolean;
     is_selected?: boolean;
     is_static?: boolean;
@@ -25,8 +26,9 @@ type $$ComponentProps = {
     i18n: I18nFormatter;
     wrap_text?: boolean;
     onclick: (event: MouseEvent, col: number) => void;
+    onfocus: (col: number) => void;
     on_menu_click: (event: MouseEvent, col: number) => void;
-    on_end_edit: (key: string) => void;
+    on_end_edit: (event: KeyboardEvent) => void;
     on_select_all?: (col: number, checked: boolean) => void;
 };
 declare const HeaderCell: import("svelte").Component<$$ComponentProps, {}, "">;