Hi there, I'm working on migrating an existing app to Compose. We're using viewBinding to wrap our existing design components which works fairly well except in terms of accessibility. I've seen some documentation on using semantics, but not on how to use them properly with custom design elements. If anyone can point me to an article, example or other docs on this I would really appreciate it.

Hm. I don't have any idea what you're asking. Could you restate the question?

oh sure. For example I have this UI that is intended to be a card which includes badges, and text elements. Each of these elements are existing views that we're wrapping into composables via binding. For A11y I would expect to have Talkback say "Mobile Exclusive, Midsize SUV, Ford Escape or similar". I've tried adding

modifier.semantics(mergeAllDescendants = true)

to all the elements, but so far my trial and error approach has not worked and when I swipe on the screen nothing is read. This is my card composable:

@Composable
fun CarsOfferCard(
    carsOfferCardState: CarListingCard.CarsOfferCardState,
    modifier: Modifier = Modifier.Companion,
) {
    EGCard(
        modifier = modifier
    ) {
        Column(
            modifier = Modifier.fillMaxWidth(),
        ) {
            CarsBadges(
                carsOfferCardState.offerBadges,
                Modifier.testTag(carsOfferBadgesTestTag).padding(bottom = 6.dp),
            )
            CarsBadges(
                carsOfferCardState.priceBadges,
                Modifier.testTag(carsPriceBadgesTestTag).padding(bottom = 6.dp),
            )
            EGText(
                carsOfferCardState.categoryTypographyAttrs,
                Modifier.testTag(carsOfferCardCategoryTestTag)
            )
            EGText(
                carsOfferCardState.descriptionTypographyAttrs,
                Modifier.testTag(carsOfferCardDescriptionTestTag)
            )
        }
    }
}

Here is my text composable

@Composable
fun EGText(
    typographyViewModel: UDSTypographyAttrs,
    modifier: Modifier = Modifier.Companion,
) {
    ViewBinderAmbient.current.bind(
        bindingBlock = SharedUiEgTextBinding::inflate,
        modifier = modifier,
    ) {
        root.viewModel = UDSTypographyViewModel(typographyViewModel)
    }
}

Ooh. That looks cool, but unfortunately I don't have an answer. I think they have state that compose doesn't work well yet with a11y but I don't want to mislead you. Maybe you can ask in the channel again if compose works with a11y and maybe they can tell you yes or no yet. 😄

A11Y is definitely an area that Google has been working hard on, and I’m starting to see a lot of that coming together in alpha 10. I’ve poked around at accessibility in Compose a fair amount, but one thing I have not looked at is accessibility in the context of Views inside of a Composable like you are doing.

@Bryan Herbst it was actually your articles that gave the most information so far so thank you for those! I'll keep trying to see if I can crack the code, but it's sounding like support for this case just isn't there yet.

We don't officially comment on future plans, but I can say that both accessibility and documentation are important to us and I would expect to see Compose continue to improve as we approach our next major milestones.

I see, thanks for your response @jim! I look forward to future a11y updates to Compose.