Improve touch target area for other Footer anchors to meet WCAG requirements

Author: webstackdev

src/components/Footer/index.astro

@@ -29,6 +29,7 @@ const socialLinkClasses = [
   'hover:[&_[data-icon]]:fill-secondary',
   'hover:[&_[data-icon]]:stroke-secondary',
 ].join(' ')
+
 const iconButtonClasses = [
   'inline-flex',
   'justify-center',
@@ -46,6 +47,18 @@ const iconButtonClasses = [
   'focus-visible:text-secondary',
   'hover:text-secondary',
 ].join(' ')
+
+const footerTextLinkClasses = [
+  'inline-flex',
+  'min-h-6',
+  'flex-col',
+  'justify-center',
+  'no-underline',
+  'group',
+  'focus-visible:outline-2',
+  'focus-visible:outline-spotlight',
+  'focus-visible:outline-offset-2',
+].join(' ')
 ---
 
 <site-footer transition:persist>
@@ -126,7 +139,7 @@ const iconButtonClasses = [
           id="page-footer__hire-me-anchor"
           class:list={[
             styles.footerHireMeAnchor,
-            "hidden mt-2 uppercase no-underline focus:text-secondary hover:text-secondary after:ml-1 after:content-['>']",
+            "hidden mt-2 min-h-6 items-center uppercase no-underline focus:text-secondary hover:text-secondary after:ml-1 after:content-['>']",
             'focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2',
           ]}
           aria-label="Available Now. Hire Me"
@@ -181,7 +194,7 @@ const iconButtonClasses = [
             {/* Page footer Subscribe link */}
             <a
               href="/newsletter"
-              class="no-underline group focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+              class={footerTextLinkClasses}
             >
               <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
                 Mailing List
@@ -198,7 +211,7 @@ const iconButtonClasses = [
             {/* Page footer Consent link */}
             <a
               href="/consent"
-              class="no-underline group focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+              class={footerTextLinkClasses}
             >
               <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
                 Consent
@@ -213,7 +226,7 @@ const iconButtonClasses = [
             {/* Page footer Privacy Policy link */}
             <a
               href="/privacy"
-              class="no-underline group focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2"
+              class={footerTextLinkClasses}
             >
               <span class="underline decoration-dotted group-focus-visible:decoration-secondary group-hover:decoration-secondary">
                 Privacy Policy