fix(webchat): add aria labels to header buttons for screen readers

Also add title attributes for mouse users
botpress · Jul 14, 2022 · 8c6ebb8 · 8c6ebb8
1 parent 32aa5c8
commit 8c6ebb8
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/modules/channel-web/src/views/lite/components/Header.tsx b/modules/channel-web/src/views/lite/components/Header.tsx
@@ -102,6 +102,14 @@ class Header extends React.Component<HeaderProps> {
         type="button"
         tabIndex={-1}
         id="btn-delete-conversation"
+        aria-label={this.props.intl.formatMessage({
+          id: 'header.deleteConversationButton',
+          defaultMessage: 'Delete conversation'
+        })}
+        title={this.props.intl.formatMessage({
+          id: 'header.deleteConversationButton',
+          defaultMessage: 'Delete conversation'
+        })}
         ref={el => (this.btnEls[0] = el)}
         className={'bpw-header-icon bpw-header-icon-delete'}
         onClick={this.handleDeleteConversation}
@@ -119,6 +127,14 @@ class Header extends React.Component<HeaderProps> {
         type="button"
         tabIndex={-1}
         id="btn-reset"
+        aria-label={this.props.intl.formatMessage({
+          id: 'header.resetConversation',
+          defaultMessage: 'Reset conversation'
+        })}
+        title={this.props.intl.formatMessage({
+          id: 'header.resetConversation',
+          defaultMessage: 'Reset conversation'
+        })}
         ref={el => (this.btnEls[1] = el)}
         className={'bpw-header-icon bpw-header-icon-reset'}
         onClick={this.props.resetSession}
@@ -136,6 +152,14 @@ class Header extends React.Component<HeaderProps> {
         type="button"
         tabIndex={-1}
         id="btn-download"
+        aria-label={this.props.intl.formatMessage({
+          id: 'header.downloadConversation',
+          defaultMessage: 'Download conversation'
+        })}
+        title={this.props.intl.formatMessage({
+          id: 'header.downloadConversation',
+          defaultMessage: 'Download conversation'
+        })}
         ref={el => (this.btnEls[2] = el)}
         className={'bpw-header-icon bpw-header-icon-download'}
         onClick={this.props.downloadConversation}
@@ -153,6 +177,14 @@ class Header extends React.Component<HeaderProps> {
         type="button"
         tabIndex={-1}
         id="btn-conversations"
+        aria-label={this.props.intl.formatMessage({
+          id: 'header.conversations',
+          defaultMessage: 'Conversations'
+        })}
+        title={this.props.intl.formatMessage({
+          id: 'header.conversations',
+          defaultMessage: 'Conversations'
+        })}
         ref={el => (this.btnEls[3] = el)}
         className={'bpw-header-icon bpw-header-icon-convo'}
         onClick={this.props.toggleConversations}
@@ -170,6 +202,14 @@ class Header extends React.Component<HeaderProps> {
         type="button"
         tabIndex={-1}
         id="btn-botinfo"
+        aria-label={this.props.intl.formatMessage({
+          id: 'header.botInfo',
+          defaultMessage: 'Bot information'
+        })}
+        title={this.props.intl.formatMessage({
+          id: 'header.botInfo',
+          defaultMessage: 'Bot information'
+        })}
         ref={el => (this.btnEls[4] = el)}
         className={'bpw-header-icon bpw-header-icon-botinfo'}
         onClick={this.props.toggleBotInfo}
@@ -190,6 +230,10 @@ class Header extends React.Component<HeaderProps> {
           id: 'header.hideChatWindow',
           defaultMessage: 'Hide the chat window'
         })}
+        title={this.props.intl.formatMessage({
+          id: 'header.hideChatWindow',
+          defaultMessage: 'Hide the chat window'
+        })}
         ref={el => (this.btnEls[5] = el)}
         className={'bpw-header-icon bpw-header-icon-close'}
         onClick={this.props.hideChat}
@@ -212,6 +256,7 @@ class Header extends React.Component<HeaderProps> {
           tabIndex={-1}
           className={'bpw-header-icon'}
           onClick={btn.onClick.bind(this, btn.id, this)}
+          aria-label={btn.label || ''}
           title={btn.label || ''}
         >
           {typeof Icon === 'function' ? <Icon /> : Icon}

diff --git a/modules/channel-web/src/views/lite/translations/en.json b/modules/channel-web/src/views/lite/translations/en.json
@@ -7,11 +7,15 @@
   "composer.sendMessage": "Send Message",
   "composer.interact": "Interact with your chatbot",
   "footer.poweredBy": "We're {icon} by {link}",
+  "header.botInfo": "Bot information",
   "header.conversations": "Conversations",
+  "header.downloadConversation": "Download conversation",
   "header.hideChatWindow": "Hide the chat window",
   "header.deleteConversation": "Are you sure you want to delete this entire conversation?",
+  "header.deleteConversationButton": "Delete conversation",
   "header.deleteConversationYes": "Delete",
   "header.deleteConversationNo": "Cancel",
+  "header.resetConversation": "Reset conversation",
   "conversationList.untitledConversation": "Untitled Conversation",
   "conversationList.title": "Conversation {id}",
   "botInfo.backToConversation": "Back to Conversation",