add aria-labels and aria-pressed to enhance accessibility

This commit is contained in:
Sine Jespersen 2025-08-06 12:29:50 +02:00
parent 9df790a9f9
commit 52ef3e74e6

View file

@ -394,6 +394,7 @@
class="w-full text-sm bg-transparent outline-hidden"
placeholder={searchPlaceholder}
autocomplete="off"
aria-label={$i18n.t('Search In Models')}
on:keydown={(e) => {
if (e.code === 'Enter' && filteredItems.length > 0) {
value = filteredItems[selectedModelIdx].value;
@ -436,6 +437,7 @@
selectedConnectionType === ''
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedTag === '' && selectedConnectionType === ''}
on:click={() => {
selectedConnectionType = '';
selectedTag = '';
@ -450,6 +452,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'local'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'local'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'local';
@ -464,6 +467,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'external'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'external'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'external';
@ -478,6 +482,7 @@
class="min-w-fit outline-none p-1.5 {selectedConnectionType === 'direct'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedConnectionType === 'direct'}
on:click={() => {
selectedTag = '';
selectedConnectionType = 'direct';
@ -492,6 +497,7 @@
class="min-w-fit outline-none p-1.5 {selectedTag === tag
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
aria-pressed={selectedTag === tag}
on:click={() => {
selectedConnectionType = '';
selectedTag = tag;
@ -613,7 +619,7 @@
{#if showTemporaryChatControl}
<div class="flex items-center mx-2 mt-1 mb-2">
<button
<DropdownMenu.Item
class="flex justify-between w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 px-3 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted"
on:click={async () => {
temporaryChatEnabled.set(!$temporaryChatEnabled);
@ -642,7 +648,7 @@
<div>
<Switch state={$temporaryChatEnabled} />
</div>
</button>
</DropdownMenu.Item>
</div>
{:else}
<div class="mb-3"></div>