Merge remote-tracking branch 'origin/develop' into feature/form-defaults

src/components/ContactForm.js

@@ -16,7 +16,7 @@ import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = ({ onClose, defaultService }) => {
+const ContactForm = ({ onClose, defaultService, ...rest }) => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [services, setServices] = useState('');
@@ -51,7 +51,7 @@ const ContactForm = ({ onClose, defaultService }) => {
   };
 
   return (
-    <Box>
+    <Box {...rest}>
       <Box
         pad="medium"
         background="black"
@@ -68,7 +68,13 @@ const ContactForm = ({ onClose, defaultService }) => {
         >
           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"
@@ -95,7 +101,7 @@ const ContactForm = ({ onClose, defaultService }) => {
               </Text>{' '}
               data.
             </Text>
-            <Form onSubmit={handleSubmit}>
+            <Form onSubmit={handleSubmit} aria-live="assertive">
               <FormField
                 name="entry.1114584563"
                 htmlFor="text-input-name"
@@ -179,7 +185,7 @@ const ContactForm = ({ onClose, defaultService }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit this consultation request form"
                   label="Submit"
                   style={{ width: onClose ? '250px' : '100%' }}
                 />
@@ -215,13 +221,14 @@ const ContactForm = ({ onClose, defaultService }) => {
               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', overflowY: 'auto' }}>
         {!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>
             )}