Improve accessibility of checkbox.

+ Add missing Checkbox role which is only set if onClick is set.
+ Add state description to output the checked state via TalkBack.

Relates #453, #417, #318

Author: johnjohndoe

multiplatform-markdown-renderer-m2/src/commonMain/kotlin/com/mikepenz/markdown/m2/elements/MarkdownCheckBox.kt

@@ -2,6 +2,10 @@ package com.mikepenz.markdown.m2.elements
 
 import androidx.compose.material.Checkbox
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.semantics.Role.Companion.Checkbox
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.text.TextStyle
 import com.mikepenz.markdown.compose.elements.MarkdownCheckBox
 import org.intellij.markdown.ast.ASTNode
@@ -16,6 +20,13 @@ fun MarkdownCheckBox(
     node = node,
     style = style,
     checkedIndicator = { checked, modifier ->
-        Checkbox(checked = checked, onCheckedChange = null, modifier = modifier)
+        Checkbox(
+            checked = checked,
+            onCheckedChange = null,
+            modifier = modifier.semantics {
+                role = Checkbox
+                stateDescription = if (checked) "Checked" else "Unchecked"
+            },
+        )
     },
 )

multiplatform-markdown-renderer-m3/src/commonMain/kotlin/com/mikepenz/markdown/m3/elements/MarkdownCheckBox.kt

@@ -2,6 +2,10 @@ package com.mikepenz.markdown.m3.elements
 
 import androidx.compose.material3.Checkbox
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.semantics.Role.Companion.Checkbox
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.text.TextStyle
 import com.mikepenz.markdown.compose.elements.MarkdownCheckBox
 import org.intellij.markdown.ast.ASTNode
@@ -16,6 +20,13 @@ fun MarkdownCheckBox(
     node = node,
     style = style,
     checkedIndicator = { checked, modifier ->
-        Checkbox(checked = checked, onCheckedChange = null, modifier = modifier)
+        Checkbox(
+            checked = checked,
+            onCheckedChange = null,
+            modifier = modifier.semantics {
+                role = Checkbox
+                stateDescription = if (checked) "Checked" else "Unchecked"
+            },
+        )
     },
 )