bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y

Browse Source 
Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
2026-08-11 01:25:20 -06:00
co-authored by Classic298
parent 865c80c160
commit c8f8fa451a
29 changed files with 103 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Sidebar.svelte
+2 -2
View File
@@ -1204,7 +1204,7 @@
<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('New Chat')}</div>
</div>
<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
<HotkeyHint name="newChat" className=" hover-reveal " />
</a>
</div>
@@ -1225,7 +1225,7 @@
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('Search')}</div>
</div>
<HotkeyHint name="search" className=" group-hover:visible invisible" />
<HotkeyHint name="search" className=" hover-reveal " />
</button>
</div>
src/lib/components/layout/Sidebar/ChannelItem.svelte
+2 -6
View File
@@ -203,9 +203,7 @@
</a>
{#if ['dm'].includes(channel?.type)}
<div
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
@@ -230,9 +228,7 @@
</button>
</div>
{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
<div
class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
>
<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
<button
type="button"
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
src/lib/components/layout/Sidebar/ChatItem.svelte
+16 -5
View File
@@ -103,6 +103,8 @@
let chat = null;
let mouseOver = false;
let focusWithin = false;
let menuOpen = false;
let openPreview = false;
const closeHoverPreview = () => {
@@ -131,7 +133,8 @@
id !== $chatId &&
!active &&
(effectiveReadAt === null || (updatedAt !== null && updatedAt > effectiveReadAt));
$: showInlineActions = id === $chatId || confirmEdit || mouseOver || selected;
$: showInlineActions =
id === $chatId || confirmEdit || mouseOver || focusWithin || menuOpen || selected;
$: chatItemClass = ` w-full flex justify-between rounded-xl px-2 py-1.5 ${
id === $chatId || confirmEdit
? ($settings?.highContrastMode ?? false)
@@ -582,6 +585,12 @@
on:mouseleave={() => {
mouseOver = false;
}}
on:focusin={() => {
focusWithin = true;
}}
on:focusout={() => {
focusWithin = false;
}}
>
{#if confirmEdit}
<div
@@ -669,7 +678,7 @@
? 'selected'
: showInlineActions
? 'selected'
: 'invisible group-hover:visible'} absolute {className === 'pr-2'
: 'hover-reveal'} absolute {className === 'pr-2'
? 'right-[0.5rem]'
: 'right-1'} inset-y-0 mr-1.5 flex items-center"
>
@@ -739,7 +748,12 @@
showDeleteConfirm = true;
}}
{markUnreadHandler}
onOpen={() => {
menuOpen = true;
dispatch('select');
}}
onClose={() => {
menuOpen = false;
dispatch('unselect');
}}
onPinChange={async () => {
@@ -750,9 +764,6 @@
type="button"
aria-label="Chat Menu"
class="flex size-5 items-center justify-center self-center dark:hover:text-white transition m-0"
on:click={() => {
dispatch('select');
}}
>
<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
</button>
src/lib/components/layout/Sidebar/ChatMenu.svelte
+10 -5
View File
@@ -39,11 +39,13 @@
export let archiveChatHandler: Function;
export let renameHandler: Function;
export let deleteHandler: Function;
export let onOpen: () => void = () => {};
export let onClose: Function;
export let markUnreadHandler: Function = () => {};
export let chatId = '';
let dropdown: Dropdown;
let show = false;
let pinned = false;
@@ -290,9 +292,12 @@
{/if}
<Dropdown
bind:this={dropdown}
bind:show
onOpenChange={(state) => {
if (state === false) {
if (state) {
onOpen();
} else {
onClose();
}
}}
@@ -363,7 +368,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
renameHandler();
}}
>
@@ -375,7 +380,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
markUnreadHandler();
}}
>
@@ -389,7 +394,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
pinHandler();
}}
>
@@ -407,7 +412,7 @@
draggable="false"
class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
on:click={() => {
show = false;
dropdown.close();
cloneChatHandler();
}}
>
src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+1 -1
View File
@@ -86,7 +86,7 @@
</div>
</a>
<button
class="invisible group-hover:visible self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
class="hover-reveal self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
on:click|preventDefault|stopPropagation={async () => {
await toggleNotePinnedStatusById(localStorage.token, note.id);
const _pinnedNotes = await getPinnedNoteList(localStorage.token).catch(() => []);
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+1 -1
View File
@@ -855,7 +855,7 @@
{#if isWritable}
<button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
class="absolute z-10 right-2 hover-reveal self-center flex items-center dark:text-gray-300"
>
<FolderMenu
onEdit={() => {
src/lib/components/layout/Sidebar/Section.svelte
+1 -1
View File
@@ -134,7 +134,7 @@
>
<span>{name}</span>
<span
class="flex opacity-0 group-hover:opacity-100 transition-all duration-100"
class="flex opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-all duration-100"
style="transform: rotate({open ? '90deg' : '0deg'})"
>
<ChevronRight className="size-[0.6875rem]" />