refac

src/lib/components/chat/MessageInput.svelte

@@ -1672,12 +1672,14 @@
 											chatInput?.focus();
 										}}
 									>
-										<div
+										<button
+											type="button"
 											id="input-menu-button"
 											class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden"
+											aria-label={$i18n.t('More')}
 										>
 											<PlusAlt className="size-5.5" />
-										</div>
+										</button>
 									</InputMenu>
 
 									{#if showWebSearchButton || showImageGenerationButton || showCodeInterpreterButton || showToolsButton || showSkillsButton || (toggleFilters && toggleFilters.length > 0)}
@@ -1712,12 +1714,14 @@
 												chatInput?.focus();
 											}}
 										>
-											<div
+											<button
+												type="button"
 												id="integration-menu-button"
 												class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden"
+												aria-label={$i18n.t('Integrations')}
 											>
 												<Component className="size-4.5" strokeWidth="1.5" />
-											</div>
+											</button>
 										</IntegrationsMenu>
 									{/if}
 

src/lib/components/chat/Navbar.svelte

@@ -253,11 +253,12 @@
 								}
 							}}
 						>
-							<div
+							<button
+								type="button"
 								class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+								aria-label={$i18n.t('User menu')}
 							>
 								<div class=" self-center">
-									<span class="sr-only">{$i18n.t('User menu')}</span>
 									<img
 										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 										class="size-6 object-cover rounded-full"
@@ -265,7 +266,7 @@
 										draggable="false"
 									/>
 								</div>
-							</div>
+							</button>
 						</UserMenu>
 					{/if}
 				</div>

src/lib/components/common/Dropdown.svelte

@@ -45,10 +45,18 @@
 			e.preventDefault();
 			toggleOpen();
 		}
+		function handleKeydown(e) {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.preventDefault();
+				toggleOpen();
+			}
+		}
 		node.addEventListener('click', handleClick);
+		node.addEventListener('keydown', handleKeydown);
 		return {
 			destroy() {
 				node.removeEventListener('click', handleClick);
+				node.removeEventListener('keydown', handleKeydown);
 			}
 		};
 	}
@@ -161,9 +169,7 @@
 	on:resize={positionContent}
 />
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<span use:trigger style="display: contents; cursor: pointer;">
+<span use:trigger style="display: contents; cursor: pointer;" role="button" aria-haspopup="true" aria-expanded={show}>
 	<slot />
 </span>
 
@@ -174,6 +180,7 @@
 		use:portal
 		bind:this={contentEl}
 		class={contentClass}
+		role="menu"
 		transition:flyAndScale
 		on:click={(e) => e.stopPropagation()}
 		on:pointerdown={(e) => e.stopPropagation()}

src/lib/components/layout/Sidebar.svelte

@@ -948,8 +948,10 @@
 								}
 							}}
 						>
-							<div
+							<button
+								type="button"
 								class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
+								aria-label={$i18n.t('User menu')}
 							>
 								<div class="self-center relative">
 									<img
@@ -971,7 +973,7 @@
 										</div>
 									{/if}
 								</div>
-							</div>
+							</button>
 						</UserMenu>
 					{/if}
 				</div>
@@ -1608,8 +1610,10 @@
 								}
 							}}
 						>
-							<div
+							<button
+								type="button"
 								class=" flex items-center rounded-2xl py-2 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
+								aria-label={$i18n.t('User menu')}
 							>
 								<div class=" self-center mr-3 relative flex-shrink-0">
 									<img
@@ -1632,7 +1636,7 @@
 									{/if}
 								</div>
 								<div class=" self-center font-medium truncate">{$user?.name}</div>
-							</div>
+							</button>
 						</UserMenu>
 					{/if}
 				</div>

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -117,7 +117,6 @@
 	}}
 />
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <Dropdown bind:show onOpenChange={handleDropdownChange} {align}>
 	<slot />