Fides-js accessibility wrap up (#3510)

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)
 

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 */

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) {