fix: Make banner focusable

src/client/css/partials/floatingBanner.css

@@ -21,6 +21,10 @@
   z-index: 1;
 }
 
+.floating-banner:focus {
+  outline: none;
+}
+
 .floating-banner:not([hidden]) {
   display: flex;
 }
@@ -51,6 +55,12 @@
   color: #fff;
 }
 
+.floating-banner-buttons > button:focus,
+.floating-banner-buttons > .button:focus {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 @media (width <= 600px) {
   .floating-banner {
     padding: var(--padding-sm) 10vw var(--padding-sm) 2.5vw;

src/client/js/partials/floatingBanner.js

@@ -19,6 +19,7 @@ function init () {
 
   setTimeout(() => {
     floatingBannerElement.removeAttribute('hidden')
+    floatingBannerElement.focus()
   }, parseInt(delay, 10))
 
   const buttons = floatingBannerElement.querySelector('.floating-banner-buttons')

src/views/partials/floatingBanner.js

@@ -18,7 +18,7 @@ export const getFloatingBanner = ({ pathname }) => {
   return `
     <link rel='stylesheet' href='/css/partials/floatingBanner.css' type='text/css'>
     <script src='/js/partials/floatingBanner.js' type='module'></script>
-    <div class='floating-banner' data-type='${AppConstants.FLOATING_BANNER_TYPE ?? ''}' data-delay='${AppConstants.FLOATING_BANNER_DELAY ?? '0'}' hidden>
+    <div tabindex='-1' class='floating-banner' data-type='${AppConstants.FLOATING_BANNER_TYPE ?? ''}' data-delay='${AppConstants.FLOATING_BANNER_DELAY ?? '0'}'  hidden>
       <img class='floating-banner-image' src='/images/banner-icon.svg' alt='' />
       <p class='floating-banner-content'>${getMessage('floating-banner-text')}</p>
       <div class='floating-banner-buttons'>