updated the accessibilty features for the site feedback form and engagement request form

src/components/ContactForm.js

@@ -16,7 +16,7 @@ import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = ({ onClose }) => {
+const ContactForm = ({ onClose, ...rest }) => {
   const [submitting, setSubmitting] = useState();
   const [success, setSuccess] = useState();
 
@@ -37,7 +37,12 @@ const ContactForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box
+      role={rest.role}
+      aria-modal={rest.ariaModal}
+      tabIndex={rest.tabIndex}
+      a11yTitle={rest.a11yTitle}
+    >
       <Box
         pad="medium"
         background="black"
@@ -54,7 +59,13 @@ const ContactForm = ({ onClose }) => {
         >
           REQUEST A CONSULTATION
         </Heading>
-        {onClose && <Button icon={<Close />} onClick={onClose}></Button>}
+        {onClose && (
+          <Button
+            icon={<Close />}
+            onClick={onClose}
+            a11yTitle="close this dialog"
+          ></Button>
+        )}
       </Box>
       <Box
         pad="medium"
@@ -144,7 +155,7 @@ const ContactForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit this consultation request form"
                   label="Submit"
                   style={{ width: onClose ? '250px' : '100%' }}
                 />
@@ -186,7 +197,12 @@ const ContactForm = ({ onClose }) => {
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center">
+          <Box
+            pad="large"
+            align="center"
+            justify="center"
+            aria-live="assertive"
+          >
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}

src/components/FeedbackFooter.js

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

src/components/FeedbackForm.js

@@ -38,7 +38,12 @@ const FeedbackForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box
+      role="dialog"
+      aria-modal="true"
+      tabIndex={0}
+      a11yTitle="Send us your feedback"
+    >
       <Box
         pad="medium"
         background="black"
@@ -55,7 +60,11 @@ const FeedbackForm = ({ onClose }) => {
         >
           SEND US YOUR FEEDBACK
         </Heading>
-        <Button icon={<Close />} onClick={onClose}></Button>
+        <Button
+          icon={<Close />}
+          onClick={onClose}
+          a11yTitle="close this dialog"
+        ></Button>
       </Box>
       <Box pad="medium" style={{ position: 'relative' }}>
         {!success && (
@@ -136,7 +145,7 @@ const FeedbackForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit your feedback"
                   label="Submit"
                   style={{ width: '250px' }}
                 />
@@ -178,7 +187,13 @@ const FeedbackForm = ({ onClose }) => {
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center" gap="small">
+          <Box
+            pad="large"
+            align="center"
+            justify="center"
+            gap="small"
+            aria-live="assertive"
+          >
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}
@@ -187,7 +202,11 @@ const FeedbackForm = ({ onClose }) => {
               FEEDBACK SENT
             </Heading>
             <Text textAlign="center">Thanks for sharing with us.</Text>
-            <SecondaryButton onClick={onClose} label="Close" />
+            <SecondaryButton
+              onClick={onClose}
+              label="Close"
+              a11yTitle="Close this dialog"
+            />
           </Box>
         )}
       </Box>

src/pages/solutions.js

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