:thread: Accessibility issues with Compose iOS

# compose-ios

[faogustavo]

🧵 Accessibility issues with Compose iOS

[faogustavo]

We are experimenting with Compose MP as solution to share UI between Android and iOS, but we are seeing some weird cases with accessibility.

TL;DR; When using Compose in the UIKit, the accessibility nodes always render outside the element (a few pixels below). Here is a print screen from Maestro Studio and XCode Accessibility Inspector showing the issue (I also tested different iOS versions).

[faogustavo]

image.png,image.png

[faogustavo]

I was able to trace it back to the safe area/window insets. I tested it with SwiftUI, and the .ignoresSafeArea(.all) does the trick. However, the project still uses UIKit, and we are using the UINavigationController to present the VC returned from compose.

[faogustavo]

Here are a few snippets to help understand the issue:

[faogustavo]

Kotlin Code:

// VC Declaration
fun ComposeTestViewController(
    onBackPress: () -> Unit,
) = ComposeUIViewController(
    configure = {
        accessibilitySyncOptions = AccessibilitySyncOptions.Always(debugLogger = null)
    },
) {
   ComposeTestScreen(onBackPress)
}

// Composable Declaration
@Composable
fun ComposeTestScreen(onBackPress: () -> Unit) {
    MaterialTheme {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Compose Test") },
                    navigationIcon = {
                        IconButton(
                            modifier = Modifier.testTag("TopAppBar/BackButton"),
                            onClick = onBackPress,
                        ) {
                            Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
                        }
                    },
                    modifier = Modifier.fillMaxWidth(),
                )
            },
        ) { paddings ->
            Column(
                modifier = Modifier.fillMaxWidth()
                    .padding(paddings)
                    .padding(horizontal = 16.dp)
                    .verticalScroll(rememberScrollState()),
            ) {
                InputFieldTest()
            }
        }
    }
}

[faogustavo]

Swift Code:

// Create instance
let flowNavigationController = UINavigationController()

// Initiate and present
let displayedViewController = // Logic to get initial VC, usually a VC using UIKit

flowNavigationController.viewControllers = [displayedViewController]
rootViewController = presentingViewController

presentingViewController.present(
      flowNavigationController,
      animated: true
)

// Show Compose VC on a click or something like that
let viewController = ComposeTestViewController(
      onBackPress: { [weak self] in self?.popBack() }
)
flowNavigationController.isNavigationBarHidden = true
flowNavigationController.pushViewController(
       viewController,
       animated: true
)

[Elijah Semyonov]

Hey! It should be fixed by:
https://github.com/JetBrains/compose-multiplatform-core/pull/1165

[faogustavo]

Do you know if it was already released? I'm using the 1.6.1 plugin.

[Elijah Semyonov]

Afaik, should be in a next version release

[faogustavo]

Thank you

[faogustavo]

It's working fine on the latest dev build. Thanks pepefireworks

[DavidB]

Thanks, waiting for this to be identified and fixed. Hit box is correctly aligned now, however I’m having issues with selecting from a drop-down box (using accessibility in xctest on instrumented tests), the first element does not seem to be selectable, index 0, rest of the items are available.

[Elijah Semyonov]

Hey, can you post an issue with a repro to our GitHub issue tracker?

[DavidB]

Created issue, https://github.com/JetBrains/compose-multiplatform/issues/4586

[Elijah Semyonov]

I’ll have a look, thank you

[Lucca Beurmann]

Having this same issue on compose multiplatform 1.6.2 is there a way to properly fix this issue?

[Lucca Beurmann]

Investigating a little further this only happens when the app is resumed after a OAuth2 is concluded

[Lucca Beurmann]

@Elijah Semyonov is accessibility on IOS stable already?

[Elijah Semyonov]

Stable in what way?

[Elijah Semyonov]

It’s not feature complete and there are some possible improvements, but generally yes, it should be in usable state

[Lucca Beurmann]

Okay, thanks

[Elijah Semyonov]

If there are some issues you experience, please report them on GitHub 🙂

[Lucca Beurmann]

Cool, I will try to reproduce this bug and file an issue