Add semantics to custom side panel elements (#1782)

JetBrains · Feb 3, 2022 · 6a9be4a · 6a9be4a
1 parent becd9e6
commit 6a9be4a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/...ts-gallery/common/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/MainView.kt b/...ts-gallery/common/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/MainView.kt
@@ -17,6 +17,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.SemanticsProperties
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
@@ -123,6 +126,9 @@ private fun WidgetsListItemViewImpl(
         modifier = Modifier
             .wrapContentHeight()
             .clickable { widgetsTypeState.value = widgetsType }
+            .semantics {
+                set(SemanticsProperties.Role, Role.Button)
+            }
             .height(height)
             .padding(start = 16.dp)
     ) {

diff --git a/...ommon/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/utils/ResizablePanel.kt b/...ommon/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/utils/ResizablePanel.kt
@@ -18,13 +18,17 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.SemanticsProperties
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
 class PanelState {
-    val collapsedSize = 24.dp
+    val collapsedSize = 40.dp
     var expandedSize by mutableStateOf(110.dp)
-    val expandedSizeMin = 90.dp
+    val expandedSizeMin = 120.dp
     var isExpanded by mutableStateOf(true)
     val splitter = SplitterState()
 }
@@ -46,22 +50,27 @@ fun ResizablePanel(
             Row(Modifier
                 .height(32.dp)
                 .padding(6.dp)
+                .semantics(mergeDescendants = false) {
+                    val text = if (state.isExpanded) "Collapse" else "Expand"
+                    set(SemanticsProperties.Text, listOf(
+                        AnnotatedString("$text $title panel")
+                    ))
+                    set(SemanticsProperties.Role, Role.Button)
+                }
                 .clickable { state.isExpanded = !state.isExpanded }
             ) {
-                Text(
-                    text = if (state.isExpanded) title else "",
-                    modifier = Modifier.fillMaxWidth().clipToBounds(),
-                    fontSize = 14.sp
-                )
-
                 Icon(
                     if (state.isExpanded) Icons.Default.ArrowBack else Icons.Default.ArrowForward,
                     contentDescription = if (state.isExpanded) "Collapse" else "Expand",
                     tint = LocalContentColor.current,
                     modifier = Modifier
                         .size(24.dp)
-                        .padding(end = 8.dp)
-                        .padding(bottom = 4.dp)
+                        .padding(start = 2.dp, end = 2.dp, bottom = 2.dp)
+                )
+                Text(
+                    text = if (state.isExpanded) title else "",
+                    modifier = Modifier.fillMaxWidth().clipToBounds(),
+                    fontSize = 14.sp
                 )
             }