Improve dataframe's upload accessibility (#10478)

* add aria-labels to dataframe upload * add changeset * tweaks * add changeset * add aria-labels for other components * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Dawood Khan <[email protected]>
gradio-app · Feb 4, 2025 · afb96c6 · afb96c6
1 parent a9bfbc3
commit afb96c6
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 12 deletions.
diff --git a/.changeset/tasty-humans-leave.md b/.changeset/tasty-humans-leave.md
@@ -0,0 +1,12 @@
+---
+"@gradio/audio": minor
+"@gradio/core": minor
+"@gradio/dataframe": minor
+"@gradio/image": minor
+"@gradio/model3d": minor
+"@gradio/upload": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Improve dataframe's upload accessibility
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -289,6 +289,7 @@
 				{max_file_size}
 				{upload}
 				{stream_handler}
+				aria_label={i18n("audio.drop_to_upload")}
 			>
 				<slot />
 			</Upload>

diff --git a/js/core/src/lang/en.json b/js/core/src/lang/en.json
@@ -1,14 +1,16 @@
 {
 	"_name": "English",
 	"3D_model": {
-		"3d_model": "3D Model"
+		"3d_model": "3D Model",
+		"drop_to_upload": "Drop a 3D model (.obj, .glb, .stl, .gltf, .splat, or .ply) file here to upload"
 	},
 	"annotated_image": {
 		"annotated_image": "Annotated Image"
 	},
 	"audio": {
 		"allow_recording_access": "Please allow access to the microphone for recording.",
 		"audio": "Audio",
+		"drop_to_upload": "Drop an audio file here to upload",
 		"record_from_microphone": "Record from microphone",
 		"stop_recording": "Stop recording",
 		"no_device_support": "Media devices could not be accessed. Check that you are running on a secure origin (https) or localhost (or you have passed a valid SSL certificate to ssl_verify), and you have allowed browser access to your device.",
@@ -67,7 +69,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"
@@ -96,7 +99,8 @@
 		"remove_image": "Remove Image",
 		"select_brush_color": "Select brush color",
 		"start_drawing": "Start drawing",
-		"use_brush": "Use brush"
+		"use_brush": "Use brush",
+		"drop_to_upload": "Drop an image file here to upload"
 	},
 	"label": {
 		"label": "Label"
@@ -129,5 +133,8 @@
 		"drop_video": "Drop Video Here",
 		"drop_gallery": "Drop Media Here",
 		"paste_clipboard": "Paste from Clipboard"
+	},
+	"video": {
+		"drop_to_upload": "Drop a video file here to upload"
 	}
 }
diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte
@@ -888,6 +888,7 @@
 					}
 				)}
 			bind:dragging
+			aria_label={i18n("dataframe.drop_to_upload")}
 		>
 			<VirtualTable
 				bind:items={data}

diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
@@ -173,6 +173,7 @@
 			disable_click={!sources.includes("upload") || value !== null}
 			{upload}
 			{stream_handler}
+			aria_label={i18n("image.drop_to_upload")}
 		>
 			{#if value === null}
 				<slot />

diff --git a/js/model3D/shared/Model3DUpload.svelte b/js/model3D/shared/Model3DUpload.svelte
@@ -99,6 +99,7 @@
 		bind:dragging
 		bind:uploading
 		on:error
+		aria_label={i18n("model3d.drop_to_upload")}
 	>
 		<slot />
 	</Upload>

diff --git a/js/spa/test/file_component_events.spec.ts b/js/spa/test/file_component_events.spec.ts
@@ -13,10 +13,7 @@ test("File component properly dispatches load event for the single file case.",
 }) => {
 	const [fileChooser] = await Promise.all([
 		page.waitForEvent("filechooser"),
-		page
-			.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
-			.first()
-			.click()
+		page.getByLabel("Click to upload or drop files").first().click()
 	]);
 	await fileChooser.setFiles(["./test/files/cheetah1.jpg"]);
 

diff --git a/js/spa/test/gallery_component_events.spec.ts b/js/spa/test/gallery_component_events.spec.ts
@@ -35,10 +35,7 @@ test("Gallery click-to-upload, upload and change events work correctly", async (
 }) => {
 	const [fileChooser] = await Promise.all([
 		page.waitForEvent("filechooser"),
-		page
-			.getByRole("button", { name: "Drop Media Here - or - Click to Upload" })
-			.first()
-			.click()
+		page.getByLabel("Click to upload or drop files").first().click()
 	]);
 	await fileChooser.setFiles([
 		"./test/files/cheetah1.jpg",

diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
@@ -23,6 +23,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 +278,7 @@
 				: "100%"}
 		tabindex={hidden ? -1 : 0}
 		on:click={paste_clipboard}
+		aria-label={aria_label || "Paste from clipboard"}
 	>
 		<slot />
 	</button>
@@ -311,10 +313,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}

diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte
@@ -92,6 +92,7 @@
 					{root}
 					{upload}
 					{stream_handler}
+					aria_label={i18n("video.drop_to_upload")}
 				>
 					<slot />
 				</Upload>