| 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; | |