2024-08-23 10:22:16 -04:00
|
|
|
// client/src/a11y/Announcer.tsx
|
2024-08-19 03:51:17 -04:00
|
|
|
import React from 'react';
|
2024-08-13 03:04:27 -04:00
|
|
|
|
|
|
|
|
interface AnnouncerProps {
|
2024-08-23 10:22:16 -04:00
|
|
|
statusMessage: string;
|
2024-08-30 00:14:37 -04:00
|
|
|
logMessage: string;
|
2024-08-13 03:04:27 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-30 00:14:37 -04:00
|
|
|
const Announcer: React.FC<AnnouncerProps> = ({ statusMessage, logMessage }) => {
|
2024-08-13 03:04:27 -04:00
|
|
|
return (
|
2024-08-23 10:22:16 -04:00
|
|
|
<div className="sr-only">
|
2024-08-30 00:14:37 -04:00
|
|
|
<div aria-live="polite" aria-atomic="true">
|
2024-08-23 10:22:16 -04:00
|
|
|
{statusMessage}
|
|
|
|
|
</div>
|
|
|
|
|
<div aria-live="polite" aria-atomic="true">
|
2024-08-30 00:14:37 -04:00
|
|
|
{logMessage}
|
2024-08-23 10:22:16 -04:00
|
|
|
</div>
|
2024-08-13 03:04:27 -04:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Announcer;
|