@workday/canvas-kit-docs 14.3.8 → 14.3.10

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -5,7 +5,17 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Select} from '@workday/canvas-kit-react/select';
 import {plusIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
 
 export default () => {
   const model = useModalModel();
@@ -18,6 +28,8 @@ export default () => {
     console.log('form data', {
       first: (event.currentTarget.elements.namedItem('first') as HTMLInputElement).value,
       last: (event.currentTarget.elements.namedItem('last') as HTMLInputElement).value,
+      favoriteColor: (event.currentTarget.elements.namedItem('favoriteColor') as HTMLInputElement)
+        .value,
     });
 
     // if it looks good, submit to the server and close the modal
@@ -40,8 +52,21 @@ export default () => {
               <FormField.Label>Last Name</FormField.Label>
               <FormField.Input as={TextInput} name="last" />
             </FormField>
+            <FormField>
+              <FormField.Label>Favorite Color</FormField.Label>
+              <FormField.Field>
+                <Select items={FAVORITE_COLOR_OPTIONS}>
+                  <FormField.Input as={Select.Input} name="favoriteColor" />
+                  <Select.Popper>
+                    <Select.Card>
+                      <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+                    </Select.Card>
+                  </Select.Popper>
+                </Select>
+              </FormField.Field>
+            </FormField>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={flexStyles}>
             <Modal.CloseButton>Cancel</Modal.CloseButton>
             <PrimaryButton type="submit">Submit</PrimaryButton>
           </Flex>

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,60 +1,158 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {Select} from '@workday/canvas-kit-react/select';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const INITIAL_FILES = ['Resume.docx', 'Cover_Letter.docx', 'References.docx'];
+
+const actionStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
+
+const headingStyles = createStyles({
+  marginY: system.space.zero,
+});
+
+const emptyStateStyles = createStyles({
+  maxWidth: '28rem',
+  outline: 'none',
+});
+
+const listStyles = createStyles({
+  flexDirection: 'column',
+  gap: system.space.x4,
+  marginY: system.space.zero,
+  padding: system.space.zero,
+  listStyle: 'none',
+  maxWidth: '28rem',
+});
+
+const rowStyles = createStyles({
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: system.space.x4,
+  width: '100%',
+});
+
+function fileNameId(name: string) {
+  return `return-focus-file-${name.replace(/[^a-zA-Z0-9]/g, '_')}`;
+}
+
+/** Index of a delete button to focus after removing `deletedIndex`, or empty list. */
+function nextListFocusAfterDelete(deletedIndex: number, lengthBeforeDelete: number) {
+  if (lengthBeforeDelete <= 1) {
+    return 'empty' as const;
+  }
+  return deletedIndex < lengthBeforeDelete - 1 ? deletedIndex : deletedIndex - 1;
+}
 
 export default () => {
-  const ref = React.useRef(null);
-  const [value, setValue] = React.useState('');
+  const [items, setItems] = React.useState<string[]>(() => [...INITIAL_FILES]);
+  const [confirmingFileName, setConfirmingFileName] = React.useState<string | null>(null);
+  const bodyTextId = useUniqueId();
+
+  const returnFocusRef = React.useRef<HTMLButtonElement | null>(null);
+  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
+  const deleteButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
+  const emptyStateRef = React.useRef<HTMLDivElement>(null);
+  const pendingDeleteIndexRef = React.useRef<number | null>(null);
+  const postDeleteFocusRef = React.useRef<number | 'empty' | null>(null);
+
   const model = useModalModel({
-    returnFocusRef: ref,
+    returnFocusRef,
+    initialFocusRef: cancelButtonRef,
   });
 
-  const handleDelete = () => {
-    console.log('Deleted item');
+  React.useEffect(() => {
+    if (model.state.visibility === 'hidden') {
+      setConfirmingFileName(null);
+      pendingDeleteIndexRef.current = null;
+    }
+  }, [model.state.visibility]);
+
+  React.useLayoutEffect(() => {
+    if (postDeleteFocusRef.current === null) {
+      return;
+    }
+    if (postDeleteFocusRef.current === 'empty') {
+      emptyStateRef.current?.focus();
+    } else {
+      deleteButtonRefs.current[postDeleteFocusRef.current]?.focus();
+    }
+    postDeleteFocusRef.current = null;
+  }, [items]);
+
+  const openDeleteModal = (index: number) => {
+    pendingDeleteIndexRef.current = index;
+    setConfirmingFileName(items[index]);
+    returnFocusRef.current = deleteButtonRefs.current[index];
+    model.events.show();
+  };
+
+  const handleConfirmDelete = () => {
+    const idx = pendingDeleteIndexRef.current;
+    if (idx === null) {
+      return;
+    }
+    postDeleteFocusRef.current = nextListFocusAfterDelete(idx, items.length);
+    pendingDeleteIndexRef.current = null;
+    setItems(prev => prev.filter((_, i) => i !== idx));
   };
 
   return (
     <Modal model={model}>
-      <Select items={['', 'Delete', 'Two']}>
-        <FormField>
-          <FormField.Label>Choose an option</FormField.Label>
-          <FormField.Input
-            as={Select.Input}
-            ref={ref}
-            onChange={e => {
-              const option = e.currentTarget.value;
-              if (option === 'Delete') {
-                model.events.show();
-                setValue('');
-              } else {
-                setValue(e.currentTarget.value);
-              }
-            }}
-          />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <Heading as="h4" size="small" cs={headingStyles}>
+        Uploaded Files
+      </Heading>
+      <Box>
+        {items.length > 0 ? (
+          <Flex as="ul" cs={listStyles}>
+            {items.map((name, index) => (
+              <Flex as="li" key={name} cs={rowStyles}>
+                <Text as="span" id={fileNameId(name)}>
+                  {name}
+                </Text>
+                <Tooltip title="Delete">
+                  <DeleteButton
+                    aria-describedby={fileNameId(name)}
+                    icon={trashIcon}
+                    ref={el => {
+                      deleteButtonRefs.current[index] = el;
+                    }}
+                    onClick={() => openDeleteModal(index)}
+                  />
+                </Tooltip>
+              </Flex>
+            ))}
+          </Flex>
+        ) : (
+          <Box ref={emptyStateRef} tabIndex={-1} cs={emptyStateStyles}>
+            <Text>No files remaining.</Text>
+          </Box>
+        )}
+      </Box>
       <Modal.Overlay>
-        <Modal.Card>
-          <Modal.CloseIcon aria-label="Close" />
-          <Modal.Heading>Delete Item</Modal.Heading>
+        <Modal.Card aria-describedby={bodyTextId}>
+          <Modal.Heading>Delete file?</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginY="zero">
-              Are you sure you want to delete the item?
-            </Box>
+            <Text id={bodyTextId}>
+              {confirmingFileName
+                ? `Are you sure you want to delete ${confirmingFileName}?`
+                : 'Are you sure you want to delete this file?'}
+            </Text>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
-            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+          <Flex cs={actionStyles}>
+            <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>
+            <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>
               Delete
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

package/dist/mdx/react/popup/Popup.mdx

@@ -61,52 +61,56 @@ popup behaviors. For accessibility, these behaviors should be included most of t
 ### Initial Focus
 
 If you want focus to move to a specific element when the popup is opened, set the `initialFocusRef`
-of the model. Check with accessibility before doing this. The following example sets the focus on
-the "OK" button with an `aria-describedby` pointing to the model's `id` state so screen readers
-properly announce the message of the popup when focus is changed to the button. By default, focus
-will be placed on the first focusable element when the popup is opened.
+of the model. This is useful for popups that don't have a Close icon button near the top right of
+the popup. In general, we recommend setting focus to the first interactive component inside the
+popup that is the least destructive action.
 
 <ExampleCodeBlock code={InitialFocus} />
 
+> **Accessibility Note**: When initial focus lands on a control **below** the title (such as the OK
+> button in the example above), assign a unique `id` to supplementary text and pass
+> `aria-describedby` on `Popup.Card`. This augments the included `aria-labelledby` reference to
+> `Popup.Heading` so screen readers can announce both the heading and any supplementary text
+> automatically. When initial focus is on the heading itself, add `tabIndex={-1}` to `Popup.Heading`
+> so the title can receive programmatic focus. Choose where focus goes based on your product and
+> accessibility requirements.
+
 ### Focus Redirect
 
 Focus management is important to accessibility of popup contents. The following example shows
 `useFocusRedirect` being used to manage focus in and out of a Popup. This is very useful for
-Dialog-style popups. Since `Popup.Popper` renders contents to the bottom of the document body,
-`aria-owns` is used for screen readers that support it. This effectively treats a Popup like it
-exists in between the buttons while it is opened. Screen readers will navigate the content as if the
-content was not portalled to the bottom of the document body. Focus redirection tries to treat the
-Popup as if it were inline to the document. Tabbing out of the Popup will close the Popup and move
-focus to the next appropriate element.
-
-> **Note**: Safari does not support `aria-owns`. This means that the contents of the Popup will
-> appears out of order to Safari + VoiceOver users. We render popups at the bottom of the
-> document.body to ensure proper rendering. You could use `portal=false` on the `Popper` component,
-> but that would risk incorrect rendering in all browsers.
+non-modal popups. Focus redirection tries to treat the Popup as if it were inline to the document.
+Tabbing out of the Popup will close the Popup and move focus to an adjacent focusable element.
 
 <ExampleCodeBlock code={FocusRedirect} />
 
+> **Accessibility Note**: The `useFocusRedirect` hook **will not** have any effect on the reading
+> order of a screen reader. Screen reader users may get confused or disoriented when popups are
+> portalled to the bottom of the document body. In this example, we're testing the use of
+> `aria-owns` on a sibling `<div>` element pointing to the `Popup.Card` component. This remaps the
+> hierarchy of the accessibility tree (in supported browsers) to address the reading order problem.
+> For more information, see
+> [Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).
+
 ### Focus Trapping
 
 Focus trapping is similar to the [Focus Redirect](#focus-redirect) example, but will trap focus
-inside the popup instead of redirecting focus, it will be trapped inside the Popup. This is most
-useful for modal dialogs where the modal must be interacted with before normal interaction can
-continue.
-
-> **Note**: Using focus trapping outside a Modal context can give users a different experience
-> depending on how they interact with your application. Focus trapping will not prevent mouse users
-> from breaking out of a focus trap, nor will it prevent screen reader users from using virtual
-> cursors from breaking out. Modals should use additional techniques to truely "trap" focus into the
-> Popup to provide a consistent experience for all users.
+inside the popup instead of redirecting focus to adjacent focusable elements. This is necessary for
+modal dialogs where users must focus on the contents of the dialog before proceeding.
 
 <ExampleCodeBlock code={FocusTrap} />
 
+> **Accessibility Note**: Focus trapping will not prevent mouse users from breaking out of a focus
+> trap, nor will it prevent screen reader users from using virtual reading cursors from breaking
+> out. Consider using [Modal](/components/popups/modal/) instead when you need to focus users'
+> attention on a specific task inside of a popup..
+
 ### Multiple Popups
 
-If you need multiple Popups within the same component, you can create multiple models and pass a
-unique model to each Popup. Below is an example of 2 different popups within the same component.
-Since each Popup gets its own model, each Popup behaves independently. The same technique can be
-used for nested Popups.
+You can render more than one `Popup` in the same view by giving each its own model. This example
+pairs `Popup` with `useDialogModel` and `useModalModel` so you can compare **focus redirection**
+(Tab / Shift + Tab can move focus out of the first popup) and **focus trapping** (focus stays inside
+the second popup until it closes). Opening one does not close the other.
 
 <ExampleCodeBlock code={MultiplePopups} />
 
@@ -123,6 +127,11 @@ preserved.
 
 <ExampleCodeBlock code={NestedPopups} />
 
+> **Accessibility Note**: In this example, observe how users can traverse both opened popups using
+> the keyboard. This is likely to be a confusing experience for users and may necessitate focus
+> trapping inside each popup with careful consideration for setting initial focus and returning
+> focus.
+
 ### Custom Target
 
 It is common to have a custom target for your popup. Use the `as` prop to use your custom component.
@@ -138,6 +147,12 @@ requires a `label` prop.
 
 <ExampleCodeBlock code={CustomTarget} />
 
+> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be
+> able to access the popup. Bear in mind that click handlers only work with the keyboard when
+> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target
+> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard
+> event handlers for invoking the popup.
+
 ### Full Screen API
 
 By default, popups are created as children of the `document.body` element, but the `PopupStack`
@@ -175,6 +190,18 @@ The Popup component automatically handles right-to-left rendering.
 
 <ExampleCodeBlock code={RTL} />
 
+## Accessibility
+
+Popup content is usually portaled to the bottom of the `document.body`, which can affect **reading
+order for screen readers** and **keyboard focus order**. For more information about Popup
+accessibility, check out our documentation at
+[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).
+
+- For non-modal dialogs with `aria-owns` built-in to improve reading order for screen readers (that
+  support it), check out the [**Dialog**](/components/popups/dialog/) component.
+- For modal dialogs with built-in overlays and focus traps, check out the
+  [**Modal**](/components/popups/modal/) component.
+
 ## Component API
 
 <>

package/dist/mdx/react/popup/examples/Basic.tsx

@@ -6,8 +6,24 @@ import {
   useCloseOnOutsideClick,
   useInitialFocus,
   useReturnFocus,
+  useFocusRedirect,
 } from '@workday/canvas-kit-react/popup';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const cardStyles = createStyles({
+  width: px2rem(400),
+});
+
+const bodyStyles = createStyles({
+  marginY: system.space.zero,
+});
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
 
 export default () => {
   const model = usePopupModel();
@@ -16,6 +32,7 @@ export default () => {
   useCloseOnEscape(model);
   useInitialFocus(model);
   useReturnFocus(model);
+  useFocusRedirect(model);
 
   const handleDelete = () => {
     console.log('Delete Item');
@@ -25,15 +42,15 @@ export default () => {
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
       <Popup.Popper placement="top">
-        <Popup.Card width={400}>
+        <Popup.Card cs={cardStyles}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>
           <Popup.Body>
-            <Box as="p" marginY="zero">
+            <Box as="p" cs={bodyStyles}>
               Are you sure you'd like to delete the item titled 'My Item'?
             </Box>
           </Popup.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={flexStyles}>
             <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Popup.CloseButton>

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -11,6 +11,22 @@ import {
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+const cardStyles = createStyles({
+  width: px2rem(400),
+});
+
+const bodyStyles = createStyles({
+  marginY: system.space.zero,
+});
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
 
 export default () => {
   const model = usePopupModel();
@@ -25,34 +41,33 @@ export default () => {
     console.log('Delete Item');
   };
 
-  const popupId = 'popup-test-id';
+  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]);
+  }, [model.state.stackRef, visible, popupId]);
 
   return (
     <Popup model={model}>
-      <Flex gap="s">
+      <Flex cs={flexStyles}>
         <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
-        <div aria-owns={popupId} style={{position: 'absolute'}} />
+        <div aria-owns={popupId} style={{position: 'absolute'}}></div>
         <Popup.Popper>
-          <Popup.Card width={400}>
+          <Popup.Card cs={cardStyles}>
             <Popup.CloseIcon aria-label="Close" />
             <Popup.Heading>Delete Item</Popup.Heading>
             <Popup.Body>
-              <Box as="p" marginY="zero">
+              <Box as="p" cs={bodyStyles}>
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex gap="s" padding="xxs">
+            <Flex cs={flexStyles}>
               <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>
+              <Popup.CloseButton>Cancel</Popup.CloseButton>
             </Flex>
           </Popup.Card>
         </Popup.Popper>

package/dist/mdx/react/popup/examples/InitialFocus.tsx

@@ -7,10 +7,37 @@ import {
   usePopupModel,
   useInitialFocus,
   useReturnFocus,
+  useFocusRedirect,
 } from '@workday/canvas-kit-react/popup';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
-export default () => {
+const cardStyles = createStyles({
+  width: px2rem(400),
+});
+
+const bodyStyles = createStyles({
+  marginY: system.space.zero,
+});
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
+
+const columnStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'flex-start',
+});
+
+const InitialFocusOnButton = () => {
+  const messageId = useUniqueId();
   const initialFocusRef = React.useRef(null);
   const model = usePopupModel({
     initialFocusRef,
@@ -20,21 +47,21 @@ export default () => {
   useCloseOnEscape(model);
   useInitialFocus(model);
   useReturnFocus(model);
+  useFocusRedirect(model);
 
   return (
     <Popup model={model}>
-      <Popup.Target>Send Message</Popup.Target>
+      <Popup.Target>Initial focus: OK button</Popup.Target>
       <Popup.Popper placement={'bottom'}>
-        <Popup.Card width={400}>
-          <Popup.CloseIcon aria-label="Close" />
+        <Popup.Card cs={cardStyles} aria-describedby={messageId}>
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
-            <Box as="p" marginY="zero" id="popup-message">
+            <Text cs={bodyStyles} id={messageId}>
               Your message has been sent!
-            </Box>
+            </Text>
           </Popup.Body>
-          <Flex gap="s" padding="xxs">
-            <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>
               OK
             </Popup.CloseButton>
           </Flex>
@@ -43,3 +70,80 @@ export default () => {
     </Popup>
   );
 };
+
+const InitialFocusOnTextInput = () => {
+  const descriptionId = useUniqueId();
+  const initialFocusRef = React.useRef<HTMLInputElement>(null);
+  const model = usePopupModel({
+    initialFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Initial focus: text input</Popup.Target>
+      <Popup.Popper placement={'bottom'}>
+        <Popup.Card cs={cardStyles} aria-describedby={descriptionId}>
+          <Popup.Heading>Quick reply</Popup.Heading>
+          <Popup.Body>
+            <FormField>
+              <FormField.Label>Message</FormField.Label>
+              <FormField.Input as={TextInput} ref={initialFocusRef} />
+            </FormField>
+          </Popup.Body>
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>
+            <Popup.CloseButton>Cancel</Popup.CloseButton>
+          </Flex>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+const InitialFocusOnHeading = () => {
+  const headingFocusRef = React.useRef<HTMLHeadingElement>(null);
+  const model = usePopupModel({
+    initialFocusRef: headingFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Initial focus: heading</Popup.Target>
+      <Popup.Popper placement={'bottom'}>
+        <Popup.Card cs={cardStyles}>
+          <Popup.Heading ref={headingFocusRef} tabIndex={-1}>
+            Important notice
+          </Popup.Heading>
+          <Popup.Body>
+            <Text cs={bodyStyles}>Review the summary below before continuing.</Text>
+          </Popup.Body>
+          <Flex cs={flexStyles}>
+            <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>
+          </Flex>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+export default () => {
+  return (
+    <Flex cs={columnStyles}>
+      <InitialFocusOnButton />
+      <InitialFocusOnTextInput />
+      <InitialFocusOnHeading />
+    </Flex>
+  );
+};