accessibility: placeholder contrast on sensitiveinput

This commit is contained in:
Sine Jespersen 2025-06-17 12:22:16 +02:00
parent bd818b4524
commit 27f7df8ad6

View File

@ -7,8 +7,7 @@
export let required = true; export let required = true;
export let readOnly = false; export let readOnly = false;
export let outerClassName = 'flex flex-1 bg-transparent'; export let outerClassName = 'flex flex-1 bg-transparent';
export let inputClassName = export let inputClassName = 'w-full text-sm py-0.5 bg-transparent';
'w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden';
export let showButtonClassName = 'pl-1.5 transition bg-transparent'; export let showButtonClassName = 'pl-1.5 transition bg-transparent';
let show = false; let show = false;
@ -17,7 +16,7 @@
<div class={outerClassName}> <div class={outerClassName}>
<label class="sr-only" for="password-input">{placeholder || $i18n.t('Password')}</label> <label class="sr-only" for="password-input">{placeholder || $i18n.t('Password')}</label>
<input <input
class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? '' : ' outline-hidden'}`} class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : ' outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
{placeholder} {placeholder}
id="password-input" id="password-input"
bind:value bind:value