Update : Add LiveRegion and keyboard focus with jetpackcompe (#619)

* Update Vocalization : Add LiveRegion with jetpackcompe Update Keyboard navigation : Keyboard navigation with jetpackcompoe * Add files via upload --------- Co-authored-by: Pierre-Yves Ayoul <[email protected]>
Orange-OpenSource · Jan 9, 2025 · 1448f48 · 1448f48
1 parent 923d2bb
commit 1448f48
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/en/mobile/android/development/focus-navigation.md b/src/en/mobile/android/development/focus-navigation.md
@@ -46,6 +46,38 @@ Example of a selector including the `state_focused` :
 	&lt;item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/draw_selected_pressed_selector" /&gt;
 &lt;/selector&gt;</code></pre>
 
+<pre>
+<code class="kotlin">
+// Avec Jetpack Compose
+@Composable
+fun CustomDrawableSelector(
+    isFocused: Boolean,
+    isSelected: Boolean,
+    isPressed: Boolean
+) {
+    val drawableRes = when {
+        !isFocused && !isSelected && !isPressed -> R.drawable.draw_unselected_selector
+        !isFocused && isSelected && !isPressed -> R.drawable.draw_selected_selector
+        isFocused && !isSelected && !isPressed -> R.drawable.draw_unselected_focused_selector
+        isFocused && isSelected && !isPressed -> R.drawable.draw_selected_focused_selector
+        !isFocused && !isSelected && isPressed -> R.drawable.draw_unselected_pressed_selector
+        !isFocused && isSelected && isPressed -> R.drawable.draw_selected_pressed_selector
+        isFocused && !isSelected && isPressed -> R.drawable.draw_unselected_pressed_selector
+        isFocused && isSelected && isPressed -> R.drawable.draw_selected_pressed_selector
+        else -> R.drawable.draw_unselected_selector // Default fallback
+    }
+
+    Image(
+        painter = painterResource(id = drawableRes),
+        contentDescription = null,
+        modifier = Modifier
+            .size(48.dp) // Adjust size as needed
+    )
+}
+
+</code>
+</pre>
+
 Example of a focusable view with keyboard navigation
 <pre><code>&lt;View android:focusable="true"
               android:layout_width="0px"
@@ -57,7 +89,6 @@ Example of a view that is not focusable with keyboard navigation but focusable w
               android:layout_width="0px"
               android:layout_height="0px" /&gt;</code></pre>
 
-
 **<abbr>WCAG</abbr> reference:** 
 - <a lang="en" href="https://www.w3.org/TR/WCAG22/#keyboard">2.1.1 Keyboard</a>
 - <a lang="en" href="https://www.w3.org/TR/WCAG22/#name-role-value">4.1.2 Name, Role, Value</a>

diff --git a/src/en/mobile/android/development/vocal-navigation.md b/src/en/mobile/android/development/vocal-navigation.md
@@ -360,6 +360,20 @@ It is common to test the Android version before triggering TalkBack vocalization
    android:accessibilityLiveRegion="polite" /&gt;
 </code></pre>
 
+**Example with jetpackcompose**:
+
+<pre>
+<code class="kotlin">@Composable
+fun PoliteAccessibilityRegion() {
+Column {
+Text(
+text = "Contenu mis à jour pour l'accessibilité",
+modifier = Modifier.accessibilityLiveRegion(AccessibilityLiveRegion.Polite)
+)
+}
+}
+</code></pre>
+
 
 ## Do not vocalize the decorative and hidden elements.