updated the accessibility to the forms so that the keyboard arrow navigation...

updated the accessibility to the forms so that the keyboard arrow navigation can work and removed the tabIndex from modal

src/components/ContactForm.js

@@ -16,7 +16,7 @@ import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = ({ onClose, ...rest }) => {
+const ContactForm = ({ onClose }) => {
   const [submitting, setSubmitting] = useState();
   const [success, setSuccess] = useState();
 
@@ -37,12 +37,7 @@ const ContactForm = ({ onClose, ...rest }) => {
   };
 
   return (
-    <Box
-      role={rest.role}
-      aria-modal={rest.ariaModal}
-      tabIndex={rest.tabIndex}
-      a11yTitle={rest.a11yTitle}
-    >
+    <Box role="dialog" aria-modal="true" a11yTitle="request a consultation">
       <Box
         pad="medium"
         background="black"

src/components/FeedbackFooter.js

@@ -62,7 +62,7 @@ const FeedbackFooter = () => {
             },
           }}
         >
-          <Layer animation="fadeIn" aria-hidden="true">
+          <Layer animation="fadeIn">
             <FeedbackForm onClose={handleToggleOpen} />
           </Layer>
         </ThemeContext.Extend>

src/components/FeedbackForm.js

@@ -38,12 +38,7 @@ const FeedbackForm = ({ onClose }) => {
   };
 
   return (
-    <Box
-      role="dialog"
-      aria-modal="true"
-      tabIndex={0}
-      a11yTitle="Send us your feedback"
-    >
+    <Box role="dialog" aria-modal="true" a11yTitle="Send us your feedback">
       <Box
         pad="medium"
         background="black"

src/pages/solutions.js

@@ -110,14 +110,8 @@ const Solutions = ({ data }) => {
                   },
                 }}
               >
-                <Layer animation="fadeIn" aria-hidden="true">
-                  <ContactForm
-                    onClose={handleModalToggle}
-                    role="dialog"
-                    ariaModal="true"
-                    tabIndex={0}
-                    a11yTitle="request a consultation"
-                  />
+                <Layer animation="fadeIn">
+                  <ContactForm onClose={handleModalToggle} />
                 </Layer>
               </ThemeContext.Extend>
             )}