fixup! fixup! fixup! [WIP] Replace jsdom with happy-dom testing e…

…nvironment to enable `Modal` tests (#461)

src/components/Modal/Modal.jsx

@@ -45,7 +45,6 @@ export const Modal = ({
   allowCloseOnBackdropClick,
   allowCloseOnEscapeKey,
   allowPrimaryActionOnEnterKey,
-  autoFocus,
   children,
   closeButtonRef,
   dialogRef,
@@ -64,7 +63,7 @@ export const Modal = ({
 
   useImperativeHandle(dialogRef, () => internalDialogRef.current);
 
-  useModalFocus(autoFocus, internalDialogRef, primaryButtonRef);
+  useModalFocus(internalDialogRef, primaryButtonRef);
   useModalScrollPrevention(preventScrollUnderneath);
 
   const onCancel = useCallback(
@@ -129,7 +128,6 @@ Modal.defaultProps = {
   allowCloseOnBackdropClick: true,
   allowCloseOnEscapeKey: true,
   allowPrimaryActionOnEnterKey: true,
-  autoFocus: true,
   children: null,
   closeButtonRef: null,
   dialogRef: null,
@@ -153,12 +151,6 @@ Modal.propTypes = {
    * If `true`, the `Modal` can be submitted by pressing the Enter key.
    */
   allowPrimaryActionOnEnterKey: PropTypes.bool,
-  /**
-   * If `true`, focus the first input element in the `Modal`, or primary button (referenced by the `primaryButtonRef`
-   * prop), or other focusable element when the `Modal` is opened. If there are none or `autoFocus` is set to `false`,
-   * focus the Modal itself.
-   */
-  autoFocus: PropTypes.bool,
   /**
    * Nested elements. Supported types are:
    *
@@ -212,7 +204,7 @@ Modal.propTypes = {
   ]),
   /**
    * Reference to primary button element. It is used to submit modal when Enter key is pressed and as fallback
-   * when `autoFocus` functionality does not find any input element to be focused.
+   * when autofocus functionality does not find any input element to be focused.
    */
   primaryButtonRef: PropTypes.shape({
     // eslint-disable-next-line react/forbid-prop-types

src/components/Modal/README.md

@@ -93,8 +93,7 @@ See [API](#api) for all available options.
   tells better what happens rather than “OK”.
 
 - Modal **automatically focuses the first non-disabled form field** by default.
-  When no field is found then the primary button (in the footer) is focused. To turn
-  this feature off, set the `autofocus` prop to `false`.
+  When no field is found then the primary button (in the footer) is focused.
 
 - Modal **submits the form when the user presses the `Enter` key** . The primary
   button is clicked in this case. To turn this feature off, set the
@@ -950,9 +949,6 @@ actions mentioned above, you can explicitly disable the default behavior
 by changing `allowCloseOnBackdropClick`, `allowCloseOnEscapeKey` or
 `allowPrimaryActionOnEnterKey` to `false`.
 
-👉 We strongly recommend using this feature together with Autofocus for a better
-user experience.
-
 ## Autofocus
 
 Autofocus is implemented to enhance the user experience by automatically
@@ -963,9 +959,6 @@ inside of Modal and moves focus onto the first non-disabled one. If none is
 found and the `primaryButtonRef` prop on Modal is set, then the primary button
 is focused.
 
-Autofocus is enabled by default, so if you want to control the focus of
-elements manually, set the `autoFocus` prop on Modal to `false`.
-
 ## Scrolling Long Content
 
 When modals become too long for the user's viewport or device, they scroll
@@ -1090,7 +1083,6 @@ React.createElement(() => {
       <div>
         {modalOpen && (
           <Modal
-            autoFocus={false}
             closeButtonRef={modalCloseButtonRef}
             primaryButtonRef={modalPrimaryButtonRef}
             size="small"
@@ -1131,12 +1123,6 @@ React.createElement(() => {
 });
 ```
 
-### Long Content and Autofocus
-
-👉 If you wrap ModalContent with ScrollView, you may want to turn `autoFocus`
-off to prevent the modal from scrolling to the end immediately after being
-opened.
-
 <!-- markdownlint-disable MD024 -->
 
 ## Forwarding HTML Attributes

src/components/Modal/__tests__/Modal.test.jsx

@@ -10,7 +10,6 @@ import { Button } from '../../..';
 import { Modal } from '../Modal';
 import { ModalBody } from '../ModalBody';
 import { ModalCloseButton } from '../ModalCloseButton';
-import { ModalContent } from '../ModalContent';
 import { ModalFooter } from '../ModalFooter';
 import { ModalHeader } from '../ModalHeader';
 
@@ -322,33 +321,6 @@ describe('functionality', () => {
     assertFocus(el, true);
   });
 
-  it('focuses Modal itself if autoFocus is disabled', () => {
-    const ref = React.createRef();
-
-    const { container } = render((
-      <Modal
-        autoFocus={false}
-        id="modal"
-        primaryButtonRef={ref}
-      >
-        <ModalBody>
-          <ModalContent>
-            <input id="first" />
-          </ModalContent>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            label="button"
-            ref={ref}
-          />
-        </ModalFooter>
-      </Modal>
-    ));
-
-    const el = within(container).getByTestId('modal');
-    assertFocus(el, true);
-  });
-
   it('prevents body from scrolling by default', () => {
     render((
       <Modal />

src/components/Modal/_hooks/useModalFocus.js

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 export const useModalFocus = (
-  autoFocus,
   dialogRef,
   primaryButtonRef,
 ) => {
@@ -11,8 +10,7 @@ export const useModalFocus = (
       // field element (input, textarea or select) or primary button and focuses it. This is
       // necessary to have focus on one of those elements to be able to submit the form
       // by pressing Enter key. If there are neither, it tries to focus any other focusable
-      // elements. In case there are none or `autoFocus` is disabled, dialogElement
-      // (Modal itself) is focused.
+      // elements.
 
       const dialogElement = dialogRef.current;
 
@@ -26,7 +24,7 @@ export const useModalFocus = (
 
       const firstFocusableElement = childrenFocusableElements[0];
 
-      if (!autoFocus || childrenFocusableElements.length === 0) {
+      if (childrenFocusableElements.length === 0) {
         dialogElement.tabIndex = -1;
         dialogElement.focus();
         return () => {};
@@ -51,7 +49,6 @@ export const useModalFocus = (
       return () => {};
     },
     [
-      autoFocus,
       dialogRef,
       primaryButtonRef,
     ],