Merge pull request #16321 from itk-dev/feature/more-accessible-menu

Feat: enhance accessibility of menu

src/lib/components/chat/ModelSelector/ModelItem.svelte

@@ -255,6 +255,7 @@
 			}}
 		>
 			<button
+				aria-label={`${$i18n.t('More Options')}`}
 				class="flex"
 				on:click={(e) => {
 					e.preventDefault();

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>

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -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>

src/lib/components/icons/ChatBubbleOval.svelte

@@ -9,6 +9,7 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	aria-hidden="true"
 	class={className}
 >
 	<path

src/lib/components/icons/Eye.svelte

@@ -10,6 +10,7 @@
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}
+	aria-hidden="true"
 >
 	<path
 		stroke-linecap="round"

src/lib/components/icons/EyeSlash.svelte

@@ -10,6 +10,7 @@
 	stroke-width={strokeWidth}
 	stroke="currentColor"
 	class={className}
+	aria-hidden="true"
 >
 	<path
 		stroke-linecap="round"

src/lib/components/icons/Link.svelte

@@ -7,6 +7,7 @@
 		fill-rule="evenodd"
 		d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
 		clip-rule="evenodd"
+		aria-hidden="true"
 	/>
 	<path
 		fill-rule="evenodd"

src/lib/components/icons/Search.svelte

@@ -9,6 +9,7 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	aria-hidden="true"
 	class={className}
 >
 	<path