mobile-ai-agents 1.0.23

package/agents/cross-platform/accessibility-auditor/README.md

@@ -0,0 +1,47 @@
+# Accessibility Auditor Agent
+
+> Paste a UI component. Get a WCAG 2.2-aligned accessibility audit with CRITICAL / HIGH / MEDIUM / LOW findings and platform-specific fixes for Compose, SwiftUI, Flutter, or React Native.
+
+---
+
+## What This Agent Does
+
+Reviews mobile UI code for accessibility compliance across all four major mobile UI frameworks:
+
+- **Content labels** — missing `contentDescription`, `accessibilityLabel`, or `Semantics(label:)` on interactive/meaningful elements
+- **Touch targets** — elements below 48dp (Android) or 44pt (iOS/Flutter/RN) minimum
+- **Roles and traits** — buttons not announced as buttons, toggles without state (`isSelected`, `checked`)
+- **Focus order** — visual vs. hierarchy mismatch, focus not trapped in modals
+- **Dynamic announcements** — state changes (loading complete, error shown) not announced to screen readers
+- **Grouping** — related elements read as separate items when they should be combined
+
+Every finding includes: element name, what a screen reader currently announces, what it should announce, the WCAG 2.2 criterion, and the corrected code.
+
+---
+
+## Files
+
+| File | Purpose |
+|---|---|
+| [`agent.md`](agent.md) | Input format, output format, full system prompt |
+| [`example-input.md`](example-input.md) | Compose TaskItem with missing labels and small tap target |
+| [`example-output.md`](example-output.md) | Full WCAG-annotated accessibility audit |
+
+---
+
+## Quick Start
+
+```
+PLATFORM: <Android-Compose | Android-XML | iOS-SwiftUI | iOS-UIKit | Flutter | React-Native>
+FILE_PATH: <relative path>
+CODE:
+[paste the UI component]
+```
+
+---
+
+## Related Agents
+
+- [`agents/cross-platform/security-scanner`](../security-scanner/) — pair with this for a complete pre-release audit
+- `skills/shared/accessibility-audit.md` — quick inline accessibility checklist
+- `prompts/ios/swiftui-accessibility.md` — SwiftUI-only accessibility audit prompt

package/agents/cross-platform/accessibility-auditor/agent.md

@@ -0,0 +1,268 @@
+# Agent 12 — Accessibility Auditor
+
+**Platform:** Cross-Platform (Android / iOS / Flutter / React Native)  
+**Category:** Code Quality / Accessibility  
+**Complexity:** Medium
+
+---
+
+## Purpose
+
+Reviews mobile UI code for accessibility compliance across Android (Compose/XML), iOS (SwiftUI/UIKit), Flutter, and React Native. Returns a severity-ranked findings report covering missing labels, touch target sizes, dynamic content announcements, focus order, and screen reader behavior. Each finding includes the exact fix for the target platform.
+
+---
+
+## Input Format
+
+```
+PLATFORM: <Android-Compose | Android-XML | iOS-SwiftUI | iOS-UIKit | Flutter | React-Native>
+FILE_PATH: <relative path>
+CODE:
+<paste the UI component or screen code>
+```
+
+**Fields:**
+
+| Field | Required | Description |
+|---|---|---|
+| `PLATFORM` | Yes | Specific platform and UI framework |
+| `FILE_PATH` | Yes | Used to infer component role |
+| `CODE` | Yes | UI source code to audit |
+
+---
+
+## Output Format
+
+```
+ACCESSIBILITY AUDIT
+===================
+File: <file path>
+Platform: <platform>
+Issues Found: <count>
+Critical: <count>  High: <count>  Medium: <count>  Low: <count>
+
+FINDINGS
+--------
+[CRITICAL] <Issue title>
+  Element  : <UI element or widget>
+  Problem  : <What is missing and who is blocked>
+  WCAG     : <WCAG 2.2 criterion, e.g. 1.1.1 Non-text Content>
+  Fix      :
+  <corrected code snippet in target platform>
+
+[HIGH] <Issue title>
+  ...
+
+[MEDIUM] / [LOW]
+  ...
+
+SCREEN READER ASSESSMENT
+-------------------------
+TalkBack / VoiceOver compatibility: <PASS / PARTIAL / FAIL>
+  → <Summary of what a screen reader user would experience>
+
+TOUCH TARGET AUDIT
+------------------
+All targets ≥48dp (Android) / 44pt (iOS): <Yes / No>
+  → <List of elements that fail the minimum>
+
+DYNAMIC CONTENT
+---------------
+State changes announced: <Yes / No / N/A>
+  → <Explanation>
+
+OVERALL VERDICT: <PASS / NEEDS WORK / INACCESSIBLE>
+```
+
+---
+
+## System Prompt
+
+```
+You are a senior mobile accessibility engineer with expertise in WCAG 2.2, Android TalkBack,
+iOS VoiceOver, Flutter Semantics, and React Native Accessibility API. Your job is to review
+mobile UI code for accessibility issues and produce a structured, actionable audit report.
+
+For each finding:
+- Assign severity: CRITICAL (blocks screen reader users entirely), HIGH (degrades usability
+  significantly), MEDIUM (impacts some users), LOW (minor improvement).
+- Reference the relevant WCAG 2.2 criterion (e.g., 1.1.1 Non-text Content, 2.5.5 Target Size).
+- Provide the exact fix in the platform's native accessibility API — not pseudocode.
+
+Checks to perform:
+
+CONTENT DESCRIPTIONS / LABELS (WCAG 1.1.1)
+- Every interactive element that doesn't contain descriptive text children needs a label.
+- Labels describe the ACTION, not the icon: "Delete task" not "Trash icon".
+- Decorative images/icons must be explicitly hidden from the accessibility tree.
+- Android Compose: Modifier.semantics { contentDescription = "..." } or Icon(contentDescription = "...")
+- Android XML: android:contentDescription or android:labelFor
+- iOS SwiftUI: .accessibilityLabel("..."), .accessibilityHidden(true) for decorative
+- iOS UIKit: view.accessibilityLabel, view.isAccessibilityElement = false for decorative
+- Flutter: Semantics(label: "..."), ExcludeSemantics for decorative
+- React Native: accessibilityLabel="...", accessibilityElementsHidden={true} for decorative
+
+TOUCH TARGET SIZE (WCAG 2.5.5)
+- Minimum 48×48 dp (Android) / 44×44 pt (iOS / Flutter / RN) for all interactive elements.
+- Android Compose: Modifier.minimumInteractiveComponentSize() or Modifier.size(48.dp).wrapContentSize()
+- iOS SwiftUI: .frame(minWidth: 44, minHeight: 44) or .contentShape(Rectangle())
+- Flutter: SizedBox(width: 48, height: 48, child: ...) or GestureDetector with padding
+- React Native: minHeight: 44, minWidth: 44 in StyleSheet, or hitSlop
+
+ROLES AND TRAITS (WCAG 4.1.2)
+- Buttons must be announced as buttons, not generic "view" or "image".
+- Android Compose: Modifier.semantics { role = Role.Button }
+- iOS SwiftUI: .accessibilityAddTraits(.isButton)
+- Flutter: Semantics(button: true)
+- React Native: accessibilityRole="button"
+- Toggles, checkboxes, sliders: assign the correct role AND state.
+
+FOCUS ORDER AND GROUPING (WCAG 1.3.2, 2.4.3)
+- Logical reading order must match visual order. Flag absolute-positioned elements
+  where the hierarchy order differs from the visual order.
+- Group related elements: Android Compose Modifier.semantics(mergeDescendants = true),
+  iOS UIAccessibilityContainer, Flutter MergeSemantics, React Native accessible={true}.
+- Modal dialogs: focus must be trapped inside the modal when it opens.
+  React Native: accessibilityViewIsModal={true}
+  iOS: UIAccessibility.post(notification: .screenChanged, argument: firstModalElement)
+
+DYNAMIC CONTENT ANNOUNCEMENTS (WCAG 4.1.3)
+- When content changes dynamically (success, error, counter update, loading complete),
+  announce it to screen readers:
+  Android: View.announceForAccessibility("...") or Modifier.semantics { liveRegion = LiveRegionMode.Polite }
+  iOS: UIAccessibility.post(notification: .announcement, argument: "...")
+  Flutter: SemanticsService.announce("...", TextDirection.ltr)
+  React Native: AccessibilityInfo.announceForAccessibility("...")
+- Flag any dynamic state change (snackbar, badge, loading indicator hiding) with no announcement.
+
+Output MUST follow the exact format specified.
+```
+
+---
+
+## Example
+
+### Input
+
+```
+PLATFORM: Android-Compose
+FILE_PATH: ui/components/TaskItem.kt
+CODE:
+@Composable
+fun TaskItem(
+    task: Task,
+    onDelete: (String) -> Unit,
+    onToggle: (String) -> Unit
+) {
+    Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
+        Checkbox(
+            checked = task.isDone,
+            onCheckedChange = { onToggle(task.id) }
+        )
+        Text(
+            text = task.title,
+            modifier = Modifier.weight(1f)
+        )
+        IconButton(
+            onClick = { onDelete(task.id) },
+            modifier = Modifier.size(24.dp)
+        ) {
+            Icon(Icons.Default.Delete, contentDescription = null)
+        }
+    }
+}
+```
+
+### Output
+
+```
+ACCESSIBILITY AUDIT
+===================
+File: ui/components/TaskItem.kt
+Platform: Android-Compose
+Issues Found: 3
+Critical: 1  High: 1  Medium: 1  Low: 0
+
+FINDINGS
+--------
+[CRITICAL] Icon button has no accessibility label
+  Element  : IconButton with Icons.Default.Delete
+  Problem  : contentDescription = null means TalkBack announces this as "button" with
+             no indication of its function. Screen reader users cannot know it deletes
+             the task without exploring by trial and error.
+  WCAG     : 1.1.1 Non-text Content
+  Fix      :
+  Icon(
+      imageVector = Icons.Default.Delete,
+      contentDescription = "Delete ${task.title}"  // task-specific, action-oriented
+  )
+
+[HIGH] Touch target too small (24.dp × 24.dp)
+  Element  : IconButton — Modifier.size(24.dp)
+  Problem  : 24 dp is half the Android minimum interactive size of 48×48 dp.
+             Users with motor impairments or large fingers will frequently miss this target.
+  WCAG     : 2.5.5 Target Size (Enhanced)
+  Fix      :
+  IconButton(
+      onClick = { onDelete(task.id) },
+      modifier = Modifier.size(48.dp)  // minimum interactive size
+  ) {
+      Icon(Icons.Default.Delete, contentDescription = "Delete ${task.title}")
+  }
+  // Or keep the visual 24dp icon but expand the tap area:
+  // Modifier.size(48.dp).wrapContentSize(Alignment.Center)
+
+[MEDIUM] Checkbox missing associated label for screen readers
+  Element  : Checkbox — onCheckedChange toggles task.isDone
+  Problem  : TalkBack announces "Checkbox, not checked" with no context about which task
+             this checkbox belongs to. Users navigating by touch must guess which task
+             the checkbox applies to.
+  WCAG     : 4.1.2 Name, Role, Value
+  Fix      :
+  Checkbox(
+      checked = task.isDone,
+      onCheckedChange = { onToggle(task.id) },
+      modifier = Modifier.semantics {
+          contentDescription = "${if (task.isDone) "Mark incomplete" else "Mark complete"}: ${task.title}"
+      }
+  )
+  // Or merge the Row into a single accessible node:
+  Row(
+      modifier = Modifier
+          .fillMaxWidth()
+          .padding(16.dp)
+          .semantics(mergeDescendants = true) {}  // merges Checkbox + Text into one node
+          .toggleable(
+              value = task.isDone,
+              onValueChange = { onToggle(task.id) },
+              role = Role.Checkbox
+          )
+  ) { ... }
+
+SCREEN READER ASSESSMENT
+-------------------------
+TalkBack / VoiceOver compatibility: FAIL
+  → TalkBack users encounter: an unlabeled delete button (cannot identify function),
+    a sub-minimum tap target (likely to miss), and a checkbox with no task context.
+    A blind user cannot safely operate this component.
+
+TOUCH TARGET AUDIT
+------------------
+All targets ≥48dp: No
+  → IconButton is 24×24 dp — fails Android minimum (48×48 dp).
+
+DYNAMIC CONTENT
+---------------
+State changes announced: N/A
+  → No dynamic content changes (snackbars, badges) in this component.
+
+OVERALL VERDICT: INACCESSIBLE
+```
+
+---
+
+## Notes
+
+- The agent cannot verify color contrast ratios from source code alone. Test contrast with the Android Accessibility Scanner or iOS Accessibility Inspector.
+- Always test with real assistive technology on a physical device — TalkBack on Android, VoiceOver on iOS — emulator behavior differs.
+- Tested with: Claude Sonnet 4.6, GPT-4o.

package/agents/cross-platform/accessibility-auditor/example-input.md

@@ -0,0 +1,84 @@
+# Example Input — Accessibility Auditor
+
+---
+
+```
+PLATFORM: Android-Compose
+FILE_PATH: ui/components/TaskItem.kt
+CODE:
+@Composable
+fun TaskItem(
+    task: Task,
+    onDelete: (String) -> Unit,
+    onToggle: (String) -> Unit
+) {
+    Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
+        Checkbox(
+            checked = task.isDone,
+            onCheckedChange = { onToggle(task.id) }
+        )
+        Text(
+            text = task.title,
+            modifier = Modifier.weight(1f)
+        )
+        IconButton(
+            onClick = { onDelete(task.id) },
+            modifier = Modifier.size(24.dp)
+        ) {
+            Icon(Icons.Default.Delete, contentDescription = null)
+        }
+    }
+}
+```
+
+---
+
+## What to Expect
+
+The agent identifies three accessibility issues. See [`example-output.md`](example-output.md) for the full WCAG-annotated report.
+
+**Issue map:**
+1. Delete `IconButton` has no `contentDescription` — TalkBack announces "button" with no context (CRITICAL)
+2. `IconButton` is 24×24dp — below the 48×48dp Android minimum (HIGH)
+3. `Checkbox` has no associated label — TalkBack announces "Checkbox, not checked" with no task context (MEDIUM)
+
+---
+
+## Variations
+
+### iOS SwiftUI
+```
+PLATFORM: iOS-SwiftUI
+FILE_PATH: Views/TaskRowView.swift
+CODE:
+struct TaskRowView: View {
+    let task: Task
+    let onDelete: () -> Void
+    let onToggle: () -> Void
+    var body: some View {
+        HStack {
+            Image(systemName: task.isDone ? "checkmark.circle.fill" : "circle")
+                .onTapGesture { onToggle() }
+            Text(task.title)
+            Spacer()
+            Button(action: onDelete) {
+                Image(systemName: "trash")
+            }
+            .frame(width: 20, height: 20)
+        }
+    }
+}
+```
+
+### React Native
+```
+PLATFORM: React-Native
+FILE_PATH: src/components/NotificationBadge.tsx
+CODE:
+const NotificationBadge = ({ count }: { count: number }) => (
+  <View style={styles.badge}>
+    <Text style={styles.count}>{count}</Text>
+  </View>
+);
+```
+Issue: Badge updates are not announced to screen readers — when count changes, TalkBack/VoiceOver users don't know.

package/agents/cross-platform/accessibility-auditor/example-output.md

@@ -0,0 +1,132 @@
+# Example Output — Accessibility Auditor
+
+Full agent response to the input in [`example-input.md`](example-input.md).
+
+---
+
+```
+ACCESSIBILITY AUDIT
+===================
+File: ui/components/TaskItem.kt
+Platform: Android-Compose
+Issues Found: 3
+Critical: 1  High: 1  Medium: 1  Low: 0
+
+FINDINGS
+--------
+
+[CRITICAL] Icon button has no accessibility label
+  Element  : IconButton → Icon(Icons.Default.Delete, contentDescription = null)
+  TalkBack announces: "Button" (no function description)
+  Should announce  : "Delete [task title]"
+  WCAG     : 1.1.1 Non-text Content
+  Problem  : contentDescription = null means TalkBack announces this as an unlabeled
+             interactive button. Screen reader users cannot know what tapping it does
+             without trial and error — a potentially destructive action with no label is
+             unusable for visually impaired users.
+  Fix      :
+  IconButton(
+      onClick = { onDelete(task.id) },
+      modifier = Modifier.size(48.dp)  // also fix touch target — see HIGH finding
+  ) {
+      Icon(
+          imageVector = Icons.Default.Delete,
+          // Action-oriented, task-specific — not "Trash icon" or "Delete"
+          contentDescription = "Delete ${task.title}"
+      )
+  }
+
+[HIGH] Touch target too small (24×24 dp)
+  Element  : IconButton with Modifier.size(24.dp)
+  WCAG     : 2.5.5 Target Size (Enhanced) — minimum 44×44 CSS px; Android guideline: 48×48 dp
+  Problem  : 24dp is half the Android minimum interactive size. Users with motor impairments,
+             tremors, or large fingers will frequently miss this target. On high-density
+             displays, 24dp is physically very small — typically 6–8mm on a phone screen.
+  Fix      :
+  IconButton(
+      onClick = { onDelete(task.id) },
+      modifier = Modifier.size(48.dp)    // meets the 48×48dp minimum
+  ) {
+      Icon(
+          imageVector = Icons.Default.Delete,
+          contentDescription = "Delete ${task.title}",
+          modifier = Modifier.size(24.dp)  // keep icon visually 24dp inside the 48dp target
+      )
+  }
+  Alternative: use Modifier.minimumInteractiveComponentSize() which enforces the platform
+  minimum automatically:
+  IconButton(
+      onClick = { onDelete(task.id) },
+      modifier = Modifier.minimumInteractiveComponentSize()
+  ) { ... }
+
+[MEDIUM] Checkbox missing task context label
+  Element  : Checkbox — checked = task.isDone, onCheckedChange = { onToggle(task.id) }
+  TalkBack announces: "Checkbox, not checked" (no task name)
+  Should announce  : "Mark complete: Buy groceries, Checkbox, not checked"
+  WCAG     : 4.1.2 Name, Role, Value
+  Problem  : TalkBack reads the Checkbox with its checked/unchecked state but no context
+             about which task it belongs to. A user navigating by touch exploration must
+             guess which checkbox belongs to which task.
+  Fix Option A — add semantics to the Checkbox:
+  Checkbox(
+      checked = task.isDone,
+      onCheckedChange = { onToggle(task.id) },
+      modifier = Modifier.semantics {
+          contentDescription = "${if (task.isDone) "Mark incomplete" else "Mark complete"}: ${task.title}"
+      }
+  )
+
+  Fix Option B — merge the Row into one accessible element (better UX):
+  Row(
+      modifier = Modifier
+          .fillMaxWidth()
+          .padding(16.dp)
+          // Merge all child semantics into one accessible node
+          .semantics(mergeDescendants = true) {}
+          // Make the whole row toggleable as a checkbox
+          .toggleable(
+              value = task.isDone,
+              onValueChange = { onToggle(task.id) },
+              role = Role.Checkbox
+          )
+  ) {
+      // Remove individual Checkbox onCheckedChange — the Row handles interaction
+      Checkbox(checked = task.isDone, onCheckedChange = null)
+      Text(text = task.title, modifier = Modifier.weight(1f))
+      // Delete button — keep separate from the toggleable Row
+      IconButton(
+          onClick = { onDelete(task.id) },
+          modifier = Modifier.minimumInteractiveComponentSize()
+      ) {
+          Icon(Icons.Default.Delete, contentDescription = "Delete ${task.title}")
+      }
+  }
+  With Option B, TalkBack reads the entire row as: "Buy groceries, not checked, Checkbox"
+  and tapping anywhere on the row toggles the task — much more usable.
+
+SCREEN READER ASSESSMENT
+-------------------------
+TalkBack / VoiceOver compatibility: FAIL
+  → A visually impaired user encounters:
+    - An unlabeled delete button (cannot identify what it does)
+    - A 24dp tap target (likely to miss with assistive touch or motor impairment)
+    - A checkbox with no task context (cannot know which task they're checking)
+    The component is not safely operable with TalkBack enabled.
+
+TOUCH TARGET AUDIT
+------------------
+All targets ≥ 48dp: No
+  → IconButton is 24×24dp — fails Android guideline.
+  → Checkbox is full-height (inherits Row padding) — acceptable. ✓
+  → Text is not interactive — not evaluated. ✓
+
+DYNAMIC CONTENT
+---------------
+State changes announced: N/A
+  → No async state changes (snackbars, counters) in this component.
+  → If task completion triggers a Snackbar elsewhere in the tree, ensure it uses
+    Modifier.semantics { liveRegion = LiveRegionMode.Polite } to announce to TalkBack.
+
+OVERALL VERDICT: INACCESSIBLE
+```