Improve touch target area for Consent/Checkbox privacy policy and consent link anchors to meet WCAG requirements

Author: webstackdev

src/components/Consent/Checkbox/layouts/default.astro

@@ -34,7 +34,7 @@ const {
       aria-labelledby={`${id}-label`}
       aria-describedby={`${id}-description`}
       aria-invalid="false"
-      class="relative mt-1 h-5 w-5 shrink-0 appearance-none rounded border-2 border-content-active bg-transparent outline-none hover:border-primary hover:bg-primary-offset/10 focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 checked:border-primary checked:bg-spotlight checked:after:content-[''] checked:after:absolute checked:after:inset-1 checked:after:rounded-xs checked:after:bg-content-inverse after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight cursor-pointer"
+      class="relative mt-1 h-5 w-5 shrink-0 appearance-none rounded border-2 border-trim bg-transparent outline-none hover:border-primary hover:bg-primary-offset/10 focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 checked:border-primary checked:bg-spotlight checked:after:content-[''] checked:after:absolute checked:after:inset-1 checked:after:rounded-xs checked:after:bg-content-inverse after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight cursor-pointer"
     />
     <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
     <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed">
@@ -46,7 +46,7 @@ const {
             I consent to Webstack Builders processing my personal data for {purpose}. See our{' '}
             <a
               href={privacyPolicyUrl}
-              class="text-primary underline hover:text-secondary hover:decoration-secondary"
+              class="inline-flex min-h-6 items-center align-middle text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -55,7 +55,7 @@ const {
             and{' '}
             <a
               href={cookiePolicyUrl}
-              class="text-primary underline hover:text-secondary hover:decoration-secondary"
+              class="inline-flex min-h-6 items-center align-middle text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >

src/components/Consent/Checkbox/layouts/download.astro

@@ -46,14 +46,14 @@ const {
       I consent to Webstack Builders processing my personal data for {purpose}. See our{' '}
       <a
         href={privacyPolicyUrl}
-        class="text-white underline decoration-current hover:text-(--color-blue-100) focus-visible:text-(--color-blue-100)"
+        class="inline-flex min-h-6 items-center align-middle text-white underline decoration-current hover:text-blue-100 focus-visible:text-blue-100"
       >
         Privacy Policy
       </a>{' '}
       and{' '}
       <a
         href={cookiePolicyUrl}
-        class="text-white underline decoration-current hover:text-(--color-blue-100) focus-visible:text-(--color-blue-100)"
+        class="inline-flex min-h-6 items-center align-middle text-white underline decoration-current hover:text-blue-100 focus-visible:text-blue-100"
       >
         Cookie Policy
       </a>