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}