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:
Classic298
2026-02-22 14:36:42 -06:00
committed by GitHub
parent d016cc5771
commit 2beeeb90c2
10 changed files with 31 additions and 15 deletions
@@ -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;