25 lines
754 B
TypeScript
25 lines
754 B
TypeScript
import React, { useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { shiftAlert } from './service';
|
|
import { ScreenReaderAlert } from './queue';
|
|
|
|
const ARIA_ALERT_EXT_TIMEOUT = 15000;
|
|
|
|
interface Props {
|
|
olderAlert: ScreenReaderAlert | undefined;
|
|
}
|
|
|
|
const ScreenReaderAlert: React.FC<Props> = ({ olderAlert }) => {
|
|
useEffect(() => {
|
|
if (olderAlert) setTimeout(() => shiftAlert(), ARIA_ALERT_EXT_TIMEOUT);
|
|
}, [olderAlert?.id]);
|
|
|
|
const ariaAlertsElement = document.getElementById('aria-polite-alert');
|
|
|
|
return (olderAlert && olderAlert.text && ariaAlertsElement !== null)
|
|
? createPortal(olderAlert.text, document.getElementById('aria-polite-alert') as HTMLElement)
|
|
: null;
|
|
};
|
|
|
|
export default ScreenReaderAlert;
|