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/chat/Messages/Markdown/ColonFenceBlock.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
{header}
</span>
<div class="invisible group-hover:visible flex gap-0.5 shrink-0">
<div class="hover-reveal flex gap-0.5 shrink-0">
<Tooltip content={copied ? $i18n.t('Copied') : $i18n.t('Copy')}>
<button
class="p-1 rounded-lg bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition"
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+1 -1
View File
@@ -245,7 +245,7 @@
</table>
</div>
<div class=" absolute top-1 right-1.5 z-20 invisible group-hover:visible flex gap-0.5">
<div class=" absolute top-1 right-1.5 z-20 hover-reveal flex gap-0.5">
<Tooltip content={$i18n.t('Copy')}>
<button
class="p-1 rounded-lg bg-transparent transition"
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+2 -2
View File
@@ -443,7 +443,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
{formatMessageTimestamp(message.timestamp * 1000)}
</time>
@@ -462,7 +462,7 @@
id="merge-response-button"
class="{true
? 'visible'
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
mergeResponsesHandler();
}}
src/lib/components/chat/Messages/OutputEditView.svelte
+1 -1
View File
@@ -335,8 +335,8 @@
<!-- Delete -->
<div class="pt-1.5">
<button
class="hover-reveal p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
aria-label={$i18n.t('Delete')}
class="invisible group-hover:visible p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
on:click={() => deleteIndices(di.indices)}
>
<svg
src/lib/components/chat/Messages/ResponseMessage.svelte
+14 -14
View File
@@ -1026,7 +1026,7 @@
aria-label={$i18n.t('Edit')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
editMessageHandler();
}}
@@ -1056,7 +1056,7 @@
aria-label={$i18n.t('Copy')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
on:click={() => {
copyToClipboard(visibleResponseContent);
}}
@@ -1085,7 +1085,7 @@
aria-label={$i18n.t('Insert into note')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
: 'hover-reveal'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => {
onInsertToNote?.(visibleResponseContent);
}}
@@ -1102,7 +1102,7 @@
id="speak-button-{message.id}"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
if (!loadingSpeech) {
if (speaking) {
@@ -1202,7 +1202,7 @@
aria-hidden="true"
class=" {isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
on:click={() => {
console.log(message);
}}
@@ -1234,7 +1234,7 @@
aria-label={$i18n.t('Good Response')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? ''
).toString() === '1'
? 'bg-gray-100 dark:bg-gray-800'
@@ -1272,7 +1272,7 @@
aria-label={$i18n.t('Bad Response')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? ''
).toString() === '-1'
? 'bg-gray-100 dark:bg-gray-800'
@@ -1314,7 +1314,7 @@
id="continue-response-button"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
continueResponse();
}}
@@ -1390,7 +1390,7 @@
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1417,7 +1417,7 @@
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={() => {
showRateComment = false;
regenerateResponse(message);
@@ -1462,7 +1462,7 @@
aria-label={action.name}
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
actionMessage(action.id, message);
}}
@@ -1492,7 +1492,7 @@
aria-label="Fork chat"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
forkHandler?.(message.id);
}}
@@ -1526,7 +1526,7 @@
id="delete-response-button"
class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
disabled={!allowDelete}
on:click={(e) => {
if (!allowDelete) {
@@ -1567,7 +1567,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
{formatMessageTimestamp(message.timestamp * 1000)}
</time>
src/lib/components/chat/Messages/UserMessage.svelte
+5 -7
View File
@@ -225,7 +225,7 @@
class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'group-hover:visible invisible transition'}"
: 'hover-reveal transition'}"
type="button"
on:click={() => {
editedFiles.splice(fileIdx, 1);
@@ -421,9 +421,7 @@
>
<time
datetime={new Date(message.timestamp * 1000).toISOString()}
class="{compactPreview
? ''
: 'invisible group-hover:visible'} {($settings?.chatBubble ?? true)
class="{compactPreview ? '' : 'hover-reveal'} {($settings?.chatBubble ?? true)
? 'mr-1'
: 'ml-1 shrink-0 whitespace-nowrap'} text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
>
@@ -533,7 +531,7 @@
<button
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
aria-label={$i18n.t('Edit')}
on:click={() => {
editMessageHandler();
@@ -562,7 +560,7 @@
<button
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
aria-label={$i18n.t('Copy')}
on:click={() => {
copyToClipboard(message.content);
@@ -593,7 +591,7 @@
aria-label={$i18n.t('Delete')}
class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
: 'hover-reveal'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
on:click={(e) => {
if (e.shiftKey) {
deleteMessageHandler();