Simplify upload modal, dropzone, and settings markup.

Remove redundant dialog ARIA wiring, hide the file input with hidden instead of sr-only, and trim footnote accessibility attributes that duplicated visible text.
This commit is contained in:
2026-10-25 22:00:16 +01:00
parent f5be0a0de3
commit 42fe209164
3 changed files with 8 additions and 21 deletions
@@ -1,14 +1,9 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-4 sm:items-center"> <div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-4 sm:items-center">
<div <div class="flex w-full max-w-lg flex-col rounded-lg border border-border bg-card shadow-lg">
role="dialog"
aria-modal="true"
aria-labelledby="upload-configure-title"
class="flex w-full max-w-lg flex-col rounded-lg border border-border bg-card shadow-lg"
>
<header class="border-b border-border px-4 py-3"> <header class="border-b border-border px-4 py-3">
<h2 id="upload-configure-title" class="text-base font-medium text-card-foreground"> <h2 class="text-base font-medium text-card-foreground">
Configure upload Configure upload
</h2> </h2>
<p class="mt-1 text-xs text-muted-foreground">Settings apply to all chosen images.</p> <p class="mt-1 text-xs text-muted-foreground">Settings apply to all chosen images.</p>
@@ -44,20 +39,14 @@
v-if="open && metadataErrorConfirmOpen" v-if="open && metadataErrorConfirmOpen"
class="fixed inset-0 z-60 flex items-end justify-center bg-black/50 p-4 sm:items-center" class="fixed inset-0 z-60 flex items-end justify-center bg-black/50 p-4 sm:items-center"
> >
<div <div class="flex w-full max-w-md flex-col rounded-lg border border-border bg-card shadow-lg">
role="alertdialog"
aria-modal="true"
aria-labelledby="upload-metadata-error-confirm-title"
aria-describedby="upload-metadata-error-confirm-desc"
class="flex w-full max-w-md flex-col rounded-lg border border-border bg-card shadow-lg"
>
<header class="border-b border-border px-4 py-3"> <header class="border-b border-border px-4 py-3">
<h2 id="upload-metadata-error-confirm-title" class="text-base font-medium text-card-foreground"> <h2 class="text-base font-medium text-card-foreground">
Metadata errors Metadata errors
</h2> </h2>
</header> </header>
<p id="upload-metadata-error-confirm-desc" class="px-4 py-4 text-sm text-muted-foreground"> <p class="px-4 py-4 text-sm text-muted-foreground">
{{ metadataErrorCount }} {{ metadataErrorCount }}
{{ metadataErrorCount === 1 ? 'image has' : 'images have' }} metadata error. Do you want to upload {{ metadataErrorCount === 1 ? 'image has' : 'images have' }} metadata error. Do you want to upload
them with original metadata? them with original metadata?
@@ -10,7 +10,7 @@
type="file" type="file"
accept="image/*" accept="image/*"
multiple multiple
class="sr-only" class="hidden"
:disabled="disabled" :disabled="disabled"
@change="onFileInputChange" @change="onFileInputChange"
/> />
@@ -29,11 +29,9 @@
Still encrypted at rest, but the server decrypts on the fly. Works with BBCode, HTML, Still encrypted at rest, but the server decrypts on the fly. Works with BBCode, HTML,
etc. etc.
Encryption here serves mainly as Encryption here serves mainly as
<span class="whitespace-nowrap" aria-describedby="crypto-shred-footnote"> <span class="whitespace-nowrap">
<span class="font-bold">crypto-shred</span <span class="font-bold">crypto-shred</span
><sup class="font-bold text-[0.7em] text-muted-foreground" aria-hidden="true" ><sup class="font-bold text-[0.7em] text-muted-foreground">1</sup> </span
>1</sup
> </span
>, because hotlink images are intended to be public. >, because hotlink images are intended to be public.
</p> </p>
</span> </span>