fix: fix mixin name and add aria label button

oramasearch · Jul 23, 2024 · f6021f2 · f6021f2
1 parent 9756b1a
commit f6021f2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/...ama-chat-messages-container/orama-chat-assistent-message/orama-chat-assistent-message.tsx b/...ama-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"
             >
               <ph-copy />
             </orama-button>
@@ -53,6 +54,7 @@ export class OramaChatAssistentMessage {
               variant="icon"
               onClick={this.handleRetryMessage}
               onKeyDown={this.handleRetryMessage}
+              aria-label="Retry message"
             >
               <span class={this.isRetrying ? 'retrying' : ''}>
                 {this.isRetrying ? <ph-arrows-clockwise weight="fill" /> : <ph-arrows-clockwise />}
@@ -63,14 +65,14 @@ export class OramaChatAssistentMessage {
               variant="icon"
               onClick={this.handleDislikeMessage}
               onKeyDown={this.handleDislikeMessage}
+              aria-label="Dislike message"
             >
               {this.isDisliked ? <ph-thumbs-down weight="fill" /> : <ph-thumbs-down />}
             </orama-button>
           </div>
         </div>
         <div class="sources-wrapper">
-          {/* TODO: We need to have a way to display this title only for screen readers so we can improve accessibility */}
-          {/* <h2>Sources</h2> */}
+          <h2 class="sr-only">Sources</h2>
           <div class="source">
             <orama-text as="h3" styledAs="span" class="source-title">
               Title title title

diff --git 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();
+  }
 }