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 to chat message components (#21708)

Browse Source 
Add aria-labels, aria-expanded, and semantic improvements to:
- RateComment: close button, rating scale, feedback textarea
- Citations: toggle button with count, source item buttons
- Source/SourceToken: contextual aria-labels for citation buttons
- StatusHistory: toggle button with expanded state
- WebSearchResults: descriptive favicon alt text
- FollowUps: convert div to button element
- RegenerateMenu: submit suggestion button
- FloatingButtons: action buttons, input field, submit button
- CitationModal: close button

WCAG: 4.1.2 (Name, Role, Value), 2.1.1 (Keyboard), 1.1.1 (Non-text Content)
This commit is contained in:
Classic298
2026-02-22 21:36:42 +01:00
committed by GitHub
parent d016cc5771
commit 2beeeb90c2
10 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
View File

@@ -254,6 +254,7 @@
>
{#each actions as action}
<button
aria-label={action.label}
class="px-1.5 py-[1px] hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl flex items-center gap-1 min-w-fit transition"
on:click={async () => {
selectedText = window.getSelection().toString();
@@ -291,6 +292,7 @@
id="floating-message-input"
class="ml-5 bg-transparent outline-hidden w-full flex-1 text-sm"
placeholder={$i18n.t('Ask a question')}
aria-label={$i18n.t('Ask a question')}
bind:value={floatingInputValue}
on:keydown={(e) => {
if (e.key === 'Enter') {
@@ -301,6 +303,7 @@
<div class="ml-1 mr-1">
<button
aria-label={$i18n.t('Submit question')}
class="{floatingInputValue !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"

3
src/lib/components/chat/Messages/Citations.svelte
View File

@@ -163,6 +163,8 @@
<div class=" py-1 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
<button
class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850/30"
aria-label={citations.length === 1 ? $i18n.t('Toggle 1 source') : $i18n.t('Toggle {{COUNT}} sources', { COUNT: citations.length })}
aria-expanded={showCitations}
on:click={() => {
showCitations = !showCitations;
}}
@@ -197,6 +199,7 @@
{#each citations as citation, idx}
<button
id={`source-${id}-${idx + 1}`}
aria-label={$i18n.t('View source: {{name}}', { name: decodeString(citation.source.name) })}
class="no-toggle outline-hidden flex dark:text-gray-300 bg-transparent text-gray-600 rounded-xl gap-1.5 items-center"
on:click={() => {
showCitationModal = true;

1
src/lib/components/chat/Messages/Citations/CitationModal.svelte
View File

@@ -130,6 +130,7 @@
</div>
<button
class="self-center"
aria-label={$i18n.t('Close citation modal')}
on:click={() => {
show = false;
}}

4
src/lib/components/chat/Messages/Markdown/Source.svelte
View File

@@ -1,6 +1,9 @@
<script lang="ts">
import { getContext } from 'svelte';
import { decodeString } from '$lib/utils';
const i18n = getContext('i18n');
export let id;
export let title: string = 'N/A';
@@ -37,6 +40,7 @@
{#if title !== 'N/A'}
<button
aria-label={$i18n.t('View source: {{title}}', { title: formattedTitle(decodeString(title)) })}
class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
on:click={() => {
onClick(id);

1
src/lib/components/chat/Messages/Markdown/SourceToken.svelte
View File

@@ -48,6 +48,7 @@
<LinkPreview.Root openDelay={0} bind:open={openPreview}>
<LinkPreview.Trigger>
<button
aria-label={`${getDisplayTitle(formattedTitle(decodeString(sourceIds[token.ids[0] - 1])))} +${(token?.ids ?? []).length - 1} more sources`}
class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
on:click={() => {
openPreview = !openPreview;

3
src/lib/components/chat/Messages/RateComment.svelte
View File

@@ -121,6 +121,7 @@
<!-- <div class=" text-sm">{$i18n.t('Tell us more:')}</div> -->
<button
aria-label={$i18n.t('Close feedback')}
on:click={() => {
show = false;
}}
@@ -135,6 +136,7 @@
<!-- 1-10 scale -->
{#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
<button
aria-label={$i18n.t('Rate {{rating}} out of 10', { rating })}
class="size-7 text-sm border border-gray-100/30 dark:border-gray-850/30 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
rating
? 'bg-gray-100 dark:bg-gray-800'
@@ -218,6 +220,7 @@
bind:value={comment}
class="w-full text-sm px-1 py-2 bg-transparent outline-hidden resize-none rounded-xl"
placeholder={$i18n.t('Feel free to add specific details')}
aria-label={$i18n.t('Additional feedback comments')}
rows="3"
/>
</div>

10
src/lib/components/chat/Messages/ResponseMessage/FollowUps.svelte
View File

@@ -15,18 +15,16 @@
<div class="flex flex-col text-left gap-1 mt-1.5">
{#each followUps as followUp, idx (idx)}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<Tooltip content={followUp} placement="top-start" className="line-clamp-1">
<div
class=" py-1.5 bg-transparent text-left text-sm flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer"
<button
class=" py-1.5 bg-transparent text-left text-sm flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer w-full"
on:click={() => onClick(followUp)}
aria-label={followUp}
aria-label={$i18n.t('Follow up: {{question}}', { question: followUp })}
>
<div class="line-clamp-1">
{followUp}
</div>
</div>
</button>
</Tooltip>
{#if idx < followUps.length - 1}

15
src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
View File

@@ -53,13 +53,14 @@
<div class="ml-2 self-center flex items-center">
<button
class="{inputValue !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1 self-center"
on:click={() => {
onRegenerate(inputValue);
show = false;
}}
aria-label={$i18n.t('Submit suggestion')}
class="{inputValue !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1 self-center"
on:click={() => {
onRegenerate(inputValue);
show = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"

2
src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte
View File

@@ -31,6 +31,8 @@
<div class="text-sm flex flex-col w-full">
<button
class="w-full"
aria-label={$i18n.t('Toggle status history')}
aria-expanded={showHistory}
on:click={() => {
showHistory = !showHistory;
}}

4
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
View File

@@ -67,7 +67,7 @@
<div class="w-fit">
<img
src="https://www.google.com/s2/favicons?sz=32&domain={item.link}"
alt="favicon"
alt="{item?.title ?? item.link} favicon"
class="size-3.5"
/>
</div>
@@ -107,7 +107,7 @@
<div class="w-fit">
<img
src="https://www.google.com/s2/favicons?sz=32&domain={url}"
alt="favicon"
alt="{url} favicon"
class="size-3.5"
/>
</div>