LibreChat/client/src/a11y/MessageBlock.tsx
Danny Avila 6655304753
🎙️ a11y: Screen Reader Support for Dynamic Content Updates (#3625)
* WIP: first pass, hooks

* wip: isStream arg

* feat: first pass, dynamic content updates, screen reader announcements

* chore: unrelated, styling redundancy
2024-08-13 03:04:27 -04:00

26 lines
553 B
TypeScript

import React from 'react';
const offScreenStyle: React.CSSProperties = {
border: 0,
clip: 'rect(0 0 0 0)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
whiteSpace: 'nowrap',
padding: 0,
width: '1px',
position: 'absolute',
};
interface MessageBlockProps {
message: string;
'aria-live': 'polite' | 'assertive';
}
const MessageBlock: React.FC<MessageBlockProps> = ({ message, 'aria-live': ariaLive }) => (
<div style={offScreenStyle} role="log" aria-live={ariaLive}>
{message}
</div>
);
export default MessageBlock;