diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx index 28238014..cba975f0 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx @@ -45,6 +45,7 @@ export class OramaChatAssistentMessage { onClick={this.handleCopyToClipboard} onKeyDown={this.handleCopyToClipboard} withTooltip={this.isCopied ? 'Copied!' : undefined} + aria-label="Copy message" > @@ -53,6 +54,7 @@ export class OramaChatAssistentMessage { variant="icon" onClick={this.handleRetryMessage} onKeyDown={this.handleRetryMessage} + aria-label="Retry message" > {this.isRetrying ? : } @@ -63,14 +65,14 @@ export class OramaChatAssistentMessage { variant="icon" onClick={this.handleDislikeMessage} onKeyDown={this.handleDislikeMessage} + aria-label="Dislike message" > {this.isDisliked ? : }
- {/* TODO: We need to have a way to display this title only for screen readers so we can improve accessibility */} - {/*

Sources

*/} +

Sources

Title title title diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss index a48f93a1..31f24bf8 100644 --- a/packages/ui-stencil/src/styles/globals.scss +++ b/packages/ui-stencil/src/styles/globals.scss @@ -23,4 +23,8 @@ &.theme-dark { @include mapToCustomProperties($theme-colors-dark); } + + .sr-only { + @include screen-reader-only(); + } }