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

State-changed events modified to be in aria live region (#3469)

Browse source 
* Made changes to chatcontainer, still facing issue with only reading out the newest message

* Added accessibility measure for chat to allow for latest message to be read by screen reader

* Fixed linting errors

* Fixed linting errors pt. 2

* Fixed linting errors, the finale?

* Ok this is actually it i promise

* add username to be read out by screenreader

* fix string concat linter issue

* fix linting indexing issue

* remove test mp4 files

---------

Co-authored-by: melghali <melghali@andrew.cmu.edu>
This commit is contained in:
Riya Bhatia 2024-03-06 01:02:58 -05:00 committed by GitHub
parent 45436162bd
commit 1ddba0118e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/components/chat/ChatContainer/ChatContainer.module.scss
View file

@ -71,3 +71,12 @@
transform: translateY(0);
}
}
.chatAccessibilityHidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}

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

@ -317,6 +317,17 @@ 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}`;
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<ChatContainerProps> = ({
)}
>
<div
aria-live="off"
id="chat-container"
className={styles.chatContainer}
style={desktop && { width: `${defaultChatWidth}px` }}
@ -351,6 +363,9 @@ export const ChatContainer: FC<ChatContainerProps> = ({
<div className={styles.resizeHandle} onMouseDown={startDrag} role="presentation" />
)}
</div>
<span className={styles.chatAccessibilityHidden} aria-live="polite">
{lastMessage}
</span>
</ErrorBoundary>
);
};