From 8fafcf97986272ebb5956171c31ee7e6f5017383 Mon Sep 17 00:00:00 2001
From: Paul Sowden <paulsowden@google.com>
Date: Tue, 11 Aug 2026 13:59:32 -0700
Subject: [PATCH] Add heading semantics to TopAppBar titles for accessibility

Apply heading semantics to title texts across TopAppBar snippet examples
(SmallTopAppBar, CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar,
navigation and multi-selection top bars).

Adding `Modifier.semantics { heading() }` to top app bar title texts
enables screen reader users (such as TalkBack) to recognize top app bar
titles as structural section headings and navigate through them quickly.
---
 .../compose/snippets/components/AppBar.kt     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt
index 72b4586a0..fab4e515a 100644
--- a/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt
+++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt
@@ -63,6 +63,8 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.semantics.heading
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -196,7 +198,10 @@ fun SmallTopAppBarExample() {
                     titleContentColor = MaterialTheme.colorScheme.primary,
                 ),
                 title = {
-                    Text("Small Top App Bar")
+                    Text(
+                        "Small Top App Bar",
+                        modifier = Modifier.semantics { heading() },
+                    )
                 }
             )
         },
@@ -226,7 +231,8 @@ fun CenterAlignedTopAppBarExample() {
                     Text(
                         "Centered Top App Bar",
                         maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.semantics { heading() },
                     )
                 },
                 navigationIcon = {
@@ -273,7 +279,8 @@ fun MediumTopAppBarExample() {
                     Text(
                         "Medium Top App Bar",
                         maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.semantics { heading() },
                     )
                 },
                 navigationIcon = {
@@ -320,7 +327,8 @@ fun LargeTopAppBarExample() {
                     Text(
                         "Large Top App Bar",
                         maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.semantics { heading() },
                     )
                 },
                 navigationIcon = {
@@ -360,6 +368,7 @@ fun TopBarNavigationExample(
                 title = {
                     Text(
                         "Navigation example",
+                        modifier = Modifier.semantics { heading() },
                     )
                 },
                 navigationIcon = {
@@ -413,7 +422,10 @@ fun AppBarSelectionActions(
 
     TopAppBar(
         title = {
-            Text(topBarText)
+            Text(
+                topBarText,
+                modifier = Modifier.semantics { heading() },
+            )
         },
         colors = TopAppBarDefaults.topAppBarColors(
             containerColor = MaterialTheme.colorScheme.primaryContainer,