Browse Source

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

Sine Jespersen 2 tháng trước cách đây
mục cha
commit
9df790a9f9
1 tập tin đã thay đổi với 11 bổ sung5 xóa
  1. 11 5
      src/lib/components/chat/ModelSelector/ModelItemMenu.svelte

+ 11 - 5
src/lib/components/chat/ModelSelector/ModelItemMenu.svelte

@@ -32,7 +32,12 @@
 	typeahead={false}
 >
 	<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 />
 		</Tooltip>
 	</DropdownMenu.Trigger>
@@ -45,8 +50,9 @@
 		align="end"
 		transition={flyAndScale}
 	>
-		<button
+		<DropdownMenu.Item
 			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"
 			on:click={(e) => {
 				e.stopPropagation();
@@ -69,9 +75,9 @@
 					{$i18n.t('Keep in Sidebar')}
 				{/if}
 			</div>
-		</button>
+		</DropdownMenu.Item>
 
-		<button
+		<DropdownMenu.Item
 			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"
 			on:click={(e) => {
@@ -85,6 +91,6 @@
 			<Link />
 
 			<div class="flex items-center">{$i18n.t('Copy Link')}</div>
-		</button>
+		</DropdownMenu.Item>
 	</DropdownMenu.Content>
 </DropdownMenu.Root>