fix(a11y): the model and prompt editors' name, ID and command fields are at least 24 pixels tall when Accessibility Mode is on (#33149)

This commit is contained in:
G30 2026-10-25 00:48:44 -04:00 • committed by GitHub
parent 75c4421b3a
commit 6cfcf5fc7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 6 deletions

View file

@ -1102,7 +1102,9 @@
<div class="flex min-w-0 items-center gap-2">
{#if editingLocale}
<input
class="min-w-0 flex-1 bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
? 'min-h-6'
: ''} bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
placeholder={name || $i18n.t('Model Name')}
value={localizedField('name')}
on:input={(e) =>
@ -1113,7 +1115,9 @@
/>
{:else}
<input
class="min-w-0 flex-1 bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
? 'min-h-6'
: ''} bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
placeholder={$i18n.t('Model Name')}
bind:value={name}
required
@ -1181,7 +1185,9 @@
{/if}
<input
class="block w-full bg-transparent py-0.5 text-xs text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
class="block w-full {($settings?.highContrastMode ?? false)
? 'min-h-6'
: ''} bg-transparent py-0.5 text-xs text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
placeholder={$i18n.t('Model ID')}
bind:value={id}
disabled={edit}

View file

@ -14,7 +14,7 @@
import Check from '$lib/components/icons/Check.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import AccessControlModal from '../common/AccessControlModal.svelte';
import { user } from '$lib/stores';
import { user, settings } from '$lib/stores';
import { slugify, formatDate, copyToClipboard } from '$lib/utils';
import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
@ -473,7 +473,9 @@
<div class="shrink-0 px-1 pb-2">
<input
class="w-full bg-transparent text-sm outline-hidden"
class="w-full {($settings?.highContrastMode ?? false)
? 'min-h-6'
: ''} bg-transparent text-sm outline-hidden"
placeholder={$i18n.t('Prompt Name')}
aria-label={$i18n.t('Prompt Name')}
bind:value={name}
@ -495,7 +497,9 @@
<div class="flex min-w-0 items-center gap-0.5">
<span>/</span>
<input
class="min-w-0 flex-1 bg-transparent outline-hidden"
class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
? 'min-h-6'
: ''} bg-transparent outline-hidden"
placeholder={$i18n.t('command')}
aria-label={$i18n.t('Command')}
bind:value={command}