From e4078a70c6da88d3ce644a9522e17d29968ff7a7 Mon Sep 17 00:00:00 2001
From: Allison King <allison@ethyca.com>
Date: Fri, 9 Jun 2023 16:26:37 -0400
Subject: [PATCH] Fides-js accessibility wrap up (#3510)

---
 CHANGELOG.md                              | 3 +++
 clients/fides-js/src/components/fides.css | 7 ++++++-
 clients/fides-js/src/lib/consent.tsx      | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ceed49bddc..0bd23e213f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.15.0...main)
 
+### Fixed
+- Remove the `fides-js` banner from tab order when it is hidden and move the overlay components to the top of the tab order. [#3510](https://github.com/ethyca/fides/pull/3510)
+
 
 ## [2.15.0](https://github.com/ethyca/fides/compare/2.14.1...2.15.0)
 
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index a851bb06c8..2e715f9271 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -54,6 +54,8 @@
 div#fides-overlay {
   font-family: var(--fides-overlay-font-family);
   font-size: var(--fides-overlay-font-size-body);
+  z-index: 1000;
+  position: fixed;
 
   /* CSS reset values, adapted from https://www.joshwcomeau.com/css/custom-css-reset/ */
   line-height: calc(1em + 0.4rem);
@@ -74,9 +76,10 @@ div#fides-banner-container {
   z-index: 1;
   width: 100%;
   transform: translateY(0%);
-  transition: transform 1s;
+  transition: transform 1s, visibility 1s;
   display: flex;
   justify-content: center;
+  visibility: visible;
 }
 
 div#fides-banner {
@@ -105,6 +108,7 @@ div#fides-banner-container.fides-banner-bottom {
 
 div#fides-banner-container.fides-banner-bottom.fides-banner-hidden {
   transform: translateY(150%);
+  visibility: hidden;
 }
 
 div#fides-banner-container.fides-banner-top {
@@ -114,6 +118,7 @@ div#fides-banner-container.fides-banner-top {
 
 div#fides-banner-container.fides-banner-top.fides-banner-hidden {
   transform: translateY(-150%);
+  visibility: hidden;
 }
 
 /* Responsive banner */
diff --git a/clients/fides-js/src/lib/consent.tsx b/clients/fides-js/src/lib/consent.tsx
index 70dd1622b5..90bf665849 100644
--- a/clients/fides-js/src/lib/consent.tsx
+++ b/clients/fides-js/src/lib/consent.tsx
@@ -44,7 +44,7 @@ export const initOverlay = async ({
         // Create our own parent element and append to body
         parentElem = document.createElement("div");
         parentElem.id = overlayParentId;
-        document.body.appendChild(parentElem);
+        document.body.prepend(parentElem);
       }
 
       if (experience.component === ComponentType.OVERLAY) {