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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user