Improve mobile touch targets to meet WCAG 2.1 Level AAA (44x44px minimum)

docs/src/components/CopyEntireFileButton.astro

@@ -39,6 +39,15 @@ const id = `copy-btn-${Math.random().toString(36).substr(2, 9)}`;
     font-family: inherit;
   }
 
+  /* Mobile-specific: Increase touch targets to meet WCAG 2.1 Level AAA (44x44px) */
+  @media (max-width: 768px) {
+    .copy-entire-file-btn {
+      min-height: 44px;
+      min-width: 44px;
+      padding: 0.75rem 1rem;
+    }
+  }
+
   .copy-entire-file-btn:hover {
     background: var(--sl-color-gray-6);
   }

docs/src/components/ThemeToggle.astro

@@ -120,6 +120,16 @@ const autoIcon = octicons['device-desktop'].toSVG({ width: 16, height: 16 });
     position: relative;
   }
 
+  /* Mobile-specific: Ensure minimum 44x44px touch target for WCAG 2.1 Level AAA */
+  @media (max-width: 768px) {
+    .icon-wrapper {
+      width: 44px;
+      height: 44px;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
   .icon-wrapper:hover {
     background: rgba(110, 118, 129, 0.1);
     color: #f0f6fc;

docs/src/content/docs/labs.mdx

@@ -21,7 +21,7 @@ These are experimental agentic workflows used by the GitHub Next team to learn,
 | [Blog Auditor](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/blog-auditor.md) | claude | [![Blog Auditor](https://github.com/githubnext/gh-aw/actions/workflows/blog-auditor.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/blog-auditor.lock.yml) | - | - |
 | [Brave Web Search Agent](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/brave.md) | copilot | [![Brave Web Search Agent](https://github.com/githubnext/gh-aw/actions/workflows/brave.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/brave.lock.yml) | - | - |
 | [Breaking Change Checker](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/breaking-change-checker.md) | copilot | [![Breaking Change Checker](https://github.com/githubnext/gh-aw/actions/workflows/breaking-change-checker.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/breaking-change-checker.lock.yml) | - | - |
-| [Campaign Generator - Optimized Phase 1](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/campaign-generator.md) | copilot | [![Campaign Generator - Optimized Phase 1](https://github.com/githubnext/gh-aw/actions/workflows/campaign-generator.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/campaign-generator.lock.yml) | - | - |
+| [Campaign Generator - Optimized Phase 1](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/campaign-generator.md) | claude | [![Campaign Generator - Optimized Phase 1](https://github.com/githubnext/gh-aw/actions/workflows/campaign-generator.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/campaign-generator.lock.yml) | - | - |
 | [Campaign: Discussion Task Mining for Code Quality](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/discussion-task-mining.campaign.md) | claude | [![Campaign: Discussion Task Mining for Code Quality](https://github.com/githubnext/gh-aw/actions/workflows/discussion-task-mining.campaign.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/discussion-task-mining.campaign.lock.yml) | - | - |
 | [Campaign: Documentation Quality & Maintenance (Project 73)](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/docs-quality-maintenance-project67.campaign.md) | claude | [![Campaign: Documentation Quality & Maintenance (Project 73)](https://github.com/githubnext/gh-aw/actions/workflows/docs-quality-maintenance-project67.campaign.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/docs-quality-maintenance-project67.campaign.lock.yml) | - | - |
 | [Campaign: File Size Reduction (Project 71)](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/file-size-reduction-project71.campaign.md) | claude | [![Campaign: File Size Reduction (Project 71)](https://github.com/githubnext/gh-aw/actions/workflows/file-size-reduction-project71.campaign.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/file-size-reduction-project71.campaign.lock.yml) | - | - |
@@ -52,6 +52,7 @@ These are experimental agentic workflows used by the GitHub Next team to learn,
 | [Daily News](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-news.md) | copilot | [![Daily News](https://github.com/githubnext/gh-aw/actions/workflows/daily-news.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-news.lock.yml) | `0 9 * * 1-5` | - |
 | [Daily Project Performance Summary Generator (Using Safe Inputs)](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-performance-summary.md) | codex | [![Daily Project Performance Summary Generator (Using Safe Inputs)](https://github.com/githubnext/gh-aw/actions/workflows/daily-performance-summary.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-performance-summary.lock.yml) | - | - |
 | [Daily Secrets Analysis Agent](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-secrets-analysis.md) | copilot | [![Daily Secrets Analysis Agent](https://github.com/githubnext/gh-aw/actions/workflows/daily-secrets-analysis.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-secrets-analysis.lock.yml) | - | - |
+| [Daily Team Evolution Insights](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-team-evolution-insights.md) | claude | [![Daily Team Evolution Insights](https://github.com/githubnext/gh-aw/actions/workflows/daily-team-evolution-insights.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-team-evolution-insights.lock.yml) | - | - |
 | [Daily Team Status](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-team-status.md) | copilot | [![Daily Team Status](https://github.com/githubnext/gh-aw/actions/workflows/daily-team-status.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-team-status.lock.yml) | - | - |
 | [Daily Workflow Updater](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/daily-workflow-updater.md) | copilot | [![Daily Workflow Updater](https://github.com/githubnext/gh-aw/actions/workflows/daily-workflow-updater.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/daily-workflow-updater.lock.yml) | - | - |
 | [DeepReport - Intelligence Gathering Agent](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/deep-report.md) | codex | [![DeepReport - Intelligence Gathering Agent](https://github.com/githubnext/gh-aw/actions/workflows/deep-report.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/deep-report.lock.yml) | `0 15 * * 1-5` | - |

docs/src/styles/custom.css

@@ -446,6 +446,24 @@ body:has(.hero)::before {
   background: transparent !important;
 }
 
+/* Mobile-specific: Increase touch targets for sidebar navigation */
+@media (max-width: 768px) {
+  .sidebar .top-level > li > details > summary,
+  .sidebar .top-level > li > a {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+  }
+
+  .sidebar nav li li a {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+  }
+}
+
 .sidebar nav li li a:hover {
   color: #f0f6fc;
   background-color: transparent !important;
@@ -591,6 +609,25 @@ header::after {
   transition: opacity 0.2s ease;
 }
 
+/* Mobile-specific: Increase touch targets for header anchor links */
+@media (max-width: 768px) {
+  .sl-markdown-content h1 a.header-anchor,
+  .sl-markdown-content h2 a.header-anchor,
+  .sl-markdown-content h3 a.header-anchor,
+  .sl-markdown-content h4 a.header-anchor,
+  .sl-markdown-content h5 a.header-anchor,
+  .sl-markdown-content h6 a.header-anchor,
+  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) a[aria-label^="Permalink"] {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    opacity: 0.5; /* Make visible on mobile for better discoverability */
+  }
+}
+
 .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):hover a[aria-label^="Permalink"] {
   opacity: 0.2;
 }
@@ -836,6 +873,19 @@ header::after {
   border-bottom-color: rgba(216, 150, 255, 0.3);
 }
 
+/* Mobile-specific: Add padding to inline links for better touch targets */
+@media (max-width: 768px) {
+  .sl-markdown-content p a,
+  .sl-markdown-content li a {
+    padding: 0.25rem 0.125rem;
+    margin: -0.25rem -0.125rem;
+    display: inline-block;
+    min-height: 44px;
+    line-height: 1.6;
+    vertical-align: middle;
+  }
+}
+
 :root[data-theme='light'] .sl-markdown-content a {
   color: #0969da;
 }
@@ -869,6 +919,17 @@ nav a[aria-current="page"] {
   color: #010409 !important;
 }
 
+/* Mobile-specific: Ensure social icons have adequate touch targets */
+@media (max-width: 768px) {
+  .social-icons a {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 :root[data-theme='light'] .icon-wrapper {
   color: #424a53 !important;
 }
@@ -1199,6 +1260,17 @@ html {
   color: #f0f6fc;
 }
 
+/* Mobile-specific: Ensure site title has adequate touch target */
+@media (max-width: 768px) {
+  .site-title {
+    min-height: 44px;
+    min-width: 44px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem;
+  }
+}
+
 /* Mobile Navigation - Ensure header elements are visible on mobile */
 @media (max-width: 769px) {
   /* Keep custom header links visible on mobile but make them more compact */
@@ -1208,9 +1280,15 @@ html {
     margin-right: 0.5rem !important;
   }
 
+  /* Increase touch target size for header links to meet WCAG 2.1 Level AAA (44x44px) */
   .header-link {
-    padding: 0.25rem 0.5rem !important;
+    padding: 0.625rem 0.75rem !important; /* Increased from 0.25rem 0.5rem */
     font-size: 0.8125rem !important;
+    min-height: 44px !important;
+    min-width: 44px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
   }
 
   /* Ensure theme toggle is visible on mobile */
@@ -1230,6 +1308,17 @@ html {
     display: none !important;
   }
 
+  /* Ensure search button meets minimum touch target */
+  site-search button[data-open-modal],
+  site-search button[aria-label="Search"] {
+    min-height: 44px !important;
+    min-width: 44px !important;
+    padding: 0.75rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
   /* Force theme toggle and social icons to stay visible on mobile ONLY on landing page (with hero) */
   body:has(.hero) header starlight-theme-select,
   body:has(.hero) .header starlight-theme-select,
@@ -1266,11 +1355,12 @@ html {
     visibility: visible !important;
   }
 
-  /* Make theme toggle easier to tap on mobile */
+  /* Make theme toggle easier to tap on mobile - WCAG 2.1 Level AAA (44x44px) */
   starlight-theme-select .icon-wrapper {
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-    min-width: 2.5rem !important;
+    width: 44px !important;
+    height: 44px !important;
+    min-width: 44px !important;
+    min-height: 44px !important;
   }
 
   /* Ensure proper spacing on mobile header */
@@ -1289,6 +1379,18 @@ html {
   font-weight: 600 !important;
 }
 
+/* Mobile-specific: Ensure primary buttons meet minimum touch target */
+@media (max-width: 768px) {
+  .sl-link-button.primary,
+  .sl-link-button {
+    min-height: 44px !important;
+    padding: 0.75rem 1.5rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+}
+
 .sl-link-button.primary:hover {
   background: rgba(139, 92, 246, 0.5) !important;
   border-color: #8b5cf6 !important;
@@ -1426,3 +1528,29 @@ main,
     padding-right: 1rem;
   }
 }
+
+/* Mobile-specific: Additional touch target improvements for remaining elements */
+@media (max-width: 768px) {
+  /* Skip to content link - accessibility feature */
+  a[href="#_top"],
+  a[class*="skip"] {
+    min-height: 44px !important;
+    min-width: 44px !important;
+    padding: 0.75rem 1rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  /* Anchor links in markdown content */
+  .sl-anchor-link,
+  a.sl-anchor-link,
+  .sl-markdown-content .sl-anchor-link {
+    min-height: 44px !important;
+    min-width: 44px !important;
+    padding: 0.75rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+}