forked from Workday/canvas-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FocusRedirect.tsx
64 lines (58 loc) · 2.03 KB
/
FocusRedirect.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import * as React from 'react';
import {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
import {
Popup,
useCloseOnEscape,
useCloseOnOutsideClick,
useInitialFocus,
useReturnFocus,
useFocusRedirect,
usePopupModel,
} from '@workday/canvas-kit-react/popup';
import {Box, HStack} from '@workday/canvas-kit-react/layout';
export const FocusRedirect = () => {
const model = usePopupModel();
useCloseOnOutsideClick(model);
useCloseOnEscape(model);
useInitialFocus(model);
useReturnFocus(model);
useFocusRedirect(model);
const handleDelete = () => {
console.log('Delete Item');
};
const popupId = 'popup-test-id';
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]);
return (
<Popup model={model}>
<HStack spacing="s">
<Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
<div aria-owns={popupId} style={{position: 'absolute'}} />
<Popup.Popper>
<Popup.Card width={400}>
<Popup.CloseIcon aria-label="Close" />
<Popup.Heading>Delete Item</Popup.Heading>
<Popup.Body>
<Box as="p" marginTop="zero">
Are you sure you'd like to delete the item titled 'My Item'?
</Box>
<HStack spacing="s">
<Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
Delete
</Popup.CloseButton>
{/* Disabled elements should not be focusable and focus should move to the next focusable element */}
<Popup.CloseButton disabled>Cancel</Popup.CloseButton>
</HStack>
</Popup.Body>
</Popup.Card>
</Popup.Popper>
<SecondaryButton>Next Focusable Button</SecondaryButton>
<SecondaryButton>Focusable Button After Popup</SecondaryButton>
</HStack>
</Popup>
);
};