Fix focus order after form submission (#407)

* added function to change focus after form submit

* updated CHANGELOG

CHANGELOG.md

@@ -26,6 +26,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - The two `<p>` tags above the feedback form textarea are now announced to screen reader users by use of `aria-describedby`
 - The feedback form close button is now before the `<h2>` in page order
 - Typo in the redirect path for the thank you page when switching back to EN
+- Focus is properly set to before elements in status message after submitting feedback form
 
 ## [v1.1.2] - 2021-09-27
 

components/organisms/PhaseBanner.js

@@ -82,6 +82,7 @@ export const PhaseBanner = ({ phase, children, feedbackActive }) => {
       }
 
       setSubmitted(true);
+      setFocusAfterSubmit();
     } else {
       setFeedbackError(error.message);
       srSpeak(error.message);
@@ -110,6 +111,10 @@ export const PhaseBanner = ({ phase, children, feedbackActive }) => {
     }, 1000);
   }
 
+  function setFocusAfterSubmit() {
+    document.getElementById("feedbackButton").focus();
+  }
+
   return (
     <>
       <div className="bg-circle-color">