<div class="cookie-message cookie-message--actions" data-type="cookie1" tabindex="0" aria-label="Cookie policy message">
    <div class="cookie-message__container">
        <p class="cookie-message__text">
            This site uses cookies. <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
        </p>

        <div class="cookie-message__actions">
            <div class="
                        cookie-message__action
                        
                    ">
                <button class="button button--secondary cookie-message__button" type="button" aria-label="button">
                    Allow Cookies
                </button>

            </div>
            <div class="
                        cookie-message__action
                        
                    ">
                <button class="button button--secondary cookie-message__button" type="button" aria-label="button">
                    Cookies Settings
                </button>

            </div>
        </div>
    </div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
<div
    class="cookie-message {{ class }}"
    data-type="{{ dataType }}"
    tabindex="0"
    aria-label="{{ ariaLabel }}"
>
    <div class="cookie-message__container">
        <p class="cookie-message__text">
            {{{ text }}}
        </p>

        <div class="cookie-message__actions">
            {{#each cookieActions as |action| }}
                <div
                    class="
                        cookie-message__action
                        {{ action.class }}
                    "
                    {{ action.attributes }}
                >
                    {{ render (component action.content) action.contentContext merge=true }}
                </div>
            {{/each}}
        </div>
    </div>
</div>
<script src="{{static 'cookie-message.js' }}"></script>
{
  "linkAnchor": "Details",
  "ariaLabel": "Cookie policy message",
  "closeClass": "button--rotate-icon",
  "closeIcon": {
    "id": "close",
    "title": "Close",
    "class": "button__icon cookie-message__button-icon",
    "hidden": true
  },
  "closeLabel": false,
  "closeAriaLabel": "Close cookie message",
  "text": "This site uses cookies. <a href=\"#\" class=\"link--invert\">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.",
  "class": "cookie-message--actions",
  "dataType": "cookie1",
  "cookieActions": [
    {
      "content": "button--secondary",
      "contentContext": {
        "text": "Allow Cookies",
        "class": "button--secondary cookie-message__button"
      }
    },
    {
      "content": "button--secondary",
      "contentContext": {
        "text": "Cookies Settings",
        "class": "button--secondary cookie-message__button"
      }
    }
  ]
}
  • Content:
    $cookie-message__width                  : 100% !default;
    $cookie-message__background-color       : $gray-lighter !default;
    $cookie-message__font-size              : $font-size-small !default;
    $cookie-message__font-family            : $font-family-base !default;
    $cookie-message__line-height            : 16px !default;
    $cookie-message__padding                : $spacer--medium $spacer $spacer--medium $spacer--large !default;
    $cookie-message__container-margin       : 0 auto !default;
    $cookie-message__container-max-wdith    : $max-content-width !default;
    $cookie-message__container-wdith        : 100% !default;
    
    $cookie-message__text-color             : $color-secondary !default;
    $cookie-message__text-padding           : 0 !default;
    $cookie-message__text-margin            : 0 $spacer--medium 0 0 !default;
    $cookie-message__text-letter-spacing    : 1px !default;
    
    $cookie-message__button-color           : $color-secondary !default;
    $cookie-message__button-height          : 48px !default;
    $cookie-message__button-font-weight     : $font-weight-normal !default;
    $cookie-message__button-padding         : 0 !default;
    $cookie-message__button-margin          : 0 !default;
    $cookie-message__button-background      : none !default;
    $cookie-message__button-border          : 0 !default;
    $cookie-message__button-text-transform  : none !default;
    
    $cookie-message__button-icon-fill       : $color-secondary !default;
    $cookie-message__button-icon-size       : 24px !default;
    
    //actions
    $cookie-message__padding--actions       : $spacer--medium $spacer--large !default;
    $cookie-message__button-padding--actions: 0 $spacer--large !default;
    
  • URL: /components/raw/cookie-message/_cookie-message-variables.scss
  • Filesystem Path: build/components/Organisms/cookie-message/_cookie-message-variables.scss
  • Size: 1.6 KB
  • Content:
    @import 'cookie-message-variables';
    
    .cookie-message {
        display: none;
        align-items: stretch;
        width: $cookie-message__width;
        padding: $cookie-message__padding;
        background-color: $cookie-message__background-color;
        font-size: $cookie-message__font-size;
        font-family: $cookie-message__font-family;
        line-height: $cookie-message__line-height;
    
        &--open {
            display: flex;
        }
    
        &--actions {
            padding: $cookie-message__padding--actions;
    
            .cookie-message__container {
                flex-direction: column;
    
                @include mq($screen-m) {
                    flex-direction: row;
                }
            }
    
            .cookie-message__button {
                padding: $cookie-message__button-padding--actions;
            }
        }
    
        &__container {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: center;
            width: $cookie-message__container-wdith;
            max-width: $cookie-message__container-max-wdith;
            margin: $cookie-message__container-margin;
    
            @include mq($screen-m) {
                justify-content: space-between;
            }
        }
    
        &__text {
            flex-basis: 100%;
            padding: $cookie-message__text-padding;
            margin: $cookie-message__text-margin;
            color: $cookie-message__text-color;
            text-align: justify;
            font-size: inherit;
            font-family: inherit;
            letter-spacing: $cookie-message__text-letter-spacing;
    
            @include mq($screen-m) {
                text-align: left;
            }
        }
    
        &__link {
            &.focus-visible {
                @include focus-inline();
            }
        }
    
        &__button {
            padding: $cookie-message__button-padding;
            margin: $cookie-message__button-margin;
            height: $cookie-message__button-height;
            min-height: 0;
            color: $cookie-message__button-color;
            border: $cookie-message__button-border;
            background: $cookie-message__button-background;
            font-weight: $cookie-message__button-font-weight;
            text-transform: $cookie-message__button-text-transform;
    
            .button__text {
                color: $cookie-message__text-color;
            }
    
            &:hover {
                .button__text {
                    color: $cookie-message__text-color;
                }
            }
        }
    
        &__button-icon {
            .button--icon & {
                width: $cookie-message__button-icon-size;
                height: $cookie-message__button-icon-size;
                fill: $cookie-message__button-icon-fill;
            }
        }
    
        &__actions {
            display: flex;
            flex-basis: 100%;
            flex-direction: column;
            align-items: center;
    
            @include mq($screen-m) {
                flex-basis: auto;
            }
    
            .button {
                white-space: nowrap;
                width: 100%;
            }
        }
    
        &__action {
            width: 100%;
        }
    }
    
    .cookie-message__text > a {
        @extend .cookie-message__link;
    }
    
  • URL: /components/raw/cookie-message/_cookie-message.scss
  • Filesystem Path: build/components/Organisms/cookie-message/_cookie-message.scss
  • Size: 3 KB
  • Content:
    'use strict';
    class CookieMessage {
      constructor() {
        this.closing = document.querySelectorAll('.cookie-message__close');
        this.cookies = document.querySelectorAll('.cookie-message');
    
        this.start();
      }
      closeBar(el) {
        const cookieMessage = el.currentTarget.parentElement.parentElement;
        const dataType = cookieMessage.dataset.type;
        const focusable = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');
    
        cookieMessage.classList.remove('cookie-message--open');
        localStorage.setItem(dataType, 'closed');
        // after closing message box move focus on first focusable element on the page
        if (focusable.length) {
          let firstFocusable = [...focusable].find(el => {
            return el.offsetParent !== null
          })
          firstFocusable.focus();
        }
      }
      setListeners() {
        this.closing.forEach(el => {
          el.addEventListener('click', this.closeBar);
        });
      }
      start() {
        // Display message if it wasn't closed before
        this.cookies.forEach(el => {
          const dataType = el.dataset.type;
          if (localStorage.getItem(dataType) !== 'closed') {
            el.classList.add('cookie-message--open')
          }
        });
        this.setListeners();
      }
    }
    new CookieMessage();
    
  • URL: /components/raw/cookie-message/cookie-message.js
  • Filesystem Path: build/components/Organisms/cookie-message/cookie-message.js
  • Size: 1.4 KB
  • Handle: @cookie-message--actions
  • Preview:
  • Filesystem Path: build/components/Organisms/cookie-message/cookie-message--actions.hbs

Cookie message accessibility

  1. Implementing cookie message we have to remember about focus management. After closing bar, focus should be set on some visible element on the page. In this component it’s set to move focus on the first focusable elements on the website.
  2. Aria labels on buttons should be set, icon can be hidden (aria-hidden=”true”)