Improve touch target area on Newsletter anchors to meet WCAG requirements

Author: webstackdev

src/components/Consent/Banner/index.astro

@@ -71,9 +71,9 @@ import CookieSvg from '@assets/images/site/cookie.svg'
             id="consent-modal__content"
             class="text-center text-sm md:text-left md:text-base order-1 md:order-2"
           >
-            This site stores data to improve your experience. Learn more in our <a href="/consent"
+            This site stores data to improve your experience. Learn more in our <a href="/consent" class="inline-flex min-h-6 items-center align-middle"
               >Consent Policy</a
-            > and <a href="/privacy">Privacy Policy</a>.
+            > and <a href="/privacy" class="inline-flex min-h-6 items-center align-middle">Privacy Policy</a>.
           </p>
         </div>
       </div>

src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro

@@ -37,7 +37,7 @@ const {
         outline-none hover:border-content-active hover:bg-content-active/10 focus:outline-none
         focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0
         checked:border-content-active checked:bg-content-active/20 checked:after:content-['']
-        checked:after:absolute checked:after:inset-[3px] checked:after:rounded-[2px]
+        checked:after:absolute checked:after:inset-0.75 checked:after:rounded-xs
         checked:after:bg-content-active 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"
@@ -47,13 +47,13 @@ const {
       By subscribing, you agree to our{' '}
       <a
         href={privacyPolicyUrl}
-        class="text-content-offset underline decoration-current hover:text-content-active focus-visible:text-content-active"
+        class="inline-flex min-h-6 items-center align-middle text-content-offset underline decoration-current hover:text-content-active focus-visible:text-content-active"
       >
         Privacy Policy
       </a>.{' '}
       <a
         href={cookiePolicyUrl}
-        class="text-content-offset underline decoration-current hover:text-content-active focus-visible:text-content-active"
+        class="inline-flex min-h-6 items-center align-middle text-content-offset underline decoration-current hover:text-content-active focus-visible:text-content-active"
       >
         Cookie Policy
       </a>. No spam,

src/components/Layout/Copyright/index.astro

@@ -27,7 +27,7 @@ const publishYear = publishDate.getFullYear()
     <span class="mr-1">See our </span>
     <a
       href="/terms"
-      class="underline transition-colors hover:text-primary-offset hover:decoration-primary-offset focus-visible:text-primary-offset focus-visible:decoration-primary-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+      class="inline-flex min-h-6 items-center align-middle underline transition-colors hover:text-primary-offset hover:decoration-primary-offset focus-visible:text-primary-offset focus-visible:decoration-primary-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
     >
       terms of use
     </a>

test/e2e/specs/11-accessibility/_pages.ts

@@ -8,6 +8,9 @@ export const pages = [
   '/contact',
   '/my-data',
   '/newsletter',
+  '/newsletter/confirm/error-token',
+  '/newsletter/confirm/expired-token',
+  '/newsletter/confirm/success',
   '/offline',
   '/privacy',
   '/search',