fix(a11y): add aria-labels to chat message components (#21708)
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:
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user