feat: Fixes #1940 WCAG support for website widget (#2071)

Co-authored-by: Kaj Oudshoorn <kaj@milvum.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,27 +1,42 @@
 <template>
-  <div class="chat-message--input">
+  <div
+    class="chat-message--input"
+    :class="{ 'is-focused': isFocused }"
+    @keydown.esc="hideEmojiPicker"
+  >
     <resizable-text-area
+      id="chat-input"
+      ref="chatInput"
       v-model="userInput"
+      :aria-label="$t('CHAT_PLACEHOLDER')"
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input"
       @typing-off="onTypingOff"
       @typing-on="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
     />
     <div class="button-wrap">
       <chat-attachment-button
         v-if="showAttachment"
         :on-attach="onSendAttachment"
       />
+      <button
+        v-if="hasEmojiPickerEnabled"
+        class="emoji-toggle"
+        aria-label="Emoji picker"
+        @click="toggleEmojiPicker()"
+      >
+        <i
+          class="icon ion-happy-outline"
+          :class="{ active: showEmojiPicker }"
+        />
+      </button>
       <emoji-input
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :on-click="emojiOnClick"
-      />
-      <i
-        v-if="hasEmojiPickerEnabled"
-        class="emoji-toggle icon ion-happy-outline"
-        :class="{ active: showEmojiPicker }"
-        @click="toggleEmojiPicker()"
+        @keydown.esc="hideEmojiPicker"
       />
       <chat-send-button
         v-if="showSendButton"
@@ -65,6 +80,7 @@ export default {
     return {
       userInput: '',
       showEmojiPicker: false,
+      isFocused: false,
     };
   },
 
@@ -78,21 +94,40 @@ export default {
     showSendButton() {
       return this.userInput.length > 0;
     },
+    isOpen() {
+      return this.$store.state.events.isOpen;
+    },
+  },
+  watch: {
+    isOpen(isOpen) {
+      if (isOpen) {
+        this.focusInput();
+      }
+    },
   },
-
   destroyed() {
     document.removeEventListener('keypress', this.handleEnterKeyPress);
   },
   mounted() {
     document.addEventListener('keypress', this.handleEnterKeyPress);
+    if (this.isOpen) {
+      this.focusInput();
+    }
   },
 
   methods: {
+    onBlur() {
+      this.isFocused = false;
+    },
+    onFocus() {
+      this.isFocused = true;
+    },
     handleButtonClick() {
       if (this.userInput && this.userInput.trim()) {
         this.onSendMessage(this.userInput);
       }
       this.userInput = '';
+      this.focusInput();
     },
     handleEnterKeyPress(e) {
       if (e.keyCode === 13 && !e.shiftKey) {
@@ -103,8 +138,9 @@ export default {
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
-    hideEmojiPicker() {
+    hideEmojiPicker(e) {
       if (this.showEmojiPicker) {
+        e.stopPropagation();
         this.toggleEmojiPicker();
       }
     },
@@ -120,22 +156,33 @@ export default {
     toggleTyping(typingStatus) {
       this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
     },
+    focusInput() {
+      this.$refs.chatInput.focus();
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
 
 .chat-message--input {
   align-items: center;
   display: flex;
+  padding: 0 $space-small 0 $space-slab;
+  border-radius: 7px;
+
+  &.is-focused {
+    box-shadow: 0 0 0 1px $color-woot, 0 0 2px 3px $color-primary-light;
+  }
 }
 
 .emoji-toggle {
+  @include button-size;
+
   font-size: $font-size-large;
   color: $color-gray;
-  padding-right: $space-smaller;
   cursor: pointer;
 }
 
@@ -143,13 +190,10 @@ export default {
   right: $space-one;
 }
 
-.file-uploads {
-  margin-right: $space-small;
-}
-
 .button-wrap {
   display: flex;
   align-items: center;
+  padding-left: $space-small;
 }
 
 .user-message-input {
@@ -158,6 +202,9 @@ export default {
   min-height: $space-large;
   max-height: 2.4 * $space-mega;
   resize: none;
+  padding: 0;
   padding-top: $space-small;
+  margin-top: $space-small;
+  margin-bottom: $space-small;
 }
 </style>