Improve dataframe's upload accessibility

.changeset/tasty-humans-leave.md

@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@gradio/dataframe": minor
+"@gradio/upload": minor
+"gradio": minor
+---
+
+feat:Improve dataframe's upload accessibility

js/core/src/lang/en.json

@@ -67,7 +67,8 @@
 		"delete_row": "Delete row",
 		"delete_column": "Delete column",
 		"add_column_left": "Add column to the left",
-		"add_column_right": "Add column to the right"
+		"add_column_right": "Add column to the right",
+		"drop_to_upload": "Drop CSV or TSV files here to import data into dataframe"
 	},
 	"dropdown": {
 		"dropdown": "Dropdown"

js/dataframe/shared/Table.svelte

@@ -936,6 +936,7 @@
 			{root}
 			on:load={(e) => blob_to_string(data_uri_to_blob(e.detail.data))}
 			bind:dragging
+			aria_label="Drop CSV or TSV files here to import data into dataframe"
 		>
 			<VirtualTable
 				bind:items={data}

js/upload/src/Upload.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { createEventDispatcher, tick, getContext } from "svelte";
+	import { createEventDispatcher, tick } from "svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, type Client } from "@gradio/client";
-	import { _ } from "svelte-i18n";
 	import UploadProgress from "./UploadProgress.svelte";
 
 	export let filetype: string | string[] | null = null;
@@ -23,6 +22,7 @@
 	export let stream_handler: Client["stream"];
 	export let icon_upload = false;
 	export let height: number | string | undefined = undefined;
+	export let aria_label: string | undefined = undefined;
 
 	let upload_id: string;
 	let file_data: FileData[];
@@ -277,6 +277,7 @@
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:click={paste_clipboard}
+		aria-label={aria_label || "Paste from clipboard"}
 	>
 		<slot />
 	</button>
@@ -311,10 +312,12 @@
 		on:drop={loadFilesFromDrop}
 		on:dragenter={updateDragging}
 		on:dragleave={updateDragging}
+		aria-label={aria_label || "Click to upload or drop files"}
+		aria-dropeffect="copy"
 	>
 		<slot />
 		<input
-			aria-label="file upload"
+			aria-label="File upload"
 			data-testid="file-upload"
 			type="file"
 			bind:this={hidden_upload}