mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixes for aria-live bugs (#3694)

Browse source 
* make the aria-live text adhere to the last message's username

* Wrap lastMessage in an Interweave to handle pre-encoded characters properly

---------

Co-authored-by: Muaz Ahmad <mahmad2000@protonmail.com>
This commit is contained in:
mahmed2000 2024-04-15 06:06:29 +05:00 committed by GitHub
parent 1d3e52d2bb
commit 5a145eb407
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/components/chat/ChatContainer/ChatContainer.tsx
View file

@ -1,6 +1,7 @@
import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Interweave } from 'interweave';
import {
ConnectedClientInfoEvent,
FediverseEvent,
@ -320,8 +321,15 @@ export const ChatContainer: FC<ChatContainerProps> = ({
// 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}`;
const lastMessage = messages[messages.length - 1];
const message = lastMessage.body.replace(/(<([^>]+)>)/gi, '');
let stringToRead = '';
if (typeof lastMessage.user !== 'undefined') {
const username = lastMessage.user.displayName;
stringToRead = `${username} said ${message}`;
} else {
stringToRead = `System message: ${message}`;
}
return stringToRead;
}
return '';
@ -364,7 +372,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
)}
</div>
<span className={styles.chatAccessibilityHidden} aria-live="polite">
{lastMessage}
<Interweave content={lastMessage} />
</span>
</ErrorBoundary>
);