Merge branch '1.x' into 2.x

config/services.yaml

@@ -18,6 +18,7 @@ services:
             - '%contao_cookiebar.consent_log%'
             - '%contao_cookiebar.storage_key%'
             - '%contao_cookiebar.consider_dnt%'
+            - '%contao_cookiebar.disable_focustrap%'
         tags:
             - { name: kernel.event_listener, event: kernel.request, method: onKernelRequest }
             - { name: kernel.event_listener, event: kernel.response, method: onKernelResponse }

docs/BASICS.md

@@ -22,6 +22,7 @@ contao_cookiebar:
   consider_dnt: false
   anonymize_ip: false
   consent_log: false
+  disable_focustrap: false
   lifetime: 63072000
   storage_key: ccb_contao_token
   iframe_types:
@@ -39,7 +40,7 @@ Parameter | Description
 `consider_dnt` | Consider "Do not Track" browser setting
 `consent_log` | Enables/disables consent logging. With each action by the visitor, information about the made choice of cookies is stored.
 `anonymize_ip` | Anonymizes the visitor's IP address for each log entry using [Symfony IP Address Anonymizer](https://symfony.com/blog/new-in-symfony-4-4-ip-address-anonymizer).
-`consent_log` | Defines whether the Consent Log is enabled or disabled.
+`disable_focustrap` | Can be used to disable the focus trap that was introduced in `1.17`.
 `lifetime` | Time in seconds that specifies how long the cookie bar settings apply. If the time has expired, the cookie bar is displayed again. If 0 is passed, the cookie bar will never be displayed again automatically and can only be triggered via the version within the cookie bar configuration. (Default: `63072000` = 2 years)
 `storage_key` | The key used for localStorage
 `iframe_types.*` | An array of iFrame-Types and the corresponding templates. By customizing this array, any type can be added (see [Create own iFrame-Types](EXTEND_IFRAME.md))

public/scripts/cookiebar.js

@@ -13,6 +13,7 @@ let ContaoCookiebar = (function () {
             pageId: null,
             hideOnInit: false,
             blocking: false,
+            focusTrap: true,
             version: null,
             lifetime: 63072000,
             consentLog: false,
@@ -77,8 +78,11 @@ let ContaoCookiebar = (function () {
             // Register trigger events
             registerTriggerEvents();
 
-            // Initialize focus trap
-            initFocusTrap();
+
+            if (cookiebar.settings.focusTrap) {
+                // Initialize focus trap
+                initFocusTrap();
+            }
 
             if (cookiebar.settings.blocking) {
                 // Register inert observer
@@ -661,6 +665,11 @@ let ContaoCookiebar = (function () {
             if (!(e.key === 'Tab' || e.keyCode === 9))
                 return;
 
+            if (!cookiebar.focused) {
+                cookiebar.focused = true;
+                cookiebar.firstFocus?.classList.remove('cc-hide-focus')
+            }
+
             if (document.activeElement === cookiebar.lastFocus && !e.shiftKey) {
                 e.preventDefault();
                 cookiebar.firstFocus?.focus()
@@ -684,13 +693,18 @@ let ContaoCookiebar = (function () {
                 })
             }
 
-            // Focus the first element when opening the cookiebar
-            cookiebar.firstFocus.focus()
+            if (!cookiebar.settings.focusTrap)
+                return;
 
-            if (state)
+            if (state) {
                 document.addEventListener('keydown', focusTrap);
-            else
+                cookiebar.dom.querySelector('.cc-inner').onanimationend = () => {
+                    cookiebar.firstFocus?.classList.add('cc-hide-focus')
+                    cookiebar.firstFocus?.focus()
+                }
+            } else {
                 document.removeEventListener('keydown', focusTrap)
+            }
         }
 
         // Check for children that are added whilst the page builds (race-condition)

public/styles/_cookiebar.scss

@@ -202,7 +202,7 @@
   }
 }
 
-.cc-focus {
+.cc-focus:not(.cc-hide-focus) {
 
   &:focus-visible {
     outline: 3px dashed var(--ccb-focus-clr);

src/DependencyInjection/Configuration.php

@@ -45,6 +45,9 @@ public function getConfigTreeBuilder(): TreeBuilder
                         ->prototype('scalar')->end()
                     ->end()
                 ->end()
+                ->booleanNode('disable_focustrap')
+                    ->defaultFalse()
+                ->end()
             ->end()
         ;
 

src/DependencyInjection/ContaoCookiebarExtension.php

@@ -87,5 +87,6 @@ public function load(array $configs, ContainerBuilder $container)
         $container->setParameter('contao_cookiebar.storage_key', $config['storage_key']);
         $container->setParameter('contao_cookiebar.iframe_types', $config['iframe_types']);
         $container->setParameter('contao_cookiebar.page_templates', $config['page_templates']);
+        $container->setParameter('contao_cookiebar.disable_focustrap', $config['disable_focustrap']);
     }
 }