Reapply removal of findDOMNode from Modal and Popover, remove autofoc…

…us from Modal (#46429)

* Reapply "Remove findDOMNode usage from Modal and Popover"

This reverts commit b5f5656.

* Remove faulty autofocus behavior from Modal

* Add test for restoring last focus when modal closes

* Modal/index.js → Modal/index.ts

web/packages/design/src/Modal/Modal.test.tsx

@@ -16,8 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import { useState } from 'react';
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { render, fireEvent } from 'design/utils/testing';
 
@@ -141,4 +142,43 @@ describe('design/Modal', () => {
       'background-color': 'transparent',
     });
   });
+
+  it('restores focus on close', async () => {
+    const user = userEvent.setup();
+    render(<ToggleableModal />);
+    const toggleModalButton = screen.getByRole('button', { name: 'Toggle' });
+
+    await user.click(toggleModalButton);
+    // Type in the input inside the modal to shift focus into another element.
+    const input = screen.getByLabelText('Input in modal');
+    await user.type(input, 'a');
+
+    const closeModal = screen.getByRole('button', { name: 'Close modal' });
+    await user.click(closeModal);
+
+    expect(toggleModalButton).toHaveFocus();
+  });
 });
+
+const ToggleableModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button type="button" onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </button>
+      <Modal open={isOpen}>
+        <form>
+          <label>
+            Input in modal
+            <input />
+          </label>
+          <button type="button" onClick={() => setIsOpen(false)}>
+            Close modal
+          </button>
+        </form>
+      </Modal>
+    </>
+  );
+};