Merge pull request #3367 from overleaf/ho-ms-jel-chat-a11y

Improve chat accessibility

GitOrigin-RevId: 853da57460c7e3a18abbe1130553e34bd661b6b3

services/web/frontend/js/features/chat/components/chat-pane.js

@@ -15,6 +15,7 @@ function ChatPane({
   sendMessage,
   userId
 }) {
+  const { t } = useTranslation()
   useEffect(() => {
     loadMoreMessages()
   }, [])
@@ -36,6 +37,7 @@ function ChatPane({
         itemCount={messageContentCount}
       >
         <div>
+          <h2 className="sr-only">{t('chat')}</h2>
           {loading && <LoadingSpinner />}
           {shouldDisplayPlaceholder && <Placeholder />}
           <MessageList

services/web/frontend/js/features/chat/components/message-input.js

@@ -15,7 +15,11 @@ function MessageInput({ resetUnreadMessages, sendMessage }) {
 
   return (
     <div className="new-message">
+      <label htmlFor="chat-input" className="sr-only">
+        {t('your_message')}
+      </label>
       <textarea
+        id="chat-input"
         placeholder={`${t('your_message')}…`}
         onKeyDown={handleKeyDown}
         onClick={resetUnreadMessages}

services/web/test/frontend/features/chat/components/message-input.test.js

@@ -21,7 +21,7 @@ describe('<MessageInput />', function() {
       />
     )
 
-    screen.getByPlaceholderText('Your Message…')
+    screen.getByLabelText('Your Message')
   })
 
   it('sends a message after typing and hitting enter', function() {
@@ -32,7 +32,7 @@ describe('<MessageInput />', function() {
       />
     )
 
-    const input = screen.getByPlaceholderText('Your Message…')
+    const input = screen.getByRole('textbox')
 
     fireEvent.change(input, { target: { value: 'hello world' } })
     fireEvent.keyDown(input, { key: 'Enter' })