Fix touch target size violations - buttons below 44px minimum

[Copilot]

Multiple interactive elements fail WCAG 2.1 AA minimum touch target size (44x44px), creating accessibility barriers for users with motor impairments and poor mobile UX.

Changes

• .cta-button: Set min-height: 44px, adjusted padding to 12px 24px
• .secondary-link: Added min-height: 44px, padding 12px 20px, display: inline-flex with align-items: center for vertical centering

.cta-button {
  padding: 12px 24px;
  min-height: 44px;
}

.secondary-link {
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

Screenshot

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node node install.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>🔴 Fix touch target size violations - buttons below 44px minimum</issue_title>
<issue_description>## Issue Type
🔴 CRITICAL - Accessibility Violation

Priority

HIGH - Complete within 24 hours

Problem

Multiple interactive elements fail to meet the WCAG 2.1 AA minimum touch target size requirement of 44x44 pixels. This creates accessibility barriers and poor mobile user experience.

Impact

• Fails WCAG 2.1 Success Criterion 2.5.5 (Target Size)
• Difficult for users with motor impairments to interact with elements
• Poor mobile usability, especially for users with larger fingers
• Legal compliance risk for accessibility standards

Violations Identified

1. Primary CTA Button (style.css line 134)

/* Current - VIOLATION */
.cta-button {
  padding: var(--space-1) var(--space-3); 
  min-height: 32px; /* ❌ Below 44px minimum */
}

/* Should be */
.cta-button {
  padding: 12px 24px; /* Adequate padding for 44px height */
  min-height: 44px; /* ✅ Meets WCAG AA standard */
}

2. Secondary Link (style.css line 139)

/* Current - VIOLATION */
.secondary-link {
  padding: 8px 12px; /* ❌ Insufficient padding, no min-height */
}

/* Should be */
.secondary-link {
  padding: 12px 20px;
  min-height: 44px; /* ✅ Meets WCAG AA standard */
  display: inline-flex;
  align-items: center;
}

Files Requiring Changes

• style.css (lines 128-145)

Acceptance Criteria

• .cta-button has min-height: 44px with appropriate padding
• .secondary-link has min-height: 44px with appropriate padding
• Both elements have minimum width of 44px (or adequate inline padding)
• Visual appearance maintains design integrity
• Mobile testing confirms easy tap targets
• Accessibility audit passes touch target requirements

Testing Checklist

• Test on mobile devices (iOS Safari, Android Chrome)
• Verify with Chrome DevTools mobile emulation
• Use accessibility inspector to verify computed sizes
• Test with users who have motor impairments (if possible)
• Run automated accessibility testing (axe-core, Lighthouse)

Related Standards

• WCAG 2.1 Success Criterion 2.5.5 - Target Size (Level AAA, but recommended for Level AA compliance)
• AGENTS.md - Design Guidelines: "Buttons: Minimum 44px touch target size"
• Design System: Component Standards require 44x44px minimum for touch elements

---

Created from Design Review conducted on November 25, 2025</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes 🔴 Fix touch target size violations - buttons below 44px minimum #52

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.