diff --git a/lib/components/Modal/Modal.stories.js b/lib/components/Modal/Modal.stories.js
index cbd8bfba..e3dab017 100644
--- a/lib/components/Modal/Modal.stories.js
+++ b/lib/components/Modal/Modal.stories.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Button from "../Button";
 import Modal from ".";
 import { H3, P } from "../Typography";
@@ -15,23 +15,31 @@ export default {
 
 const Basic = () => {
   const [visible, setVisible] = useState(false);
+  const button = useRef();
+
   const handleOnButtonClick = () => {
     setVisible(true);
   };
+
   const handleOnConfirm = () => {
     setVisible(false);
   };
+
   const onToggleModal = (visible) => () => {
     setVisible(visible);
   };
 
   return (
     <>
-      <Button onClick={handleOnButtonClick}>Open basic modal</Button>
+      <Button ref={button} onClick={handleOnButtonClick}>
+        Open basic modal
+      </Button>
       <Modal
+        ariaLabel="Modal Name"
         visible={visible}
         handleOnConfirm={handleOnConfirm}
         onClose={onToggleModal(false)}
+        triggerRef={button}
       >
         <Spacer mb="r">
           <H3>Modal Title</H3>
@@ -44,25 +52,79 @@ const Basic = () => {
   );
 };
 export const basicModal = () => <Basic />;
+basicModal.parameters = {
+  docs: {
+    source: {
+      code: `
+const Basic = () => {
+  const [visible, setVisible] = useState(false);
+  const button = useRef();
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  return (
+    <>
+      <Button ref={button} onClick={handleOnButtonClick}>
+        Open basic modal
+      </Button>
+      <Modal
+        ariaLabel="Modal Title"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        triggerRef={button}
+      >
+        <Spacer mb="r">
+          <H3>Modal Title</H3>
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
+    }
+  }
+};
 
 const Advanced = () => {
   const [visible, setVisible] = useState(false);
+  const button = useRef();
+
   const handleOnButtonClick = () => {
     setVisible(true);
   };
+
   const handleOnConfirm = () => {
     setVisible(false);
   };
+
   const onToggleModal = (visible) => () => {
     setVisible(visible);
   };
+
   const modalHeader = <H3>Modal Title</H3>;
+
   const modalFooter = (
     <Button onClick={handleOnConfirm}>Go to full article</Button>
   );
+
   return (
     <>
-      <Button onClick={handleOnButtonClick}>Open advanced modal</Button>
+      <Button ref={button} onClick={handleOnButtonClick}>
+        Open advanced modal
+      </Button>
       <Modal
         maxWidth="500px"
         maxHeight="400px"
@@ -73,6 +135,7 @@ const Advanced = () => {
         onClose={onToggleModal(false)}
         headerContent={modalHeader}
         footerContent={modalFooter}
+        triggerRef={button}
       >
         <Spacer my="r">
           <P>
@@ -111,18 +174,105 @@ const Advanced = () => {
   );
 };
 export const advancedModal = () => <Advanced />;
+advancedModal.parameters = {
+  docs: {
+    source: {
+      code: `
+const Advanced = () => {
+  const [visible, setVisible] = useState(false);
+  const button = useRef();
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modal Title</H3>;
+
+  const modalFooter = (
+    <Button onClick={handleOnConfirm}>Go to full article</Button>
+  );
+
+  return (
+    <>
+      <Button ref={button} onClick={handleOnButtonClick}>
+        Open advanced modal
+      </Button>
+      <Modal
+        maxWidth="500px"
+        maxHeight="400px"
+        height="90vh"
+        width="90vw"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+        triggerRef={button}
+      >
+        <Spacer my="r">
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+            This content will be scrollable if it exeeds the height of the
+            modal.
+          </P>
+          <P>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </P>
+          <P>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
+    }
+  }
+};
 
 const BasicDialogue = () => {
   const [visible, setVisible] = useState(false);
+  const button = useRef();
+
   const handleOnButtonClick = () => {
     setVisible(true);
   };
+
   const handleOnConfirm = () => {
     setVisible(false);
   };
+
   const onToggleModal = (visible) => () => {
     setVisible(visible);
   };
+
   const modalFooter = (
     <Flex>
       <Spacer mr="s">
@@ -135,9 +285,15 @@ const BasicDialogue = () => {
       </Spacer>
     </Flex>
   );
+
   return (
     <>
-      <Button onClick={handleOnButtonClick} variant="danger" iconLeft>
+      <Button
+        ref={button}
+        onClick={handleOnButtonClick}
+        variant="danger"
+        iconLeft
+      >
         <Icon icon={["fas", "trash"]} />
         Delete data
       </Button>
@@ -146,6 +302,7 @@ const BasicDialogue = () => {
         handleOnConfirm={handleOnConfirm}
         onClose={onToggleModal(false)}
         footerContent={modalFooter}
+        triggerRef={button}
       >
         <Spacer mb="r">
           <P weight="bold" marginBottom="sm">
@@ -158,19 +315,89 @@ const BasicDialogue = () => {
   );
 };
 export const basicDialogueModal = () => <BasicDialogue />;
+basicDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: `
+const BasicDialogue = () => {
+  const [visible, setVisible] = useState(false);
+  const button = useRef();
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} px="l">
+          OK
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)}>
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+
+  return (
+    <>
+      <Button
+        ref={button}
+        onClick={handleOnButtonClick}
+        variant="danger"
+        iconLeft
+      >
+        <Icon icon={["fas", "trash"]} />
+        Delete data
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        footerContent={modalFooter}
+        triggerRef={button}
+      >
+        <Spacer mb="r">
+          <P weight="bold" marginBottom="sm">
+            This will remove all data from the application.
+          </P>
+          <P>Do you wish to continue?</P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
+    }
+  }
+};
 
 const EditDialogue = () => {
   const [visible, setVisible] = useState(false);
+  const button = useRef();
+
   const handleOnButtonClick = () => {
     setVisible(true);
   };
+
   const handleOnConfirm = () => {
     setVisible(false);
   };
+
   const onToggleModal = (visible) => () => {
     setVisible(visible);
   };
+
   const modalHeader = <H3>Modify Details</H3>;
+
   const modalFooter = (
     <Flex>
       <Spacer mr="s">
@@ -187,7 +414,7 @@ const EditDialogue = () => {
   );
   return (
     <>
-      <Button onClick={handleOnButtonClick} iconLeft>
+      <Button ref={button} onClick={handleOnButtonClick} iconLeft>
         <Icon icon={["fas", "edit"]} />
         Modify Details
       </Button>
@@ -197,6 +424,7 @@ const EditDialogue = () => {
         onClose={onToggleModal(false)}
         headerContent={modalHeader}
         footerContent={modalFooter}
+        triggerRef={button}
       >
         <Spacer my="r">
           <TextInput
@@ -214,3 +442,71 @@ const EditDialogue = () => {
   );
 };
 export const editDialogueModal = () => <EditDialogue />;
+editDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: `
+const EditDialogue = () => {
+  const [visible, setVisible] = useState(false);
+  const button = useRef();
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modify Details</H3>;
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} variant="success" iconLeft>
+          <Icon icon={["fas", "save"]} />
+          Save
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)} iconLeft>
+          <Icon icon={["fas", "times"]} />
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+  return (
+    <>
+      <Button ref={button} onClick={handleOnButtonClick} iconLeft>
+        <Icon icon={["fas", "edit"]} />
+        Modify Details
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+        triggerRef={button}
+      >
+        <Spacer my="r">
+          <TextInput
+            id="textInput1"
+            key="textInput1"
+            type="text"
+            fullWidth
+            label="Name"
+            placeholder="E.g. Awesome Project"
+          />
+          <TextArea id="TextArea01" label="Description" fullWidth />
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
+    }
+  }
+};
diff --git a/lib/components/Modal/index.js b/lib/components/Modal/index.js
index ed33107e..afeb4fd2 100644
--- a/lib/components/Modal/index.js
+++ b/lib/components/Modal/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import useOnclickOutside from "react-cool-onclickoutside";
 import PropTypes from "prop-types";
@@ -153,6 +153,7 @@ const Modal = ({
   minHeight,
   overflow,
   onClose,
+  triggerRef,
   theme,
   visible,
   overlayID,
@@ -164,13 +165,44 @@ const Modal = ({
   const options = {
     disabled: !visible
   };
+
   const modalRef = useOnclickOutside(() => {
     onClose();
   }, options);
 
+  const ariaLabel = useMemo(() => {
+    if (restProps.ariaLabel) {
+      return restProps.ariaLabel;
+    } else if (typeof headerContent === "string") {
+      return headerContent;
+    }
+  }, [restProps.ariaLabel, headerContent]);
+
   useKeyPress(commonKeys.ESCAPE, onClose, options);
   useKeyPress(commonKeys.ESC, onClose, options);
 
+  // Initial focus point for keyboard navigation
+  const top = useRef();
+
+  // If bottom becomes focused then re-focus the close button
+  const bottom = useRef();
+
+  // Ref to close button
+  const button = useRef();
+
+  // Keep trak on whether its been visible
+  const [hasOpened, setHasOpened] = useState(visible);
+
+  // On becoming visible focus the top
+  useEffect(() => {
+    if (visible) {
+      top.current.focus();
+      setHasOpened(true);
+    } else if (hasOpened) {
+      triggerRef && triggerRef.current.focus();
+    }
+  }, [visible, hasOpened, top, triggerRef]);
+
   const component = (
     <Overlay
       alignItems="center"
@@ -178,7 +210,18 @@ const Modal = ({
       id={overlayID}
       {...restProps}
     >
-      <div ref={modalRef}>
+      <span
+        tabIndex="0"
+        ref={top}
+        onFocus={() => bottom.current.focus()}
+      ></span>
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        tabIndex="-1"
+      >
         <Container
           width={width}
           height={height}
@@ -198,20 +241,24 @@ const Modal = ({
                 {headerContent}
               </Box>
               <CloseButton
+                ref={button}
                 onClick={onClose}
                 className="modal-close"
                 small
                 px="6px"
+                aria-label="Close dialog"
               >
                 <Icon icon={["fas", "times"]} color="greyDark" size="lg" />
               </CloseButton>
             </HeaderContent>
           ) : (
             <CloseButton
+              ref={button}
               onClick={onClose}
               className="modal-close"
               small
               px="6px"
+              aria-label="Close dialog"
             >
               <Icon icon={["fas", "times"]} color="greyDark" size="lg" />
             </CloseButton>
@@ -222,6 +269,8 @@ const Modal = ({
           {footerContent && <FooterContent>{footerContent}</FooterContent>}
         </Container>
       </div>
+      <span ref={bottom} tabIndex="-1"></span>
+      <span tabIndex="0" onFocus={() => button.current.focus()}></span>
     </Overlay>
   );
 
@@ -270,6 +319,11 @@ Modal.propTypes = {
   visible: PropTypes.bool,
   /** Specifies the function to run on clicking X icon. Ensure that this function will close Modal through the `visible` prop */
   onClose: PropTypes.func,
+  /** Required to re-focus keyboard navigation after closing a modal, generally a ref to the button */
+  triggerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any })
+  ]),
   /** Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`) */
   overflow: PropTypes.string,
   /** Specifies the id of the overlay element for targeting */
@@ -277,7 +331,9 @@ Modal.propTypes = {
   /** Specifies the id of the modal element for targeting */
   modalID: PropTypes.string,
   /** Sets the theme for the Modal */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies the aria-label for the modal. Set this if headerContent is not defined as a string. */
+  ariaLabel: PropTypes.string
 };
 
 Modal.defaultProps = {
diff --git a/lib/components/Select/index.js b/lib/components/Select/index.js
index b5793ce3..efbbe856 100644
--- a/lib/components/Select/index.js
+++ b/lib/components/Select/index.js
@@ -111,6 +111,19 @@ const Select = forwardRef((props, ref) => {
           ? themeGet("colors.danger")({ theme })
           : themeGet("colors.primary")({ theme })
       },
+      "&:focus-within": {
+        outline: "0",
+        borderColor: props.invalid
+          ? themeGet("colors.danger")({ theme })
+          : themeGet("colors.primary")({ theme }),
+        boxShadow: props.invalid
+          ? themeGet("shadows.thickOutline")({ theme }) +
+            " " +
+            themeGet("colors.danger30")({ theme })
+          : themeGet("shadows.thickOutline")({ theme }) +
+            " " +
+            themeGet("colors.primary30")({ theme })
+      },
       borderColor: state.isFocused
         ? themeGet("colors.primary")({ theme })
         : props.inverted
diff --git a/lib/components/Toggle/index.js b/lib/components/Toggle/index.js
index c0ed5ce3..54c95ee6 100644
--- a/lib/components/Toggle/index.js
+++ b/lib/components/Toggle/index.js
@@ -15,9 +15,9 @@ const Group = styled.div`
           input {
             &:focus {
               + label {
-                box-shadow: ${themeGet("shadows.thinOutline")(props) +
+                box-shadow: ${themeGet("shadows.thickOutline")(props) +
                 " " +
-                themeGet("colors.black30")(props)};
+                themeGet("colors.black")(props)};
               }
             }
           }
@@ -45,9 +45,9 @@ const Input = styled.input.attrs({
   &:focus {
     + label {
       box-shadow: ${(props) =>
-        themeGet("shadows.thinOutline")(props) +
+        themeGet("shadows.thickOutline")(props) +
         " " +
-        themeGet("colors.black30")(props)};
+        themeGet("colors.black20")(props)};
     }
   }