[email protected] - Remove overlay to allow page interaction (#2296

) * [email protected] - Remove overlay to allow page interaction * [email protected] - Update README and remove CSS logical properties introduced in a previous version * [email protected] - Revert CSS logical properties for internal ReopenBannerLink component too * [email protected] - Add prop to make cookie banner first in the tab order (enabled by default) * [email protected] - Update changelog and fix small positioning bug * [email protected] - Fix another minor positioning bug
justeattakeaway · Jun 21, 2023 · 0b008cd · 0b008cd
1 parent ad58a24
commit 0b008cd
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 90 deletions.
diff --git a/packages/components/organisms/f-cookie-banner/CHANGELOG.md b/packages/components/organisms/f-cookie-banner/CHANGELOG.md
@@ -3,6 +3,21 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v4.11.0
+------------------------------
+*June 19, 2023*
+
+### Removed
+- Overlay which prevents users from interacting with the page when the cookie banner is open.
+- CSS logical properties due to incompatibility with some consuming apps 😔
+- `position: absolute` on reopen link to fix bug where it floats elsewhere on the page.
+
+### Added
+- Box shadow instead of overlay for visual distinction.
+- New boolean prop `isFirstInTabOrder` (`true` by default) which sets `tabindex="1"` for all focusable elements to make them appear first in the tab order.
+
+
 v4.10.0
 ------------------------------
 *May 10, 2023*

diff --git a/packages/components/organisms/f-cookie-banner/README.md b/packages/components/organisms/f-cookie-banner/README.md
@@ -4,7 +4,7 @@
   <img width="125" alt="Fozzie Bear" src="../../../../bear.png" />
 
   <p>Cookie Banner</p>
-  <p>This component will conditionally remove all cookies that are not in the exclusion list for the <a href="src/tenants">appropriate locale</a>.</p>
+  <p>This component lets a user tell us which cookies they consent to, and removes/avoids those that they don't.</p>
 </div>
 
 ---
@@ -33,8 +33,8 @@ npm install @justeat/f-cookie-banner
 You can import it in your Vue SFC like this (please note that styles have to be imported separately):
 
 ```js
-import CookieBanner from "@justeat/f-cookie-banner";
-import "@justeat/f-cookie-banner/dist/f-cookie-banner.css";
+import CookieBanner from '@justeat/f-cookie-banner';
+import '@justeat/f-cookie-banner/dist/f-cookie-banner.css';
 
 export default {
   components: {
@@ -63,7 +63,7 @@ Call the component in your template:
     :locale="$i18n.locale" />
 ```
 
-### Non Vue Applications
+### Non-Vue Applications
 
 A static vanilla version of `f-cookie-banner` is available as part of the published component. These self-contained JS & CSS files are compiled from the base Vue component using the Vue CLI [pre-render plugin](https://github.com/SolarLiner/vue-cli-plugin-prerender-spa).
 
@@ -75,7 +75,7 @@ Files can be accessed directly via CDN using [unkpg.com](https://unpkg.com/brows
 
 ***By omitting the version/tag unpkg will serve the latest version automatically, you may wish to fix the version served in your application***
 
-Using the CDN the cookie banner can be added to any web page using basic tags. The page must contain a placeholder element with the id attribute `cookie-banner` for example `<div id="cookie-banner"></div>`
+Using the CDN the cookie banner can be added to any web page using basic tags. The page must contain a placeholder element with an `id` of `"cookie-banner"`, e.g., `<div id="cookie-banner"></div>`.
 
 ***In order for the static cookie banner to look correct, you must also link to the `fozzie-utilities` CSS file created by `@justeat/fozzie` (please see the example below on how to link to it). Whilst `fozzie-reset` and `fozzie-typography` are not required, we highly recommend linking to them as well***
 
@@ -137,20 +137,20 @@ Finally, use the generated bundle in your HTML page
 </html>
 ```
 
-#### Non Vue Custom Props
+#### Non-Vue Custom Props
 
-The Non Vue version is compiled using the Vue CLI [pre-render plugin](https://github.com/SolarLiner/vue-cli-plugin-prerender-spa) this means that prop values are essentially hardcoded at compilation. You can configure your own custom version by simply adding the required props to the base template file used by the pre-renderer.
+The Non-Vue version is compiled using the Vue CLI [pre-render plugin](https://github.com/SolarLiner/vue-cli-plugin-prerender-spa), which means that prop values are determined at build-time. You can configure your own custom version by simply adding the required props to the base template file used by the pre-renderer.
 
-Props should be added to the [App.vue](https://github.com/justeat/fozzie-components/blob/master/packages/components/organisms/f-cookie-banner/f-cookie-banner-static/src/App.vue) Remember the `locale` prop will be replaced by the `build:static-files` task.
+Props should be added to the [App.vue](https://github.com/justeat/fozzie-components/blob/master/packages/components/organisms/f-cookie-banner/f-cookie-banner-static/src/App.vue). Remember the `locale` prop will be replaced by the `build:static-files` task.
 
 In the code example below we add the `nameSuffix` prop:
 
 ```html
 <template>
     <cookie-banner
-        locale='da-DK'
-        should-absolute-position-reopen-link='false'
-        nameSuffix='myName'
+        locale="da-DK"
+        :should-absolute-position-reopen-link="false"
+        nameSuffix="myName"
     />
 </template>
 ```
@@ -173,6 +173,7 @@ The props that can be defined are as follows:
 | `cookieExpiry` | `Number` | `90` | Expiry time (days) of cookies written to the browser. |
 | `shouldUseGreyBackground` | `Boolean` | `true` | Use grey background for the reopen link. |
 | `shouldAbsolutePositionReopenLink` | `Boolean` | `true` | Adds a ResizeObserver and absolutely positions the re-open link to the bottom when the content is smaller than the window |
+| `isFirstInTabOrder` | `Boolean` | `true` | Whether or not the cookie banner should appear first in the page's tab order. |
 | `nameSuffix` | `String` | `''` | Add a suffix to the cookie name. This allows the cookie banner to create a cookie with a different name to be able to handle multiple sub-domains. |
 | `domain` | `String` | `null` | Specifies which hosts can receive a cookie. If unspecified, the attribute defaults to the same host that set the cookie, excluding subdomains. If it is specified, then subdomains are always included. Therefore, passing the prop is less restrictive than omitting it. For example, if you specify `just-eat.co.uk`, the cookie will be used in any subdomain of `just-eat.co.uk` |
 

diff --git a/packages/components/organisms/f-cookie-banner/package.json b/packages/components/organisms/f-cookie-banner/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-cookie-banner",
   "description": "Fozzie Cookie Banner - Cookie Banner",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "main": "dist/f-cookie-banner.umd.min.js",
   "maxBundleSize": "80kB",
   "files": [

diff --git a/packages/components/organisms/f-cookie-banner/src/components/CookieBanner.vue b/packages/components/organisms/f-cookie-banner/src/components/CookieBanner.vue
@@ -6,8 +6,8 @@
             :is-open="!shouldHideBanner"
             is-positioned-bottom
             :has-close-button="false"
-            aria-label="cookieConsentTitle"
-            data-cookie-consent-overlay>
+            :has-overlay="false"
+            aria-label="cookieConsentTitle">
             <div
                 :class="[
                     $style['c-cookieBanner-card'],
@@ -25,7 +25,7 @@
                         id="cookieConsentTitle"
                         ref="cookieBannerHeading"
                         data-test-id="cookieConsentTitle"
-                        tabindex="0"
+                        :tabindex="tabIndex"
                         :class="$style['c-cookieBanner-title']"
                         data-consent-title>
                         {{ copy.mainTitle }}
@@ -44,6 +44,7 @@
                             <v-link
                                 data-test-id="cookie-policy-link"
                                 :href="copy.cookiePolicyLinkUrl"
+                                :tabindex="tabIndex"
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 {{ copy.cookiePolicyLinkText }}
@@ -60,6 +61,7 @@
                         :class="$style['c-cookieBanner-cta']"
                         data-test-id="accept-all-cookies-button"
                         button-size="small"
+                        :tabindex="tabIndex"
                         @click="acceptAllCookiesActions">
                         {{ copy.acceptButtonText }}
                     </button-component>
@@ -68,6 +70,7 @@
                         :class="$style['c-cookieBanner-cta']"
                         data-test-id="accept-necessary-cookies-button"
                         button-size="small"
+                        :tabindex="tabIndex"
                         @click="acceptOnlyNecessaryCookiesActions">
                         {{ copy.nonAcceptButtonText }}
                     </button-component>
@@ -158,6 +161,11 @@ export default {
         domain: {
             type: String,
             default: null
+        },
+
+        isFirstInTabOrder: {
+            type: Boolean,
+            default: true
         }
     },
 
@@ -185,7 +193,7 @@ export default {
          * @returns {Boolean}
          */
         legacyBanner () {
-            return this.shouldShowLegacyBanner === null ? this.config.displayLegacy : this.shouldShowLegacyBanner;
+            return this.shouldShowLegacyBanner ?? this.config.displayLegacy;
         },
 
         /**
@@ -196,6 +204,10 @@ export default {
             return this.nameSuffix
                 ? `${CONSENT_COOKIE_NAME}-${this.nameSuffix}`
                 : CONSENT_COOKIE_NAME;
+        },
+
+        tabIndex () {
+            return this.isFirstInTabOrder ? 1 : 0;
         }
     },
 
@@ -220,12 +232,6 @@ export default {
 
     mounted () {
         this.checkCookieBannerCookie();
-        if (!this.shouldHideBanner) {
-            this.$nextTick(() => {
-                this.addKeyboardHandler();
-                this.focusOnTitle();
-            });
-        }
         this.isIosBrowser = /(iPhone|iPad).*Safari/.test(navigator.userAgent);
 
         if (typeof window === 'object' && this.shouldAbsolutePositionReopenLink && !this.legacyBanner) {
@@ -302,30 +308,6 @@ export default {
             }
         },
 
-        /**
-         * Add keyboard handler
-         */
-        addKeyboardHandler () {
-            if (this.$refs.cookieBanner && this.$refs.cookieBanner.$refs.megaModal) {
-                this.$refs.cookieBanner.$refs.megaModal.addEventListener('keydown', this.setTabLoop);
-            }
-        },
-
-        /**
-         * Set the tab loop for accessibility
-         */
-        setTabLoop (e) {
-            if (e.key === 'Tab') {
-                if (e.shiftKey && e.target === this.$refs.cookieBannerHeading) {
-                    this.$refs.buttonContainer.lastChild.focus();
-                    e.preventDefault();
-                } else if (!e.shiftKey && e.target === this.$refs.buttonContainer.lastChild) {
-                    this.$refs.cookieBannerHeading.focus();
-                    e.preventDefault();
-                }
-            }
-        },
-
         /**
          * Hide the banner
          */
@@ -351,7 +333,6 @@ export default {
         reopenBanner () {
             this.shouldHideBanner = false;
             this.$nextTick(() => {
-                this.addKeyboardHandler();
                 this.focusOnTitle();
             });
         },
@@ -467,22 +448,18 @@ export default {
 <style lang="scss" module>
 @use '@justeat/fozzie/src/scss/fozzie' as f;
 
-[data-cookie-consent-overlay] {
-    position: fixed;
-    color: f.$color-content-default;
-}
-
 .c-cookieBanner-card {
     position: absolute;
-    inset-block-end: 0;
-    inset-inline: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     max-height: 376px;
-    padding-block: f.spacing(d);
-    padding-inline: 0;
+    padding: f.spacing(d) 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: f.$color-background-subtle;
+    box-shadow: f.$elevation-box-shadow-05;
     z-index: 99999992;
 }
 
@@ -493,8 +470,7 @@ export default {
 
 .c-cookieBanner-title {
     @include f.font-size(body-l);
-    margin-block: f.spacing(a) f.spacing(b);
-    margin-inline: 0;
+    margin: f.spacing(a) 0 f.spacing(b);
     padding: 0;
     color: f.$color-content-default;
     text-align: start;
@@ -517,13 +493,12 @@ export default {
 }
 
 .c-cookieBanner-content {
-    padding-block: 0;
-    padding-inline: f.spacing(d);
+    padding: 0 f.spacing(d);
     text-align: start;
     overflow-y: auto;
 
     @include f.media('>=mid') {
-        padding-inline: f.spacing(f);
+        padding: 0 f.spacing(f);
     }
 
     @include f.media('<mid') {
@@ -547,47 +522,43 @@ export default {
 }
 
 .reopen-link-wrapper {
-    position: absolute;
-    inset-block-end: 0;
+    position: relative;
     width: 100%;
 }
 
 .c-cookieBanner-ios {
     @include f.media('<mid') {
-        padding-block-end: f.spacing(j);
+        padding-bottom: f.spacing(j);
     }
 }
 
 .c-cookieBanner-cta-container {
-    padding-block: f.spacing(d) f.spacing(a);
-    padding-inline: f.spacing(e);
+    padding: f.spacing(d) f.spacing(e) f.spacing(a);
 
     .c-cookieBanner-cta {
-        inline-size: 100%;
-    }
+        width: 100%;
 
-    .c-cookieBanner-cta:not(:last-child) {
-        margin-block-end: f.spacing(d);
+        @include f.media('>=mid') {
+            width: inherit;
+            margin-left: f.spacing(d);
+            margin-bottom: 0;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: f.spacing(d);
+
+            @include f.media('>=mid') {
+                margin-bottom: 0;
+            }
+        }
     }
 
     @include f.media('>=mid') {
         display: flex;
         flex-direction: row-reverse;
-        padding-block: f.spacing(d);
-        padding-inline: f.spacing(d);
-        margin-inline: f.spacing(d);
-        min-inline-size: 320px;
-        margin-block: 0;
-
-        .c-cookieBanner-cta {
-            inline-size: inherit;
-            margin-inline-start: f.spacing(d);
-            margin-block-end: 0;
-        }
-
-        .c-cookieBanner-cta:not(:last-child) {
-            margin-block-end: 0;
-        }
+        padding: f.spacing(d);
+        margin: 0 f.spacing(d);
+        min-width: 320px;
     }
 }
 </style>
diff --git a/packages/components/organisms/f-cookie-banner/src/components/ReopenBannerLink.vue b/packages/components/organisms/f-cookie-banner/src/components/ReopenBannerLink.vue
@@ -31,20 +31,23 @@ export default {
 @use '@justeat/fozzie/src/scss/fozzie' as f;
 
 .reopen-link {
+    position: relative;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
-    padding-block: 0 f.spacing(d);
-    padding-inline: f.spacing(b);
+    padding: 0 f.spacing(b) f.spacing(d);
 
     &:focus,
     &:focus-visible {
-        @extend %u-elementFocus;
-        position: absolute;
+        @extend %u-elementFocus--borderless;
+        position: relative;
 
         &, &:after {
-            inset-block-end: 0; // Prevent vertical scrollbar if it doesn't already exist
+            // Prevent scrollbars from appearing if they don't already exist
+            bottom: 0;
+            left: 0;
+            right: 0;
         }
     }
 }