make buttons DropdownMenuItems to make them accessible by keyboard, add handling of highContrastMode

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

View file

@ -32,7 +32,12 @@
typeahead={false} typeahead={false}
> >
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Tooltip content={$i18n.t('More')} className=" group-hover/item:opacity-100 opacity-0"> <Tooltip
content={$i18n.t('More')}
className={($settings?.highContrastMode ?? false)
? ''
: 'group-hover/item:opacity-100 opacity-0'}
>
<slot /> <slot />
</Tooltip> </Tooltip>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
@ -45,8 +50,9 @@
align="end" align="end"
transition={flyAndScale} transition={flyAndScale}
> >
<button <DropdownMenu.Item
type="button" type="button"
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2" class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => { on:click={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -69,9 +75,9 @@
{$i18n.t('Keep in Sidebar')} {$i18n.t('Keep in Sidebar')}
{/if} {/if}
</div> </div>
</button> </DropdownMenu.Item>
<button <DropdownMenu.Item
type="button" type="button"
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2" class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2"
on:click={(e) => { on:click={(e) => {
@ -85,6 +91,6 @@
<Link /> <Link />
<div class="flex items-center">{$i18n.t('Copy Link')}</div> <div class="flex items-center">{$i18n.t('Copy Link')}</div>
</button> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>