Merge pull request #50 in USAFHNI/digital-trinity from feature/accessibility to develop

* commit 'cfa515ee':
  Adjusting aria live tags for contact forms
  adding the rest prop properly (spreading it to child component)
  updated the accessibility to the forms so that the keyboard arrow navigation can work and removed the tabIndex from modal
  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,7 @@ const ContactForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box {...rest}>
       <Box
         pad="medium"
         background="black"
@@ -54,7 +54,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"
@@ -77,7 +83,7 @@ const ContactForm = ({ onClose }) => {
               </Text>{' '}
               data only.
             </Text>
-            <Form onSubmit={handleSubmit}>
+            <Form onSubmit={handleSubmit} aria-live="assertive">
               <FormField
                 name="entry.1114584563"
                 htmlFor="text-input-name"
@@ -144,7 +150,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%' }}
                 />
@@ -180,13 +186,14 @@ const ContactForm = ({ onClose }) => {
               style={{
                 fontFamily: korolevFont,
               }}
+              aria-live="polite"
             >
               REQUESTING CONSULTATION
             </Text>
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center">
+          <Box pad="large" align="center" justify="center" aria-live="polite">
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}

src/components/FeedbackForm.js

@@ -38,7 +38,7 @@ const FeedbackForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box role="dialog" aria-modal="true" a11yTitle="Send us your feedback">
       <Box
         pad="medium"
         background="black"
@@ -55,12 +55,16 @@ 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 && (
           <Box>
-            <Form onSubmit={handleSubmit}>
+            <Form onSubmit={handleSubmit} aria-live="assertive">
               <FormField
                 name="entry.675672969"
                 htmlFor="text-input-comments"
@@ -136,7 +140,7 @@ const FeedbackForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit your feedback"
                   label="Submit"
                   style={{ width: '250px' }}
                 />
@@ -172,13 +176,20 @@ const FeedbackForm = ({ onClose }) => {
               style={{
                 fontFamily: korolevFont,
               }}
+              aria-live="polite"
             >
               SENDING FEEDBACK
             </Text>
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center" gap="small">
+          <Box
+            pad="large"
+            align="center"
+            justify="center"
+            gap="small"
+            aria-live="polite"
+          >
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}
@@ -187,7 +198,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

@@ -111,7 +111,12 @@ const Solutions = ({ data }) => {
                 }}
               >
                 <Layer animation="fadeIn">
-                  <ContactForm onClose={handleModalToggle} />
+                  <ContactForm
+                    onClose={handleModalToggle}
+                    role="dialog"
+                    aria-modal="true"
+                    a11yTitle="request a consultation"
+                  />
                 </Layer>
               </ThemeContext.Extend>
             )}