Merge pull request #789 from microsoft/dhruvMishra/fluentNativeControlFixes

Dhruv-Mishra · web-flow · commit 49c55fd2c74c · 2025-06-28T17:53:20.000+05:30
[Fluent V2] Fixes for Fluent Native Controls
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2MenuActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2MenuActivity.kt
@@ -37,6 +37,7 @@ import com.microsoft.fluentui.tokenized.menu.Menu
 import com.microsoft.fluentuidemo.R
 import com.microsoft.fluentuidemo.V2DemoActivity
 
+val DefaultMenuInputWidthFraction = 0.35f
 
 class V2MenuActivity : V2DemoActivity() {
     init {
@@ -66,33 +67,37 @@ fun CreateMenuActivityUI(context: Context) {
     Column {
         Column {
             ListItem.Header(title = context.getString(R.string.menu_xOffset),
+                titleMaxLines = 2,
                 trailingAccessoryContent = {
                     BasicTextField(value = xOffsetState.value,
                         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                         onValueChange = { xOffsetState.value = it.trim() },
-                        modifier = Modifier.background(Color.White))
+                        modifier = Modifier.background(Color.White).fillMaxWidth(fraction = DefaultMenuInputWidthFraction))
                 }
             )
             ListItem.Header(title = context.getString(R.string.menu_yOffset),
+                titleMaxLines = 2,
                 trailingAccessoryContent = {
                     BasicTextField(value = yOffsetState.value,
                         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                         onValueChange = { yOffsetState.value = it.trim() },
-                        modifier = Modifier.background(Color.White))
+                        modifier = Modifier.background(Color.White).fillMaxWidth(fraction = DefaultMenuInputWidthFraction))
                 })
             ListItem.Header(title = context.getString(R.string.menu_content_text),
+                titleMaxLines = 2,
                 trailingAccessoryContent = {
                     BasicTextField(
                         value = contentTextState.value,
                         onValueChange = { contentTextState.value = it },
-                        modifier = Modifier.background(Color.White))
+                        modifier = Modifier.background(Color.White).fillMaxWidth(fraction = DefaultMenuInputWidthFraction))
                 })
             ListItem.Header(title = context.getString(R.string.menu_repeat_content_text),
+                titleMaxLines = 2,
                 trailingAccessoryContent = {
                     BasicTextField(value = repeatContentTextCountState.value,
                         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                         onValueChange = { repeatContentTextCountState.value = it.trim() },
-                        modifier = Modifier.background(Color.White))
+                        modifier = Modifier.background(Color.White).fillMaxWidth(fraction = DefaultMenuInputWidthFraction))
                 })
             ListItem.SectionDescription(description = context.getString(R.string.menu_description))
         }
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2ScaffoldActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2ScaffoldActivity.kt
@@ -160,6 +160,7 @@ class V2ScaffoldActivity : V2DemoActivity() {
         }
     }
 
+    @OptIn(ExperimentalLayoutApi::class)
     @Composable
     private fun GetContent(context: Context, snackbarState: SnackbarState? = null) {
         val size = remember { mutableStateOf(5) }
@@ -171,7 +172,7 @@ class V2ScaffoldActivity : V2DemoActivity() {
                 drawerState = drawerState,
                 drawerContent = { CreateList(size = 20, context = context) }
             )
-            Row(
+            FlowRow(
                 modifier = Modifier.padding(8.dp),
                 horizontalArrangement = Arrangement.spacedBy(8.dp)
             ) {
diff --git a/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/contentBuilder/ListContentBuilder.kt b/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/contentBuilder/ListContentBuilder.kt
@@ -11,6 +11,8 @@ import androidx.compose.ui.focus.onFocusEvent
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.microsoft.fluentui.theme.FluentTheme
@@ -100,7 +102,7 @@ class ListContentBuilder {
         header: String? = null,
         maxItemInRow: Int = 4,
         equidistant: Boolean = false,
-        tabItemTokens: TabItemTokens? = null
+        tabItemTokens: TabItemTokens? = TabItemTokens()
     ): ListContentBuilder {
         add(VerticalGridContentData(itemDataList, header, maxItemInRow, equidistant, tabItemTokens))
         return this
@@ -157,7 +159,7 @@ class ListContentBuilder {
         header: String?,
         maxItemsInRow: Int,
         equidistant: Boolean,
-        tabItemTokens: TabItemTokens? = null
+        tabItemTokens: TabItemTokens? = TabItemTokens()
     ): LazyListScope.() -> Unit {
         return {
             if (header != null) {
@@ -189,13 +191,16 @@ class ListContentBuilder {
                         else
                             1.0f / min(itemsInRow, (size - (row * itemsInRow)))
                         while (col < itemsInRow && (row * itemsInRow + col) < size) {
+                            val titleString = itemDataList[row * itemsInRow + col].title
                             TabItem(
-                                title = itemDataList[row * itemsInRow + col].title,
+                                title = titleString,
                                 enabled = itemDataList[row * itemsInRow + col].enabled,
                                 onClick = itemDataList[row * itemsInRow + col].onClick,
                                 accessory = itemDataList[row * itemsInRow + col].accessory,
                                 icon = itemDataList[row * itemsInRow + col].icon,
-                                modifier = Modifier.fillMaxWidth(widthRatio),
+                                modifier = Modifier.fillMaxWidth(widthRatio).semantics {
+                                    contentDescription = titleString
+                                },
                                 tabItemTokens = tabItemTokens
                             )
                             col++
@@ -233,7 +238,7 @@ class ListContentBuilder {
         itemDataList: List<ItemData>,
         header: String?,
         fixedWidth: Boolean = false,
-        tabItemTokens: TabItemTokens? = null
+        tabItemTokens: TabItemTokens? = TabItemTokens()
     ): LazyListScope.() -> Unit {
         return {
             if (header != null) {
@@ -277,6 +282,9 @@ class ListContentBuilder {
                                             )
                                         }
                                     }
+                                }
+                                .semantics {
+                                    contentDescription = item.title
                                 },
                             tabItemTokens = tabItemTokens
                         )
@@ -289,7 +297,7 @@ class ListContentBuilder {
     private fun createVerticalList(
         itemDataList: List<ItemData>,
         header: String?,
-        listItemTokens: ListItemTokens? = null
+        listItemTokens: ListItemTokens? = ListItemTokens()
     ): LazyListScope.() -> Unit {
         return {
             if (header != null) {

Original file line number	Diff line number	Diff line change
`@@ -160,6 +160,7 @@ class V2ScaffoldActivity : V2DemoActivity() {`
`160`	`160`	`}`
`161`	`161`	`}`
`162`	`162`
	`163`	`+ @OptIn(ExperimentalLayoutApi::class)`
`163`	`164`	`@Composable`
`164`	`165`	`private fun GetContent(context: Context, snackbarState: SnackbarState? = null) {`
`165`	`166`	`val size = remember { mutableStateOf(5) }`
`@@ -171,7 +172,7 @@ class V2ScaffoldActivity : V2DemoActivity() {`
`171`	`172`	`drawerState = drawerState,`
`172`	`173`	`drawerContent = { CreateList(size = 20, context = context) }`
`173`	`174`	`)`
`174`		`- Row(`
	`175`	`+ FlowRow(`
`175`	`176`	`modifier = Modifier.padding(8.dp),`
`176`	`177`	`horizontalArrangement = Arrangement.spacedBy(8.dp)`
`177`	`178`	`) {`