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
@@ -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>