diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss index b44aab381..49678f5a4 100644 --- a/web/components/chat/ChatContainer/ChatContainer.module.scss +++ b/web/components/chat/ChatContainer/ChatContainer.module.scss @@ -71,3 +71,12 @@ transform: translateY(0); } } + +.chatAccessibilityHidden { + top:0; + left:-2px; + width:1px; + height:1px; + position:absolute; + overflow:hidden; +} diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 6b5ce9467..06a1413b4 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -317,6 +317,17 @@ export const ChatContainer: FC = ({ } } + // Retrieve, clean, and attach username to newest chat message to be read out by screenreader + function getLastMessage() { + if (messages.length > 0 && typeof messages[messages.length - 1].body !== 'undefined') { + const message = messages[messages.length - 1].body.replace(/(<([^>]+)>)/gi, ''); + const stringToRead = `${usernameToHighlight} said ${message}`; + return stringToRead; + } + return ''; + } + const lastMessage = getLastMessage(); + if (resizeWindowCallback) window.removeEventListener('resize', resizeWindowCallback); if (desktop) { window.addEventListener('resize', resize); @@ -337,6 +348,7 @@ export const ChatContainer: FC = ({ )} >
= ({
)}
+ + {lastMessage} + ); };