feat(Modal): add triggerRef prop to restore focus after close

This accepts a ref to the element that triggers the modal.
This allows to restore the focus on the trigger element after closing the modal

Author: DSil

packages/orbit-components/src/Modal/Modal.stories.tsx

@@ -212,26 +212,31 @@ export default meta;
 
 function useModal() {
   const [open, toggle] = React.useState(true);
+  const ref = React.useRef(null);
+
   return {
     Container: ({ children }) => (
       <>
         {open && children}
-        <Button onClick={() => toggle(true)}>Open</Button>
+        <Button ref={ref} onClick={() => toggle(true)}>
+          Open
+        </Button>
       </>
     ),
     onClose: () => {
       toggle(false);
       action("onClose")();
     },
+    triggerRef: ref,
   };
 }
 
 export const RemovableSections: Story = {
   render: ({ showSection, children }) => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
     return (
       <Container>
-        <Modal onClose={onClose}>
+        <Modal triggerRef={triggerRef} onClose={onClose}>
           <ModalHeader
             title="Enjoy something to eat while you fly"
             illustration={<Illustration name="Meal" size="small" />}
@@ -277,17 +282,18 @@ export const RemovableSections: Story = {
         "labelClose",
         "lockScrolling",
         "fixedFooter",
+        "triggerRef",
       ],
     },
   },
 };
 
 export const WithFixedFooter: Story = {
   render: args => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
     return (
       <Container>
-        <Modal onClose={onClose} {...args}>
+        <Modal triggerRef={triggerRef} onClose={onClose} {...args}>
           <ModalHeader
             title="Enjoy something to eat while you fly"
             illustration={<Illustration name="BaggageDrop" size="small" />}
@@ -323,6 +329,7 @@ export const WithFixedFooter: Story = {
         "hasCloseButton",
         "disableAnimation",
         "labelClose",
+        "triggerRef",
         "lockScrolling",
       ],
     },
@@ -331,11 +338,11 @@ export const WithFixedFooter: Story = {
 
 export const WithForm: Story = {
   render: ({ showSection }) => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
 
     return (
       <Container>
-        <Modal onClose={onClose} fixedFooter>
+        <Modal triggerRef={triggerRef} onClose={onClose} fixedFooter>
           <ModalHeader title="Refund" description="Reservation number: 123456789" />
           <ModalSection>
             <Stack>
@@ -402,6 +409,7 @@ export const WithForm: Story = {
         "hasCloseButton",
         "disableAnimation",
         "labelClose",
+        "triggerRef",
         "lockScrolling",
         "fixedFooter",
       ],
@@ -411,11 +419,15 @@ export const WithForm: Story = {
 
 export const WithItinerary: Story = {
   render: () => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
 
     return (
       <Container>
-        <Modal ariaLabel="Itinerary from Prague to Frankfurt" onClose={onClose}>
+        <Modal
+          triggerRef={triggerRef}
+          ariaLabel="Itinerary from Prague to Frankfurt"
+          onClose={onClose}
+        >
           <ModalSection>
             <Itinerary>
               <ItineraryStatus type="success" label="This part is new">
@@ -457,10 +469,10 @@ export const WithItinerary: Story = {
 
 export const WithModalHeaderOnly: Story = {
   render: args => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
     return (
       <Container>
-        <Modal onClose={onClose} {...args}>
+        <Modal triggerRef={triggerRef} onClose={onClose} {...args}>
           <ModalHeader
             title="Enjoy something to eat while you fly"
             illustration={<Illustration name="BaggageDrop" size="small" />}
@@ -488,6 +500,7 @@ export const WithModalHeaderOnly: Story = {
         "hasCloseButton",
         "disableAnimation",
         "labelClose",
+        "triggerRef",
         "lockScrolling",
       ],
     },
@@ -508,11 +521,11 @@ export const Playground: StoryObj<PlaygroundStoryProps> = {
     showSection,
     ...args
   }) => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
 
     return (
       <Container>
-        <Modal onClose={onClose} {...args}>
+        <Modal triggerRef={triggerRef} onClose={onClose} {...args}>
           {header && (
             <ModalHeader
               title={title}
@@ -588,18 +601,18 @@ export const Playground: StoryObj<PlaygroundStoryProps> = {
   parameters: {
     info: "Playground of Modal component. Check Orbit.Kiwi for more detailed design guidelines.",
     controls: {
-      exclude: ["children"],
+      exclude: ["children", "triggerRef"],
     },
   },
 };
 
 export const Rtl: Story = {
   render: () => {
-    const { Container, onClose } = useModal();
+    const { Container, onClose, triggerRef } = useModal();
     return (
       <Container>
         <RenderInRtl>
-          <Modal onClose={onClose}>
+          <Modal triggerRef={triggerRef} onClose={onClose}>
             <ModalHeader
               title="The title of the ModalHeader"
               illustration={<Illustration name="Accommodation" size="small" />}

packages/orbit-components/src/Modal/README.md

@@ -25,6 +25,7 @@ Table below contains all types of the props available in the Modal component.
 | Name                | Type                       | Default    | Description                                                                                                                                                                                           |
 | :------------------ | :------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | children            | `React.Node`               |            | The content of the Modal. [See Subcomponents](#subcomponents)                                                                                                                                         |
+| triggerRef          | `React.RefObject`          |            | The ref to the element which triggers the Modal.                                                                                                                                                      |
 | lockScrolling       | `boolean`                  | `true`     | Whether to prevent scrolling of the rest of the page while Modal is open. This is on by default to provide a better user experience.                                                                  |
 | scrollingElementRef | ref (object or function)   |            | The scrolling element, which depends on the viewport.                                                                                                                                                 |
 | dataTest            | `string`                   |            | Optional prop for testing purposes.                                                                                                                                                                   |

packages/orbit-components/src/Modal/index.tsx

@@ -48,6 +48,7 @@ const Modal = React.forwardRef<Instance, Props>(
       scrollingElementRef,
       children,
       onClose,
+      triggerRef,
       autoFocus = true,
       fixedFooter = false,
       isMobileFullPage = false,
@@ -354,6 +355,13 @@ const Modal = React.forwardRef<Instance, Props>(
       }
     }, [children, prevChildren]);
 
+    React.useEffect(() => {
+      return () => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        triggerRef?.current?.focus();
+      };
+    }, [triggerRef]);
+
     const hasCloseContainer = mobileHeader && (hasModalTitle || (onClose && hasCloseButton));
 
     const value = React.useMemo(

packages/orbit-components/src/Modal/types.d.ts

@@ -10,6 +10,7 @@ type Size = "extraSmall" | "small" | "normal" | "large" | "extraLarge";
 export interface Props extends Common.Globals {
   readonly size?: Size;
   readonly children: React.ReactNode;
+  readonly triggerRef?: React.RefObject<HTMLElement>;
   readonly lockScrolling?: boolean;
   readonly scrollingElementRef?: React.Ref<HTMLElement>;
   readonly autoFocus?: boolean;