Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-02-24 04:00:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): add aria-labels and structural elements to workspace components (#21719)

Browse Source
This commit is contained in:
Classic298
2026-02-22 22:24:33 +01:00
committed by GitHub
parent e0087acfb4
commit 5b9efeef4d
13 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/workspace/Knowledge.svelte
View File

@@ -197,12 +197,14 @@
<input
class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
aria-label={$i18n.t('Search Knowledge')}
placeholder={$i18n.t('Search Knowledge')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
aria-label={$i18n.t('Clear search')}
on:click={() => {
query = '';
}}

1
src/lib/components/workspace/Knowledge/ItemMenu.svelte
View File

@@ -38,6 +38,7 @@
><button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('More Options')}
on:click={(e) => {
e.stopPropagation();
show = true;

7
src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
View File

@@ -856,6 +856,7 @@
type="text"
class="text-left w-full text-lg bg-transparent outline-hidden flex-1"
bind:value={knowledge.name}
aria-label={$i18n.t('Knowledge Name')}
placeholder={$i18n.t('Knowledge Name')}
disabled={!knowledge?.write_access}
on:input={() => {
@@ -903,6 +904,7 @@
type="text"
class="text-left text-xs w-full text-gray-500 bg-transparent outline-hidden"
bind:value={knowledge.description}
aria-label={$i18n.t('Knowledge Description')}
placeholder={$i18n.t('Knowledge Description')}
disabled={!knowledge?.write_access}
on:input={() => {
@@ -925,7 +927,8 @@
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
placeholder={`${$i18n.t('Search Collection')}`}
aria-label={$i18n.t('Search Collection')}
placeholder={$i18n.t('Search Collection')}
on:focus={() => {
selectedFileId = null;
}}
@@ -1071,6 +1074,7 @@
<div class="mr-2">
<button
class="w-full text-left text-sm p-1.5 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
aria-label={$i18n.t('Close')}
on:click={() => {
selectedFileId = null;
selectedFile = null;
@@ -1108,6 +1112,7 @@
class="w-full h-full text-sm outline-none resize-none px-3 py-2"
bind:value={selectedFileContent}
disabled={!knowledge?.write_access}
aria-label={$i18n.t('File content')}
placeholder={$i18n.t('Add content here')}
/>
{/key}

4
src/lib/components/workspace/Models.svelte
View File

@@ -395,6 +395,7 @@
<input
class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
aria-label={$i18n.t('Search Models')}
placeholder={$i18n.t('Search Models')}
maxlength="500"
on:input={() => {
@@ -409,6 +410,7 @@
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
aria-label={$i18n.t('Clear search')}
on:click={() => {
query = '';
getModelList();
@@ -516,6 +518,7 @@
<button
class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}
on:click={(e) => {
e.stopPropagation();
hideModelHandler(model);
@@ -533,6 +536,7 @@
<button
class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Delete')}
on:click={(e) => {
e.stopPropagation();
deleteModelHandler(model);

1
src/lib/components/workspace/Models/ModelEditor.svelte
View File

@@ -475,6 +475,7 @@
? 'bg-transparent'
: 'bg-white'} shadow-xl group relative"
type="button"
aria-label={$i18n.t('Upload profile image')}
on:click={() => {
filesInputElement.click();
}}

4
src/lib/components/workspace/Prompts.svelte
View File

@@ -331,6 +331,7 @@
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
aria-label={$i18n.t('Search Prompts')}
placeholder={$i18n.t('Search Prompts')}
/>
@@ -338,6 +339,7 @@
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
aria-label={$i18n.t('Clear search')}
on:click={() => {
query = '';
}}
@@ -437,6 +439,7 @@
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
deleteHandler(prompt);
}}
@@ -449,6 +452,7 @@
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Copy Prompt')}
on:click={(e) => {
e.preventDefault();
e.stopPropagation();

4
src/lib/components/workspace/Prompts/PromptEditor.svelte
View File

@@ -302,6 +302,7 @@
<div class="text-lg font-medium">{$i18n.t('Edit Prompt')}</div>
<button
class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
aria-label={$i18n.t('Close')}
on:click={() => (showEditModal = false)}
>
<XMark className="size-5" />
@@ -319,6 +320,7 @@
className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
bind:value={content}
aria-label={$i18n.t('Prompt Content')}
rows={6}
required
/>
@@ -331,6 +333,7 @@
<input
class="text-sm w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Describe what changed...')}
aria-label={$i18n.t('Commit Message')}
bind:value={commitMessage}
/>
</div>
@@ -502,6 +505,7 @@
<div class="absolute top-2 right-2 z-10">
<button
class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
aria-label={$i18n.t('Copy content')}
on:click={copyContent}
>
{#if contentCopied}

1
src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
View File

@@ -43,6 +43,7 @@
<slot>
<button
class="p-1 rounded-lg text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label={$i18n.t('More Options')}
>
<EllipsisHorizontal className="size-5" />
</button>

3
src/lib/components/workspace/Skills.svelte
View File

@@ -321,12 +321,14 @@
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
aria-label={$i18n.t('Search Skills')}
placeholder={$i18n.t('Search Skills')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
aria-label={$i18n.t('Clear search')}
on:click={() => {
query = '';
}}
@@ -453,6 +455,7 @@
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
deleteHandler(skill);
}}

5
src/lib/components/workspace/Skills/SkillEditor.svelte
View File

@@ -136,6 +136,7 @@
<Tooltip content={$i18n.t('Back')}>
<button
class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
aria-label={$i18n.t('Back')}
on:click={() => {
goto('/workspace/skills');
}}
@@ -152,6 +153,7 @@
class="w-full text-2xl bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Skill Name')}
aria-label={$i18n.t('Skill Name')}
bind:value={name}
on:input={handleNameInput}
required
@@ -197,6 +199,7 @@
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Skill ID')}
aria-label={$i18n.t('Skill ID')}
bind:value={id}
on:input={handleIdInput}
required
@@ -214,6 +217,7 @@
class="w-full text-sm bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Skill Description')}
aria-label={$i18n.t('Skill Description')}
bind:value={description}
on:input={handleDescriptionInput}
{disabled}
@@ -236,6 +240,7 @@
class="w-full flex-1 text-xs bg-transparent outline-hidden resize-none font-mono px-4 py-3"
bind:value={content}
placeholder={$i18n.t('Enter skill instructions in markdown...')}
aria-label={$i18n.t('Skill Instructions')}
required
/>
{/if}

5
src/lib/components/workspace/Tools.svelte
View File

@@ -325,12 +325,14 @@
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query}
aria-label={$i18n.t('Search Tools')}
placeholder={$i18n.t('Search Tools')}
/>
{#if query}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
aria-label={$i18n.t('Clear search')}
on:click={() => {
query = '';
}}
@@ -457,6 +459,7 @@
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
deleteHandler(tool);
}}
@@ -470,6 +473,7 @@
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Support')}
on:click={() => {
selectedTool = tool;
showManifestModal = true;
@@ -484,6 +488,7 @@
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
type="button"
aria-label={$i18n.t('Valves')}
on:click={() => {
selectedTool = tool;
showValvesModal = true;

4
src/lib/components/workspace/Tools/ToolkitEditor.svelte
View File

@@ -225,6 +225,7 @@ class Tools:
<Tooltip content={$i18n.t('Back')}>
<button
class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
aria-label={$i18n.t('Back')}
on:click={() => {
goto('/workspace/tools');
}}
@@ -241,6 +242,7 @@ class Tools:
class="w-full text-2xl bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Tool Name')}
aria-label={$i18n.t('Tool Name')}
bind:value={name}
required
/>
@@ -275,6 +277,7 @@ class Tools:
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Tool ID')}
aria-label={$i18n.t('Tool ID')}
bind:value={id}
required
disabled={edit}
@@ -291,6 +294,7 @@ class Tools:
class="w-full text-sm bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Tool Description')}
aria-label={$i18n.t('Tool Description')}
bind:value={meta.description}
required
/>

6
src/routes/(app)/workspace/+layout.svelte
View File

@@ -67,6 +67,7 @@
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
on:click={() => {
showSidebar.set(!$showSidebar);
}}
@@ -86,6 +87,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/models') ? 'page' : null}
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/models')
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -96,6 +98,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/knowledge') ? 'page' : null}
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/knowledge')
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -108,6 +111,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/prompts') ? 'page' : null}
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/prompts')
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -118,6 +122,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/skills') ? 'page' : null}
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/skills')
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -130,6 +135,7 @@
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools}
<a
draggable="false"
aria-current={$page.url.pathname.includes('/workspace/tools') ? 'page' : null}
class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/tools')
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"