Sync help documentation from main repository

Synced from: 39b9459d0b5f010679ac35314d4754845c85a01f
Date: 2025-11-29 22:44:47 UTC

Author: andytriboletti

LICENSE

@@ -0,0 +1,22 @@
+Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
+
+Copyright (c) 2025 GreenRobot LLC
+
+This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
+
+Under the following terms:
+
+Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+
+NonCommercial — You may not use the material for commercial purposes.
+
+NoDerivatives — If you remix, transform, or build upon the material, you may not distribute the modified material.
+
+No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+Notices:
+
+You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
+
+No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.
+

_layouts/help.html

@@ -67,6 +67,48 @@ <h2>Contents</h2>
 
   <script src="{{ '/assets/js/lunr.min.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/lunr-search.js' | relative_url }}"></script>
+  <script>
+    // Make scrollable code blocks keyboard accessible
+    (function() {
+      document.addEventListener('DOMContentLoaded', function() {
+        // Find all scrollable pre elements
+        const scrollablePres = document.querySelectorAll('pre');
+        scrollablePres.forEach(function(pre) {
+          // Check if element is scrollable
+          if (pre.scrollWidth > pre.clientWidth || pre.scrollHeight > pre.clientHeight) {
+            // Make it keyboard accessible
+            if (!pre.hasAttribute('tabindex')) {
+              pre.setAttribute('tabindex', '0');
+            }
+            // Add aria-label if missing
+            if (!pre.hasAttribute('aria-label')) {
+              const code = pre.querySelector('code');
+              const lang = code ? code.className.match(/language-(\w+)/) : null;
+              const label = lang ? 'Code block in ' + lang[1] + ' (scrollable)' : 'Scrollable code block';
+              pre.setAttribute('aria-label', label);
+            }
+          }
+        });
+
+        // Add labels to task list checkboxes
+        const taskCheckboxes = document.querySelectorAll('.task-list-item-checkbox');
+        taskCheckboxes.forEach(function(checkbox) {
+          if (!checkbox.hasAttribute('aria-label') && !checkbox.id) {
+            // Get the text content of the parent list item
+            const listItem = checkbox.closest('.task-list-item');
+            if (listItem) {
+              const text = listItem.textContent.trim();
+              // Remove the checkbox text and clean up
+              const label = text.replace(/^\s*\[[ xX]\]\s*/, '').trim();
+              if (label) {
+                checkbox.setAttribute('aria-label', label);
+              }
+            }
+          }
+        });
+      });
+    })();
+  </script>
 </body>
 </html>
 

assets/css/help.css

@@ -267,7 +267,7 @@ li {
   background: var(--help-sidebar);
   font-family: 'SF Mono', Monaco, monospace;
   font-weight: 600;
-  color: var(--help-link);
+  color: #0051a5; /* Changed from var(--help-link) to meet WCAG AA 4.5:1 contrast ratio */
   width: 120px;
   text-align: center;
 }
@@ -304,7 +304,7 @@ code {
   border-radius: 4px;
   font-family: 'SF Mono', Monaco, monospace;
   font-size: 0.9rem;
-  color: var(--help-link);
+  color: #0051a5; /* Changed from #007AFF to meet WCAG AA 4.5:1 contrast ratio on #f5f5f7 */
 }
 
 pre {
@@ -323,6 +323,59 @@ pre code {
   padding: 0;
 }
 
+/* Syntax-highlighted code blocks - fix color contrast */
+.highlight {
+  background: #1d1d1f;
+  border-radius: 8px;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+.highlight pre {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+/* Fix color contrast for syntax-highlighted code elements */
+.highlight .language-plaintext,
+.highlight code.language-plaintext,
+code.language-plaintext {
+  color: #0051a5 !important; /* Changed from #007AFF to meet WCAG AA 4.5:1 contrast ratio */
+  background: var(--help-sidebar);
+}
+
+/* Task list checkboxes - add proper labels for accessibility */
+.task-list-item {
+  list-style-type: none;
+}
+
+.task-list-item-checkbox {
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+.task-list-item-checkbox:focus {
+  outline: 2px solid #0051a5;
+  outline-offset: 2px;
+}
+
+/* Add aria-label support for task list items */
+.task-list-item-checkbox[aria-label] {
+  /* Already has label via aria-label */
+}
+
+/* For task list items without explicit labels, use the text content */
+.task-list-item:has(.task-list-item-checkbox:not([aria-label])) {
+  /* The checkbox is implicitly labeled by the list item text */
+}
+
+/* Make scrollable pre elements keyboard accessible */
+pre[tabindex="0"]:focus {
+  outline: 2px solid #0051a5;
+  outline-offset: 2px;
+}
+
 footer {
   background: #1d1d1f;
   color: #a6b1c2; /* Improved contrast: 4.5:1 ratio on #1d1d1f */

help/mas/accessibility-best-practices.md

@@ -3,6 +3,8 @@ title: Accessibility Best Practices
 layout: help
 ---
 
+# Accessibility Best Practices
+
 ## Overview
 
 This guide combines best practices for both accessibility and HTML validation to help you build websites that are usable, standards-compliant, and performant.

help/mas/accessibility.md

@@ -3,6 +3,8 @@ title: Accessibility Testing
 layout: help
 ---
 
+# Accessibility Testing
+
 ## Overview
 
 CodeFrog includes comprehensive accessibility testing tools designed to help you meet WCAG AA (Web Content Accessibility Guidelines Level AA) standards. These tools help identify and fix accessibility issues before your app or website goes live.

help/mas/ai-coder-coderabbit-augment.md

@@ -1,8 +1,10 @@
 ---
-title: AI Code Review Workflow - CodeRabbit + Augment Code
+title: AI Code Review: CodeRabbit + Augment Code
 layout: help
 ---
 
+# AI Code Review Workflow - CodeRabbit + Augment Code
+
 ## Overview
 
 This workflow helps you efficiently handle code review feedback from CodeRabbit by importing comments into CodeFrog tasks, exporting them to Markdown format, fixing issues with Augment Code AI assistance, and tracking progress.

help/mas/ai-coder-cursor.md

@@ -1,8 +1,10 @@
 ---
-title: AI Code Review Workflow - Cursor / Other Agents
+title: AI Code Review: Cursor & Other Agents
 layout: help
 ---
 
+# AI Code Review: Cursor & Other Agents
+
 ## Overview
 
 This workflow helps you use Cursor or other AI coding agents to fix code review issues efficiently by providing structured prompts and managing the fix process.

help/mas/benefits-valid-html-accessibility.md

@@ -3,6 +3,8 @@ title: Benefits of Valid HTML and Accessibility
 layout: help
 ---
 
+# Benefits of Valid HTML and Accessibility
+
 ## Overview
 
 Valid HTML and accessibility features provide numerous benefits beyond just meeting compliance standards. These practices improve your website's performance, user experience, search engine visibility, and technical quality.

help/mas/code-analysis.md

@@ -1,5 +1,5 @@
 ---
-title: Code Analysis
+title: Code Analysis Tools and Features
 layout: help
 ---
 

help/mas/faq.md

@@ -3,6 +3,8 @@ title: Frequently Asked Questions
 layout: help
 ---
 
+# Frequently Asked Questions
+
 ## Web Testing
 
 ### Why is my web testing request being blocked?