mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-11 11:19:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve dataframe's upload accessibility (#10478)

Browse Source 
* 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 <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Dawood Khan <dawoodkhan82@gmail.com>
This commit is contained in:
Hannah 2025-02-04 22:38:29 +00:00 committed by GitHub
parent a9bfbc389d
commit afb96c6445
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.changeset/tasty-humans-leave.md Normal file
View File

@ -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

1
js/audio/interactive/InteractiveAudio.svelte
View File

@ -289,6 +289,7 @@
{max_file_size}
{upload}
{stream_handler}
aria_label={i18n("audio.drop_to_upload")}
>
<slot />
</Upload>

13
js/core/src/lang/en.json
View File

@ -1,7 +1,8 @@
{
"_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"
@ -9,6 +10,7 @@
"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"
}
}

1
js/dataframe/shared/Table.svelte
View File

@ -888,6 +888,7 @@
}
)}
bind:dragging
aria_label={i18n("dataframe.drop_to_upload")}
>
<VirtualTable
bind:items={data}

1
js/image/shared/ImageUploader.svelte
View File

@ -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 />

1
js/model3D/shared/Model3DUpload.svelte
View File

@ -99,6 +99,7 @@
bind:dragging
bind:uploading
on:error
aria_label={i18n("model3d.drop_to_upload")}
>
<slot />
</Upload>

5
js/spa/test/file_component_events.spec.ts
View File

@ -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"]);

5
js/spa/test/gallery_component_events.spec.ts
View File

@ -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",

6
js/upload/src/Upload.svelte
View File

@ -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}

1
js/video/shared/InteractiveVideo.svelte
View File

@ -92,6 +92,7 @@
{root}
{upload}
{stream_handler}
aria_label={i18n("video.drop_to_upload")}
>
<slot />
</Upload>