fix: Remove auto focus from Modal Content (#128)

* 1. Add tabindex to modal content, so elements are not automatically focused when the modal opens

* 1. Add an autofocus prop to the Modal
2. Use this prop to auto focus the first element within the modal

* Prevent auto focus by setting tab index

* Add an example with no autofocus

* Remove focus outline from Modal

src/Modal/Modal.js

@@ -69,6 +69,7 @@ const ModalContent = createComponent({
     box-shadow: ${theme.shadow.hard};
     border-radius: ${themeGet('radius')}px;
     max-height: 90vh;
+    outline: none;
 
     ${transitionState === 'entering' &&
       css`
@@ -120,7 +121,12 @@ export function Modal({ children, title, animationDuration, showClose, onClose,
             <FocusOn onEscapeKey={handleClose} enabled={isOpen}>
               <ModalContainer ref={modalRef}>
                 <Backdrop transitionState={state} onClick={handleBackdropClick} />
-                <ModalContent transitionState={state} onClick={handleContentClick} aria-modal="true" {...props}>
+                <ModalContent
+                  transitionState={state}
+                  onClick={handleContentClick}
+                  aria-modal="true"
+                  tabIndex={0}
+                  {...props}>
                   {title && <Modal.Header title={title} showClose={showClose} />}
                   {children}
                 </ModalContent>

src/Modal/Modal.noAutoFocusEx.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import Modal from './Modal';
+import Button from '../Button';
+import Input from '../Form/Input';
+
+export default class ModalNoAutoFocusExample extends React.Component {
+  state = {
+    isModalOpen: false,
+    isModalTwoOpen: false,
+  };
+
+  toggle = () => {
+    this.setState({ isModalOpen: !this.state.isModalOpen, isModalTwoOpen: false });
+  };
+
+  toggleModalTwo = () => {
+    this.setState({ isModalTwoOpen: !this.state.isModalTwoOpen });
+  };
+
+  onCancel = () => {
+    this.toggle();
+
+    setTimeout(() => {
+      alert('Oh no! It has been canceled.');
+    }, 500);
+  };
+
+  render() {
+    const { body, bodyTwo = 'Im a nested modal!', ...props } = this.props;
+
+    return (
+      <div>
+        <Button onClick={this.toggle}>Open Modal</Button>
+
+        <Modal open={this.state.isModalOpen} onClose={this.toggle} title="Example Modal" {...props}>
+          <Modal.Body>
+            <>
+              {body}
+              <Input name="password" label="Password" />
+            </>
+
+            <Modal open={this.state.isModalTwoOpen} onClose={this.toggleModalTwo} title="Example Modal Two" {...props}>
+              <Modal.Body>{bodyTwo}</Modal.Body>
+
+              <Modal.Footer>
+                <Button.Group justifyContent="space-between">
+                  <Button variant="grey" onClick={this.toggleModalTwo}>
+                    Cancel
+                  </Button>
+                  <Button variant="success" onClick={this.toggleModalTwo}>
+                    I&apos;m Done Anyways
+                  </Button>
+                </Button.Group>
+              </Modal.Footer>
+            </Modal>
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button.Group justifyContent="space-between">
+              <Button variant="grey" onClick={this.onCancel}>
+                Cancel
+              </Button>
+              <Button variant="success" onClick={this.toggleModalTwo}>
+                Open Another Modal
+              </Button>
+            </Button.Group>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}

src/Modal/Modal.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Modal from './Modal';
 import ModalExample from './Modal.example';
 import ModalDropdownExample from './Modal.dropdownExample';
+import ModalNoAutoFocusExample from './Modal.noAutoFocusEx';
 
 export default {
   title: 'Components|Modal',
@@ -28,3 +29,5 @@ export const LongContent = () => (
 );
 
 export const DropdownTrigger = () => <ModalDropdownExample body="I'm triggered by a dropdown" />;
+
+export const NoAutoFocus = () => <ModalNoAutoFocusExample body="I'm triggered by a dropdown" />;