move example to playground

Author: ceceppa

.gitignore

@@ -48,3 +48,4 @@ coverage
 !.yarn/sdks
 !.yarn/versions
 example/.yarn
+playground/.yarn/cache/

README.md

@@ -63,6 +63,12 @@ export const App = () => {
 };
 ```
 
+### Playground
+
+You can use the playground app within this repository to see how AMA checks work in practice.
+The playground can also be used to learn how to fix accessibility issues in your app.
+
+
 ## 📃 [Documentation](https://commerce.nearform.com/open-source/react-native-ama)
 
 The documentation contains everything you need to know about `@react-native-ama/...`. It contains several sections in order of importance when you first get started:

package.json

@@ -6,8 +6,8 @@
   "repository": "https://github.com/FormidableLabs/react-native-ama.git",
   "homepage": "https://commerce.nearform.com/open-source/react-native-ama/",
   "scripts": {
-    "example:bare": "yarn --cwd examples/bare",
-    "example:expo": "yarn --cwd examples/expo",
+    "playground": "yarn --cwd playground",
+    "playground:ios": "yarn --cwd playground run ios",
     "build:animations": "yarn workspace @react-native-ama/animations build",
     "build:core": "yarn workspace @react-native-ama/core build",
     "build:extras": "yarn workspace @react-native-ama/extras build",
@@ -20,7 +20,8 @@
     "ts:check": "tsc --noEmit",
     "lint": "eslint --ext .js,.ts,.tsx ./packages",
     "version": "yarn changeset version && yarn install --no-frozen-lockfile",
-    "build": "yarn build:internal && yarn build:core && yarn build:animations && yarn build:react-native && yarn build:extras && yarn build:forms && yarn build:lists"
+    "build": "yarn build:internal && yarn build:core && yarn build:animations && yarn build:react-native && yarn build:extras && yarn build:forms && yarn build:lists",
+    "prettier": "yarn prettier --write 'packages/**/*.{js,jsx,ts,tsx}'"
   },
   "workspaces": [
     "packages/animations",

packages/core/android/src/debug/java/expo/modules/ama/ReactNativeAmaModule.kt

@@ -98,7 +98,7 @@ class ReactNativeAmaModule : Module() {
 
     private fun performA11yChecks() {
         Logger.info("performA11yChecks", "doing the job")
-        val issues = a11yChecker.performA11yChecks(currentDecorView)
+        val issues = a11yChecker.performA11yChecks(currentDecorView!!)
 
         sendEvent(
                 "onA11yIssues",

packages/core/android/src/debug/java/expo/modules/ama/a11yChecker.kt

@@ -1,7 +1,9 @@
 package expo.modules.ama
 
 import android.graphics.Color
+import android.graphics.Rect
 import android.graphics.drawable.ColorDrawable
+import android.util.DisplayMetrics
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
@@ -13,7 +15,9 @@ import kotlin.math.pow
 data class A11yIssue(
         val type: RuleAction,
         val rule: Rule,
-        val message: String? = null,
+        val label: String? = null,
+        val reason: String? = null,
+        val bounds: List<Int>,
         val viewId: Int? = null,
 )
 
@@ -69,11 +73,14 @@ val LOGGER_RULES: Map<Rule, RuleAction> =
 class A11yChecker(private val appContext: AppContext, private val config: AMAConfig) {
     private val issues = Collections.synchronizedList(mutableListOf<A11yIssue>())
     private val highlighter = Highlight(appContext)
+    private lateinit var rootView: View
 
-    public fun performA11yChecks(rootView: View?): List<Map<String, Any?>> {
+    public fun performA11yChecks(rootView: View): List<Map<String, Any?>> {
         Logger.info("performA11yChecks", "Performing a11y checks")
 
-        rootView?.let { root ->
+        this.rootView = rootView
+
+        rootView.let { root ->
             traverseAndCheck(root)
 
             if (issues.isNotEmpty()) {
@@ -83,7 +90,10 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
                         issues.map { issue ->
                             mapOf(
                                     "type" to issue.type,
-                                    "message" to (issue.message ?: ""),
+                                    "rule" to issue.rule,
+                                    "label" to (issue.label ?: ""),
+                                    "reason" to (issue.reason ?: ""),
+                                    "bounds" to issue.bounds,
                                     "viewId" to issue.viewId
                             )
                         }
@@ -114,9 +124,7 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
         }
     }
 
-    private fun getRuleSeverity(rule: String) {}
-
-    private fun addIssue(rule: Rule, message: String, view: View) {
+    private fun addIssue(rule: Rule, label: String, reason: String, view: View) {
         val action = getRuleAction(rule)
 
         if (action == RuleAction.IGNORE) {
@@ -128,7 +136,16 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
         if (existingIssue == null) {
             view.id.let { id -> highlighter.highlight(id, config.highlight, action) }
 
-            issues.add(A11yIssue(type = action, rule = rule, message = message, viewId = view.id))
+            issues.add(
+                    A11yIssue(
+                            type = action,
+                            rule = rule,
+                            label = label,
+                            reason = reason,
+                            bounds = view.getGlobalDpBounds(this.rootView),
+                            viewId = view.id
+                    )
+            )
         }
     }
 
@@ -157,7 +174,8 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
 
             addIssue(
                     rule = Rule.NO_ACCESSIBILITY_LABEL,
-                    message = view.getTextOrContent() + " is missing the accessibility label.",
+                    label = view.getTextOrContent(),
+                    reason = "is missing the accessibility label.",
                     view = view
             )
         }
@@ -182,7 +200,8 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
 
             addIssue(
                     rule = Rule.NO_ACCESSIBILITY_ROLE,
-                    message = view.getTextOrContent() + " is missing the accessibility role.",
+                    label = view.getTextOrContent(),
+                    reason = "is missing the accessibility role.",
                     view = view
             )
         }
@@ -194,7 +213,8 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
 
             addIssue(
                     rule = Rule.MINIMUM_SIZE,
-                    message =
+                    label = view.toString(),
+                    reason =
                             "The touchable area must have a minimum size of 48x48, found ${view.width}x${view.height} instead",
                     view = view
             )
@@ -222,7 +242,8 @@ class A11yChecker(private val appContext: AppContext, private val config: AMACon
             if (contrastRatio < minContrast) {
                 addIssue(
                         rule = Rule.CONTRAST_FAILED,
-                        message =
+                        label = textView.toString(),
+                        reason =
                                 "Color contrast ratio ${String.format("%.2f", contrastRatio)} is below minimum ${minContrast} (WCAG AA)",
                         view = textView
                 )
@@ -323,3 +344,25 @@ fun View.getTextOrContent(): String {
 
     return a11yInfo.contentDescription?.toString().orEmpty()
 }
+
+private fun View.getGlobalDpBounds(rootView: View): List<Int> {
+    // 1) grab absolute screen bounds
+    val abs = Rect().also { createAccessibilityNodeInfo().getBoundsInScreen(it) }
+
+    // 2) find your root’s absolute origin
+    val origin = IntArray(2).also { rootView.getLocationOnScreen(it) }
+    val relLeftPx = abs.left - origin[0]
+    val relTopPx = abs.top - origin[1]
+    val widthPx = abs.width()
+    val heightPx = abs.height()
+
+    // 3) convert px → dp
+    val metrics: DisplayMetrics = resources.displayMetrics
+    val d = metrics.density
+    val leftDp = (relLeftPx / d).toInt()
+    val topDp = (relTopPx / d).toInt()
+    val widthDp = (widthPx / d).toInt()
+    val heightDp = (heightPx / d).toInt()
+
+    return listOf(leftDp, topDp, widthDp, heightDp)
+}

packages/core/android/src/debug/java/expo/modules/ama/highlight.kt

@@ -40,27 +40,62 @@ class Highlight(private val appContext: AppContext) {
         }
     }
 
+    private fun applyGridBackground(view: View, color: Int?) {
+        val stripeSize = 40
+        val bmp = Bitmap.createBitmap(stripeSize * 2, stripeSize * 2, Bitmap.Config.ARGB_8888)
+        val canvas = Canvas(bmp)
+        val paint =
+                Paint().apply {
+                    style = Paint.Style.FILL
+                }
+        canvas.drawRect(0f, 0f, stripeSize.toFloat(), stripeSize.toFloat(), paint)
+        canvas.drawRect(
+                stripeSize.toFloat(),
+                stripeSize.toFloat(),
+                stripeSize * 2f,
+                stripeSize * 2f,
+                paint
+        )
+
+        val shader = BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
+        val bgPaint = Paint().apply { this.shader = shader }
+        val drawable =
+                object : Drawable() {
+                    override fun draw(c: Canvas) = c.drawRect(bounds, bgPaint)
+                    override fun setAlpha(alpha: Int) {
+                        bgPaint.alpha = alpha
+                    }
+                    override fun setColorFilter(cf: ColorFilter?) {
+                        bgPaint.colorFilter = cf
+                    }
+                    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
+                }
+
+        view.background = drawable
+    }
+
     private fun applyStripyBackground(view: View, color: Int?) {
         val originalBackground = view.background
 
-        val stripeWidth = 25f // The width of a single black stripe
-        val gapWidth = 25f // The width of the transparent gap between stripes
-        val bmpSize = 150 // The size of the bitmap tile we'll create (e.g., 100x100 pixels)
+        val stripeWidth = 5f
+        val gapWidth = 25f
+        val bmpWidth = 150 
+        val bmpHeight = bmpWidth
 
-        val bmp = Bitmap.createBitmap(bmpSize, bmpSize * 2, Bitmap.Config.ARGB_8888)
+        val bmp = Bitmap.createBitmap(bmpWidth, bmpHeight, Bitmap.Config.ARGB_8888)
         val canvas = Canvas(bmp)
 
         val stripePaint =
                 Paint().apply {
                     this.color = color ?: Color.RED
-                    isAntiAlias = true // For smooth edges
+                    isAntiAlias = true 
                 }
 
-        val canvasCenter = bmpSize / 2f
+        val canvasCenter = bmpWidth / 2f
         canvas.save()
         canvas.rotate(-45f, canvasCenter, canvasCenter)
 
-        val extendedSize = (bmpSize * 1.5f)
+        val extendedSize = (bmpWidth * 1.5f)
         var y = -extendedSize
         while (y < extendedSize) {
             canvas.drawRect(-extendedSize, y, extendedSize, y + stripeWidth, stripePaint)
@@ -69,7 +104,7 @@ class Highlight(private val appContext: AppContext) {
 
         canvas.restore()
 
-        val shader = BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
+        val shader = BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT)
 
         val backgroundPaint = Paint().apply { this.shader = shader }
 
@@ -103,7 +138,7 @@ class Highlight(private val appContext: AppContext) {
     private fun applyRedBorderOverlay(view: View, color: Int?) {
         view.overlay.clear()
 
-        val stroke = 6f // px
+        val stroke = 6f 
         val half = (stroke / 2).toInt()
         val shape =
                 ShapeDrawable(RectShape()).apply {