Merge pull request microsoft#747 from microsoft/dhruvMishra/tabBarTal…

…kbackFix [Accessibility] Tab Bar Talkback Fix
anthonysidesap · Dec 20, 2024 · 6248f5d · 6248f5d
2 parents 2d74249 + 465a928
commit 6248f5d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2TabBarActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2TabBarActivity.kt
@@ -8,6 +8,7 @@ import androidx.compose.material.icons.filled.*
 import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
@@ -63,7 +64,7 @@ class V2TabBarActivity : V2DemoActivity() {
 
         setActivityContent {
             val content = listOf(0, 1, 2)
-            var selectedOption by rememberSaveable { mutableStateOf(content[0]) }
+            var selectedOption by rememberSaveable { mutableIntStateOf(content[0]) }
             val tabItemsCount = _tabItemsCount.observeAsState(initial = 5)
             var showIndicator by rememberSaveable {
                 mutableStateOf(false)
@@ -205,7 +206,8 @@ class V2TabBarActivity : V2DemoActivity() {
                         selectedIndex = 0
                         showHomeBadge = false
                     },
-                    badge = { if (selectedIndex == 0 && showHomeBadge) Badge() }
+                    badge = { if (selectedIndex == 0 && showHomeBadge) Badge() },
+                    accessibilityDescription = resources.getString(R.string.tabBar_home) + ": " + if(selectedIndex == 0) {resources.getString(R.string.Active)} else {resources.getString(R.string.Inactive)}
                 ),
                 TabData(
                     title = resources.getString(R.string.tabBar_mail),
@@ -215,7 +217,8 @@ class V2TabBarActivity : V2DemoActivity() {
                         invokeToast(resources.getString(R.string.tabBar_mail), context)
                         selectedIndex = 1
                     },
-                    badge = { Badge(text = "123+", badgeType = BadgeType.Character) }
+                    badge = { Badge(text = "123+", badgeType = BadgeType.Character) },
+                    accessibilityDescription = resources.getString(R.string.tabBar_mail) + ": " + if(selectedIndex == 1) {resources.getString(R.string.Active)} else {resources.getString(R.string.Inactive)}
                 ),
                 TabData(
                     title = resources.getString(R.string.tabBar_settings),
@@ -224,7 +227,8 @@ class V2TabBarActivity : V2DemoActivity() {
                     onClick = {
                         invokeToast(resources.getString(R.string.tabBar_settings), context)
                         selectedIndex = 2
-                    }
+                    },
+                    accessibilityDescription = resources.getString(R.string.tabBar_settings) + ": " + if(selectedIndex == 2) {resources.getString(R.string.Active)} else {resources.getString(R.string.Inactive)}
                 ),
                 TabData(
                     title = resources.getString(R.string.tabBar_notification),
@@ -234,7 +238,8 @@ class V2TabBarActivity : V2DemoActivity() {
                         invokeToast(resources.getString(R.string.tabBar_notification), context)
                         selectedIndex = 3
                     },
-                    badge = { Badge(text = "10", badgeType = BadgeType.Character) }
+                    badge = { Badge(text = "10", badgeType = BadgeType.Character) },
+                    accessibilityDescription = resources.getString(R.string.tabBar_notification) + ": " + if(selectedIndex == 3) {resources.getString(R.string.Active)} else {resources.getString(R.string.Inactive)}
                 ),
                 TabData(
                     title = resources.getString(R.string.tabBar_more),
@@ -245,6 +250,7 @@ class V2TabBarActivity : V2DemoActivity() {
                         selectedIndex = 4
                     },
                     badge = { Badge() },
+                    accessibilityDescription = resources.getString(R.string.tabBar_more) + ": " + if(selectedIndex == 4) {resources.getString(R.string.Active)} else {resources.getString(R.string.Inactive)}
                 )
             )
 

diff --git a/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/tabItem/TabItem.kt b/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/tabItem/TabItem.kt
@@ -27,6 +27,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithCache
@@ -37,6 +38,8 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.invisibleToUser
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -53,6 +56,7 @@ import com.microsoft.fluentui.theme.token.controlTokens.TabItemInfo
 import com.microsoft.fluentui.theme.token.controlTokens.TabItemTokens
 import com.microsoft.fluentui.theme.token.controlTokens.TabTextAlignment
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun TabItem(
     title: String,
@@ -117,7 +121,11 @@ fun TabItem(
     val iconContent: @Composable () -> Unit = {
         Icon(
             imageVector = icon,
-            modifier = Modifier.size(if (textAlignment == TabTextAlignment.NO_TEXT) 28.dp else 24.dp)
+            modifier = Modifier
+                        .semantics {
+                            invisibleToUser()
+                        }
+                        .size(if (textAlignment == TabTextAlignment.NO_TEXT) 28.dp else 24.dp)
                         .graphicsLayer(alpha = 0.99f)
                         .drawWithCache {
                             onDrawWithContent {
@@ -156,6 +164,9 @@ fun TabItem(
             BasicText(
                 text = title,
                 modifier = Modifier
+                    .semantics {
+                        invisibleToUser()
+                    }
                     .constrainAs(textConstrain) {
                         start.linkTo(iconConstrain.end)
                         end.linkTo(badgeConstrain.start)
@@ -266,7 +277,10 @@ fun TabItem(
                     text = title,
                     style = textStyle,
                     maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.semantics {
+                        invisibleToUser()
+                    }
                 )
             }
             if(showIndicator){

diff --git a/fluentui_tablayout/src/main/java/com/microsoft/fluentui/tokenized/navigation/TabBar.kt b/fluentui_tablayout/src/main/java/com/microsoft/fluentui/tokenized/navigation/TabBar.kt
@@ -5,8 +5,9 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import com.microsoft.fluentui.theme.FluentTheme
 import com.microsoft.fluentui.theme.token.ControlTokens
 import com.microsoft.fluentui.theme.token.FluentStyle
@@ -15,15 +16,16 @@ import com.microsoft.fluentui.theme.token.controlTokens.TabBarTokens
 import com.microsoft.fluentui.theme.token.controlTokens.TabItemTokens
 import com.microsoft.fluentui.theme.token.controlTokens.TabTextAlignment
 import com.microsoft.fluentui.tokenized.tabItem.TabItem
-
+import com.microsoft.fluentui.tablayout.R
 
 data class TabData(
     var title: String,
     var icon: ImageVector,
     var selectedIcon: ImageVector = icon,
     var selected: Boolean = false,
     var onClick: () -> Unit,
-    var badge: @Composable (() -> Unit)? = null
+    var badge: @Composable (() -> Unit)? = null,
+    var accessibilityDescription: String? = null,  //Custom announcement for Talkback
 )
 
 /**
@@ -52,6 +54,7 @@ fun TabBar(
         FluentTheme.themeID    //Adding This only for recomposition in case of Token Updates. Unused otherwise.
     val token = tabBarTokens
         ?: FluentTheme.controlTokens.tokens[ControlTokens.ControlType.TabBarControlType] as TabBarTokens
+    val resources = LocalContext.current.resources
 
     Column(modifier.fillMaxWidth()) {
         Box(
@@ -65,9 +68,16 @@ fun TabBar(
         ) {
             tabDataList.forEachIndexed { index, tabData ->
                 tabData.selected = index == selectedIndex
+                var accessibilityDescriptionValue = if(tabData.accessibilityDescription != null) { tabData.accessibilityDescription }
+                                               else{ tabData.title + if(tabData.selected) resources.getString(R.string.tab_active).prependIndent(": ") else resources.getString(R.string.tab_inactive).prependIndent(": ") }
                 TabItem(
                     title = tabData.title,
                     modifier = Modifier
+                        .semantics {
+                            if (accessibilityDescriptionValue != null) {
+                                contentDescription = accessibilityDescriptionValue
+                            }
+                        }
                         .fillMaxWidth()
                         .weight(1F),
                     icon = if (tabData.selected) tabData.selectedIcon else tabData.icon,

diff --git a/fluentui_tablayout/src/main/res/values/strings.xml b/fluentui_tablayout/src/main/res/values/strings.xml
@@ -5,4 +5,10 @@
 
     <!-- Describes the Numbering of Pill Butons Inside PillBar -->
     <string name="position_string">Item %1$d in list of %2$d</string>
+
+    <!-- String specifying the Active status of a tab -->
+    <string name="tab_active">Active</string>
+
+    <!-- String specifying the Inactive status of a tab -->
+    <string name="tab_inactive">Inactive</string>
 </resources>