Improve touch target area on Markdown header anchors to meet WCAG requirements

Author: webstackdev

src/components/Home/Hero/__tests__/index.spec.ts

@@ -47,6 +47,8 @@ describe('Home Hero (Astro)', () => {
 
       const readyClass = readyLink?.getAttribute('class') || ''
       expect(readyClass).toContain('no-underline')
+      expect(readyClass).toContain('min-h-6')
+      expect(readyClass).toContain('min-w-6')
       expect(readyClass).toContain('text-success')
       expect(readyClass).toContain('hover:text-success-offset')
       expect(readyClass).toContain('focus-visible:text-success-offset')

src/components/Home/Hero/index.astro

@@ -47,7 +47,7 @@ const readyLinkLabel = 'Contact me about your infrastructure needs'
             <span class="text-success">$</span>
             <a
               href="/contact"
-              class="inline-flex items-center gap-1 no-underline text-success transition-colors hover:text-success-offset focus-visible:text-success-offset"
+              class="inline-flex min-h-6 min-w-6 items-center justify-center gap-1 no-underline text-success transition-colors hover:text-success-offset focus-visible:text-success-offset"
               data-hero-ready-link
               aria-label={readyLinkLabel}
             >

src/components/Layout/Markdown/Lead/index.astro

@@ -35,7 +35,7 @@ const modifiedDateText = shouldShowModifiedDate && modifiedDate ? formatShortDat
           {author && (
             <a
               href="/about"
-              class="font-medium no-underline hover:text-secondary focus:text-secondary"
+              class="inline-flex min-h-6 items-center align-middle font-medium no-underline hover:text-secondary focus:text-secondary"
             >
               {author}
             </a>

src/components/Toc/client/__tests__/index.spec.ts

@@ -118,11 +118,13 @@ describe('TableOfContents component rendering', () => {
       const overlay = root.querySelector('[data-toc-overlay]') as HTMLButtonElement | null
       const panel = root.querySelector('[data-toc-panel]') as HTMLElement | null
       const links = root.querySelectorAll('nav a')
+      const firstLink = root.querySelector('[data-toc-link]') as HTMLAnchorElement | null
 
       expect(toggleButton).toBeTruthy()
       expect(overlay).toBeTruthy()
       expect(panel).toBeTruthy()
       expect(links).toHaveLength(defaultHeadings.length)
+      expect(firstLink?.className).toContain('min-h-6')
       expect(panel?.getAttribute('data-state')).toBe('closed')
       expect(root.hasAttribute('data-open')).toBe(false)
       expect(toggleButton?.getAttribute('aria-pressed')).toBeNull()

src/components/Toc/index.astro

@@ -95,7 +95,7 @@ const tocTree = buildTocTree(items)
                           href={`#${node.slug}`}
                           data-toc-link
                           data-toc-slug={node.slug}
-                          class="block mb-2 text-sm sm:text-base text-content transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
+                          class="flex min-h-6 items-center mb-2 text-sm sm:text-base text-content transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
                         >
                           {node.text}
                         </a>

test/e2e/specs/11-accessibility/wcag-compliance.spec.ts

@@ -14,7 +14,7 @@ describe('WCAG Compliance', () => {
    * exception applies. This test intentionally checks only the simple minimum-size case and
    * does not attempt to model the spacing exception.
    */
-  test.only('@wip touch targets are at least 24x24 pixels', async ({ page: playwrightPage }) => {
+  test.only('@ready touch targets are at least 24x24 pixels', async ({ page: playwrightPage }) => {
     const page = await BasePage.init(playwrightPage)
 
     for (const url of pages) {
@@ -75,23 +75,25 @@ describe('WCAG Compliance', () => {
    */
   test('@ready text has sufficient color contrast', async ({ page: playwrightPage }) => {
     const page = await BasePage.init(playwrightPage)
-    await page.goto('/')
-
-    // Sample a few text elements
-    const paragraphs = page.locator('p').first()
-    const hasVisibleText = await paragraphs.isVisible()
-
-    if (hasVisibleText) {
-      const contrast = await paragraphs.evaluate((el) => {
-        const styles = window.getComputedStyle(el)
-        return {
-          color: styles.color,
-          backgroundColor: styles.backgroundColor,
-        }
-      })
+    for (const url of pages) {
+      await page.goto(url)
+
+      // Sample a few text elements
+      const paragraphs = page.locator('p').first()
+      const hasVisibleText = await paragraphs.isVisible()
+
+      if (hasVisibleText) {
+        const contrast = await paragraphs.evaluate((el) => {
+          const styles = window.getComputedStyle(el)
+          return {
+            color: styles.color,
+            backgroundColor: styles.backgroundColor,
+          }
+        })
 
-      // Basic check that colors are defined
-      expect(contrast.color).toBeTruthy()
+        // Basic check that colors are defined
+        expect(contrast.color).toBeTruthy()
+      }
     }
   })