feat(Modal): autofocus (#2749)

kiwicom · Feb 21, 2021 · 7318569 · 7318569
1 parent c7f71b5
commit 7318569
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Modal/Modal.stories.js b/packages/orbit-components/src/Modal/Modal.stories.js
@@ -172,15 +172,15 @@ storiesOf("Modal", module)
     () => {
       const showMore = boolean(false);
       return (
-        <Modal onClose={action("onClose")} fixedFooter>
+        <Modal onClose={action("onClose")} fixedFooter autoFocus={false}>
           <ModalHeader title="Refund" description="Reservation number: 123456789" />
           <ModalSection>
             <Stack>
               <Card title="Cancellation" icon={<Airplane />} />
               <Text size="small" weight="bold">
                 Contact information
               </Text>
-              <InputField label="E-mail" placeholder="Your email" />
+              <InputField label="E-mail" autoFocus placeholder="Your email" />
               <InputGroup
                 flex={["0 0 120px", "1 1 100%"]}
                 onChange={action("onChange")}

diff --git a/packages/orbit-components/src/Modal/README.md b/packages/orbit-components/src/Modal/README.md
@@ -33,6 +33,7 @@ Table below contains all types of the props available in the Modal component.
 | onClose             | `event => void \| Promise` |            | Function for handling onClose event. If you don't pass any function the Close button will not be displayed and it will not be possible to close the Modal. [See Functional specs](#functional-specs) |
 | preventOverlayClose | `boolean`                  |            | Property for preventing closing of modal when there is a action on overlay. BEWARE: This should be used only in very specials edge-cases! It breaks user experience.                                 |
 | hasCloseButton      | `boolean`                  | `true`     | Defines whether the Modal displays a close button. If you disable this, we recommend adding some kind of an alternative.                                                                             |
+| autoFocus           | `boolean`                  | `true`     | The autofocus attribute of the Modal, see [this docs](https://www.w3schools.com/tags/att_autofocus.asp).                                                                                             |
 
 ### Modal enum
 

diff --git a/packages/orbit-components/src/Modal/index.d.ts b/packages/orbit-components/src/Modal/index.d.ts
@@ -13,6 +13,7 @@ export interface Props extends Common.Global {
   readonly size?: Size;
   readonly children: React.ReactNode;
   readonly scrollingElementRef?: React.Ref<HTMLElement>;
+  readonly autoFocus?: boolean;
   readonly onClose?: Common.Event<
     React.KeyboardEvent<HTMLDivElement> | React.SyntheticEvent<HTMLButtonElement> | React.MouseEvent
   >;

diff --git a/packages/orbit-components/src/Modal/index.js b/packages/orbit-components/src/Modal/index.js
@@ -332,6 +332,7 @@ const Modal = React.forwardRef<Props, Instance>(
       scrollingElementRef,
       children,
       onClose,
+      autoFocus = true,
       fixedFooter = false,
       isMobileFullPage = false,
       preventOverlayClose = false,
@@ -407,7 +408,7 @@ const Modal = React.forwardRef<Props, Instance>(
     };
 
     const setFirstFocus = () => {
-      if (modalBody.current) {
+      if (modalBody.current && autoFocus) {
         modalBody.current.focus();
       }
     };
@@ -618,6 +619,7 @@ const Modal = React.forwardRef<Props, Instance>(
         data-test={dataTest}
         ref={modalBodyRef}
         role="dialog"
+        autoFocus={autoFocus}
         aria-modal="true"
         aria-labelledby={modalID}
       >

diff --git a/packages/orbit-components/src/Modal/index.js.flow b/packages/orbit-components/src/Modal/index.js.flow
@@ -28,6 +28,7 @@ export type onClose = (
 export type Props = {|
   +size?: Size,
   +children: React.Node,
+  +autoFocus?: boolean,
   +scrollingElementRef?:
     | ((instance: HTMLElement | null) => void)
     | {| current: HTMLElement | null |},