From cce3dde5abeed8dd1fef1fa426b5ca1c4313e7da Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 19 Jul 2026 20:58:13 +0200
Subject: [PATCH] fix(a11y): show the password hint visually but hide it from
 screen readers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the "e.g. ••••" hint that the previous commit removed, as an
aria-hidden overlay instead of a native placeholder — screen readers
read native placeholders character by character. FormField gets a
decorativePlaceholder prop for the link-share fields, and the link-share
auth field gains the aria-label it never had (its placeholder used to be
its only hint). Re-using the translation key also fixes the dead-key CI
failure.

Claude-Session: https://claude.ai/code/session_018prq5WqRL38EGhPNQKqZUP
---
 frontend/src/components/input/FormField.vue     | 11 +++++++++++
 frontend/src/components/input/Password.vue      |  7 +++++++
 frontend/src/components/sharing/LinkSharing.vue |  1 +
 frontend/src/styles/theme/form.scss             | 11 +++++++++++
 frontend/src/views/sharing/LinkSharingAuth.vue  |  2 ++
 5 files changed, 32 insertions(+)

diff --git a/frontend/src/components/input/FormField.vue b/frontend/src/components/input/FormField.vue
index 389e8bde6..348e76bd6 100644
--- a/frontend/src/components/input/FormField.vue
+++ b/frontend/src/components/input/FormField.vue
@@ -9,6 +9,10 @@ interface Props {
 	disabled?: boolean
 	loading?: boolean
 	layout?: 'stacked' | 'two-col'
+	// Shown like a placeholder but hidden from assistive technology —
+	// screen readers read native placeholders character by character
+	// for hints like "e.g. ••••••••••••".
+	decorativePlaceholder?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -129,6 +133,13 @@ defineExpose({
 						:aria-describedby="errorId"
 						@input="handleInput"
 					>
+					<span
+						v-if="decorativePlaceholder && !modelValue"
+						class="decorative-placeholder"
+						aria-hidden="true"
+					>
+						{{ decorativePlaceholder }}
+					</span>
 				</slot>
 			</div>
 			<div
diff --git a/frontend/src/components/input/Password.vue b/frontend/src/components/input/Password.vue
index 3fa258dcd..26387d435 100644
--- a/frontend/src/components/input/Password.vue
+++ b/frontend/src/components/input/Password.vue
@@ -14,6 +14,13 @@
 			@keyup="() => {validateAfterFirst ? validate() : null}"
 			@input="handleInput"
 		>
+		<span
+			v-if="password === ''"
+			class="decorative-placeholder"
+			aria-hidden="true"
+		>
+			{{ $t('user.auth.passwordPlaceholder') }}
+		</span>
 		<BaseButton
 			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			class="password-field-type-toggle"
diff --git a/frontend/src/components/sharing/LinkSharing.vue b/frontend/src/components/sharing/LinkSharing.vue
index 0b3122733..804b65c23 100644
--- a/frontend/src/components/sharing/LinkSharing.vue
+++ b/frontend/src/components/sharing/LinkSharing.vue
@@ -56,6 +56,7 @@
 					v-model="password"
 					v-tooltip="$t('project.share.links.passwordExplanation')"
 					:label="$t('project.share.links.password')"
+					:decorative-placeholder="$t('user.auth.passwordPlaceholder')"
 					type="password"
 				/>
 				<XButton
diff --git a/frontend/src/styles/theme/form.scss b/frontend/src/styles/theme/form.scss
index 9e5461745..ed9b47c73 100644
--- a/frontend/src/styles/theme/form.scss
+++ b/frontend/src/styles/theme/form.scss
@@ -105,3 +105,14 @@ h1, h2, h3 {
     height: auto;
   }
 }
+
+// Visual stand-in for a native placeholder that assistive technology must not
+// read (native placeholders are announced character by character).
+.decorative-placeholder {
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  inset-inline-start: calc(0.75em + 1px);
+  color: var(--input-placeholder-color);
+  pointer-events: none;
+}
diff --git a/frontend/src/views/sharing/LinkSharingAuth.vue b/frontend/src/views/sharing/LinkSharingAuth.vue
index 74a2f6376..473a3e3e5 100644
--- a/frontend/src/views/sharing/LinkSharingAuth.vue
+++ b/frontend/src/views/sharing/LinkSharingAuth.vue
@@ -12,6 +12,8 @@
 				v-model="password"
 				v-focus
 				type="password"
+				:aria-label="$t('user.auth.password')"
+				:decorative-placeholder="$t('user.auth.passwordPlaceholder')"
 				@keyup.enter.prevent="authenticate()"
 			/>