From 17bf41461cdd7bb7698e452137723c207d3ea2ed Mon Sep 17 00:00:00 2001
From: Albin Larsson <albin.post@gmail.com>
Date: Thu, 17 Nov 2022 19:32:25 +0100
Subject: [PATCH] improve chat input accessibility (#2353)

Sets aria-role="textbox" and aria-placeholder
---
 webroot/js/components/chat/chat-input.js | 3 ++-
 webroot/styles/chat.css                  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/webroot/js/components/chat/chat-input.js b/webroot/js/components/chat/chat-input.js
index 3d3b5dce9..264a1c807 100644
--- a/webroot/js/components/chat/chat-input.js
+++ b/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}
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index 3bf2ef932..504b51224 100644
--- a/webroot/styles/chat.css
+++ b/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 */