Jetpack 为 Button 和 IconButton 组合 onClickLabel

Question

Working on accessibility enhancements for my app.

From Docs , I can see that Card has both onClick and onClickLabel as part of the API.

And for composables without onClick , we can use Modifier.clickable or Modifier.semantics .

But what about Button , IconButton , FloatingActionButton , TextButton and OutlinedButton ?
Composables which have onClick as part of API but no onClickLabel .

This works as expected. But is this the correct way to write this code?

IconButton(
    onClick = navigateUp,
    modifier = Modifier.clickable(
        onClickLabel = "Navigate up",
        onClick = {},
    )
) {
    Icon(
        imageVector = Icons.Rounded.ArrowBack,
        contentDescription = stringResource(
            id = R.string.top_app_bar_content_description_navigate_up,
        ),
    )
}

This seems too confusing as IconButton expects onClick . So I cannot go with completely Modifier.clickable or Modifier.semantics .
Similarly Modifier.clickable also expects onClick .

So, I have two onClick for a single composable component which could easily cause a lot of hard to debug bugs.

Reason for the change,
To read "Double tap to Navigate up" instead of the default "Double tap to activate".

PS:
Compose version - 1.0.4

Answer 1

You don't need the Modifier.clickable in this scenario because:

• the IconButton already handles clicks via its onClick lambda
• the Icon has a contentDescription field for accessibility

So all you need is this

IconButton(
    onClick = navigateUp,
) {
    Icon(
        imageVector = Icons.Rounded.ArrowBack,
        contentDescription = stringResource(
            id = R.string.top_app_bar_content_description_navigate_up,
        ),
   )
}

Answer 2

It doesn't seem to be the prettiest solution but I ended up doing:

      IconButton(
        modifier = Modifier.size(40.dp).clearAndSetSemantics {
            this.onClick(label = closeLabelDescription, action = null)
            this.contentDescription = closeDescription
            this.role = Role.Button
        },
        onClick = onClickClose,
    ) {
        Icon(
            painter = painterResource(R.drawable.ic_close),
            tint = RiotWhite,
            contentDescription = null
        )
    }