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:
@@ -254,6 +254,7 @@
|
||||
>
|
||||
{#each actions as action}
|
||||
<button
|
||||
aria-label={action.label}
|
||||
class="px-1.5 py-[1px] hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl flex items-center gap-1 min-w-fit transition"
|
||||
on:click={async () => {
|
||||
selectedText = window.getSelection().toString();
|
||||
@@ -291,6 +292,7 @@
|
||||
id="floating-message-input"
|
||||
class="ml-5 bg-transparent outline-hidden w-full flex-1 text-sm"
|
||||
placeholder={$i18n.t('Ask a question')}
|
||||
aria-label={$i18n.t('Ask a question')}
|
||||
bind:value={floatingInputValue}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
@@ -301,6 +303,7 @@
|
||||
|
||||
<div class="ml-1 mr-1">
|
||||
<button
|
||||
aria-label={$i18n.t('Submit question')}
|
||||
class="{floatingInputValue !== ''
|
||||
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
|
||||
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"
|
||||
|
||||
Reference in New Issue
Block a user