@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
47 lines (46 loc) • 3.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { DeleteButton } from '@workday/canvas-kit-react/button';
import { useUniqueId } from '@workday/canvas-kit-react/common';
import { Box, Flex } from '@workday/canvas-kit-react/layout';
import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useFocusRedirect, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const cardStyles = createStyles({
width: px2rem(400),
});
const bodyStyles = createStyles({
marginBlock: '0',
});
const flexStyles = createStyles({
gap: system.gap.md,
padding: system.padding.xs,
});
const layoutStyles = createStyles({
gap: system.gap.md,
alignItems: 'flex-start',
flexDirection: 'column',
});
/**
* Default portal to body; sibling div with aria-owns references the portaled stack container
* so screen readers that support aria-owns can present content in logical order.
* useInitialFocus announces the popup in screen readers; useFocusRedirect manages Tab in/out.
*/
export const PopupAriaOwns = () => {
const initialFocusRef = React.useRef(null);
const model = usePopupModel({ initialFocusRef });
useCloseOnOutsideClick(model);
useCloseOnEscape(model);
useInitialFocus(model);
useReturnFocus(model);
useFocusRedirect(model);
const messageId = useUniqueId();
const popupId = useUniqueId();
const visible = model.state.visibility !== 'hidden';
React.useLayoutEffect(() => {
if (visible && model.state.stackRef.current) {
model.state.stackRef.current.setAttribute('id', popupId);
}
}, [model.state.stackRef, visible, popupId]);
return (_jsxs(Flex, { cs: layoutStyles, children: [_jsx(Flex, { children: _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx("div", { "aria-owns": popupId, style: { position: 'absolute' } }), _jsx(Popup.Popper, { children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.CloseIcon, { "aria-label": "Close" }), _jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" }), _jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" })] })] }) })] }) }), _jsx("p", { children: "This content should come after the popup in the reading order. When someone uses a screen reader or moves through the page with tabbing, they will read or reach this content only after the popup content is shown. This helps keep the page easy to follow and makes sure that the popup is announced before any information that comes next." })] }));
};