improve chat input accessibility (#2353)

Sets aria-role="textbox" and aria-placeholder

webroot/js/components/chat/chat-input.js

@@ -347,8 +347,9 @@ export default class ChatInput extends Component {
         >
           <${ContentEditable}
             id="message-input"
+            aria-role="textbox"
             class="appearance-none block w-full bg-transparent text-sm text-gray-700 h-full focus:outline-none"
-            placeholderText=${placeholderText}
+            aria-placeholder=${placeholderText}
             innerRef=${this.formMessageInput}
             html=${inputHTML}
             disabled=${!inputEnabled}

webroot/styles/chat.css

@@ -62,7 +62,7 @@
 
 /* If the div is empty then show the placeholder */
 #message-input:empty:before {
-  content: attr(placeholderText);
+  content: attr(aria-placeholder);
   pointer-events: none;
   position: absolute; /* Fixes firefox positioning caret on the right */
   display: block; /* For Firefox */