Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🍎 refactor(a11y): Optimize Live Region Announcements for Apple VoiceOver (#3762)

Browse source 
* refactor: first pass rewrite

* refactor: update CLEAR_DELAY to 5000 milliseconds in LiveAnnouncer.tsx

* refactor: assertive messages to clear queue immediately, fix circular useCallback dependency issue

* chore: comment
This commit is contained in:
Danny Avila 2024-08-23 10:22:16 -04:00 • committed by GitHub
parent f86e9dd04c
commit 967e8a1e92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 79 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/a11y/Announcer.tsx
View file

@ -1,18 +1,20 @@
// client/src/a11y/Announcer.tsx
import React from 'react';
import MessageBlock from './MessageBlock';
interface AnnouncerProps {
politeMessage: string;
politeMessageId: string;
assertiveMessage: string;
assertiveMessageId: string;
statusMessage: string;
responseMessage: string;
}
const Announcer: React.FC<AnnouncerProps> = ({ politeMessage, assertiveMessage }) => {
const Announcer: React.FC<AnnouncerProps> = ({ statusMessage, responseMessage }) => {
return (
<div>
<MessageBlock aria-live="assertive" aria-atomic="true" message={assertiveMessage} />
<MessageBlock aria-live="polite" aria-atomic="false" message={politeMessage} />
<div className="sr-only">
<div aria-live="assertive" aria-atomic="true">
{statusMessage}
</div>
<div aria-live="polite" aria-atomic="true">
{responseMessage}
</div>
</div>
);
};