@dargmuesli/nuxt-cookie-control 5.0.0-beta.3 → 5.0.0-beta.4

package/README.md

@@ -118,6 +118,7 @@ colors: {
   controlButtonHoverBackground: '#000',
   controlButtonIconColor: '#000',
   controlButtonIconHoverColor: '#fff',
+  focusRingColor: '#808080',
   modalBackground: '#fff',
   modalButtonBackground: '#000',
   modalButtonColor: '#fff',

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "configKey": "cookieControl",
   "compatibility": {
     "nuxt": "^3.0.0"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 import { createResolver, defineNuxtModule, addPlugin, addImports, addTemplate, extendWebpackConfig, resolvePath } from '@nuxt/kit';
 
 const name = "@dargmuesli/nuxt-cookie-control";
-const version = "5.0.0-beta.3";
+const version = "5.0.0-beta.4";
 
 const en = {
   accept: "Accept",
@@ -41,6 +41,7 @@ const DEFAULTS = {
     controlButtonHoverBackground: "#000",
     controlButtonIconColor: "#000",
     controlButtonIconHoverColor: "#fff",
+    focusRingColor: "#808080",
     modalBackground: "#fff",
     modalButtonBackground: "#000",
     modalButtonColor: "#fff",

package/dist/runtime/components/CookieControl.vue

@@ -102,13 +102,16 @@
                           "
                           @change="toogleCookie(cookie)"
                         />
+                        <button @keydown="toggleButton($event)">
+                          {{ getName(cookie.name) }}
+                        </button>
                         <label
+                          class="cookieControl__ModalCookieName"
                           :for="resolveTranslatable(cookie.name, props.locale)"
+                          tabindex="0"
+                          @keydown="toggleLabel($event)"
                         >
                           {{ getName(cookie.name) }}
-                        </label>
-                        <span class="cookieControl__ModalCookieName">
-                          {{ getName(cookie.name) }}
                           <span v-if="cookie.description">
                             {{ getDescription(cookie.description) }}
                           </span>
@@ -125,7 +128,7 @@
                                 .join(', ')
                             }}
                           </span>
-                        </span>
+                        </label>
                       </div>
                     </li>
                   </ul>
@@ -284,6 +287,20 @@ const setCookies = ({
     ? getCookieIds(cookiesEnabled.value)
     : []
 }
+const toggleButton = ($event: KeyboardEvent) => {
+  if ($event.key === ' ')
+    (
+      ($event.target as HTMLButtonElement | null)
+        ?.nextSibling as HTMLLabelElement | null
+    )?.click()
+}
+const toggleLabel = ($event: KeyboardEvent | MouseEvent) => {
+  if ($event instanceof KeyboardEvent) {
+    if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
+  } else {
+    ;($event.target as HTMLLabelElement | null)?.click()
+  }
+}
 
 // lifecycle
 onBeforeMount(async () => {

package/dist/runtime/styles.css

@@ -86,6 +86,9 @@
   color: var(--cookie-control-barButtonHoverColor);
   background-color: var(--cookie-control-barButtonHoverBackground);
 }
+.cookieControl__Bar button:focus{
+  box-shadow: 0 0 0 3px var(--cookie-control-focusRingColor);
+}
 .cookieControl__Bar button + button {
   margin-left: 10px;
 }
@@ -184,6 +187,9 @@
   color: var(--cookie-control-modalButtonHoverColor);
   background-color: var(--cookie-control-modalButtonHoverBackground);
 }
+.cookieControl__Modal button:focus {
+  box-shadow: 0 0 0 3px var(--cookie-control-focusRingColor);
+}
 .cookieControl__ModalContent {
   position: relative;
   width: 100%;
@@ -227,20 +233,20 @@
 .cookieControl__ModalContent input {
   display: none;
 }
-.cookieControl__ModalContent input:checked + label {
+.cookieControl__ModalContent input:checked + button {
   background-color: var(--cookie-control-checkboxActiveBackground);
 }
-.cookieControl__ModalContent input:checked + label:before {
+.cookieControl__ModalContent input:checked + button:before {
   background-color: var(--cookie-control-checkboxActiveCircleBackground);
   transform: translate3d(100%, -50%, 0);
 }
-.cookieControl__ModalContent input:checked:disabled + label {
+.cookieControl__ModalContent input:checked:disabled + button {
   background-color: var(--cookie-control-checkboxDisabledBackground);
 }
-.cookieControl__ModalContent input:checked:disabled + label:before {
+.cookieControl__ModalContent input:checked:disabled + button:before {
   background-color: var(--cookie-control-checkboxDisabledCircleBackground);
 }
-.cookieControl__ModalContent label {
+.cookieControl__ModalContent input + button {
   position: relative;
   min-width: 36px;
   min-height: 20px;
@@ -252,7 +258,7 @@
   transition: background-color 200ms;
   background-color: var(--cookie-control-checkboxInactiveBackground);
 }
-.cookieControl__ModalContent label:before {
+.cookieControl__ModalContent input + button:before {
   position: absolute;
   content: '';
   top: 50%;

package/dist/runtime/types.mjs

@@ -23,6 +23,7 @@ export const DEFAULTS = {
     controlButtonHoverBackground: "#000",
     controlButtonIconColor: "#000",
     controlButtonIconHoverColor: "#fff",
+    focusRingColor: "#808080",
     modalBackground: "#fff",
     modalButtonBackground: "#000",
     modalButtonColor: "#fff",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [