@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
32 lines • 1.14 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Stack } from '@fluentui/react';
import React from 'react';
/**
* @internal
* Announcer component to maker aria announcements on actions
*/
export const Announcer = (props) => {
const { announcementString, ariaLive } = props;
// Use role="alert" for assertive announcements as it's more reliably announced by screen readers
// even when focus is on interactive elements
const role = ariaLive === 'assertive' ? 'alert' : 'status';
return React.createElement(Stack, { "data-testid": "announcer", "aria-live": ariaLive, role: role, "aria-atomic": true, styles: announcerStyles }, announcementString);
};
/**
* Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.
*/
const announcerStyles = {
root: {
position: 'absolute',
width: '1px',
height: '1px',
padding: 0,
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
whiteSpace: 'nowrap',
border: 0
}
};
//# sourceMappingURL=Announcer.js.map