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
You don't need the Modifier.clickable
in this scenario because:
onClick
lambda 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,
),
)
}
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
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.