From 8b973155b3120e32fb5df1710761035bab9456d0 Mon Sep 17 00:00:00 2001
From: Kris Charbonneau <71025360+krischarbonneau@users.noreply.github.com>
Date: Tue, 26 Oct 2021 10:16:46 -0400
Subject: [PATCH] Fix focus order after form submission (#407)

* added function to change focus after form submit

* updated CHANGELOG
---
 CHANGELOG.md                        | 1 +
 components/organisms/PhaseBanner.js | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea2ad3e2f8..806c03de5e 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/components/organisms/PhaseBanner.js b/components/organisms/PhaseBanner.js
index 8fab8f830f..51fbf711b6 100644
--- a/components/organisms/PhaseBanner.js
+++ b/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">