ZupIT/beagle

[Android] Accessibility Custom Widget

Closed this issue · 4 comments

When adding isHeader accessibility to a Custom Widget, others of the same type also assume the parameter as true.

Description

When adding isHeader accessibility to a Custom Widget, others of the same type also assume the parameter as true.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create a custom text component
  2. Add more than one on screen
  3. Add accessibility only on first as header

Expected Results

TalkBack reads the first element as a header and the others do not.

Code example, screenshot, or link to a repository:

TextWidget(
        text = Bind.value("Title 1")
).setAccessibility { isHeader = true },
TextWidget(
        text = Bind.value("Text 1")
),
TextWidget(
        text = Bind.value("Text 2")
)

When I add accessibility only in one component, the others have null accessibility and I need to add a default value in override fun buildView so that talkback doesn't read the other elements as header.

if (accessibility == null) {
    accessibility = Accessibility()
}

👋 @tatianesilvazup
Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible and that you have followed our contributing guidelines.
We will review it as soon as possible.

Hi @tatianesilvazup can you provide more information about this issue, I've tried to reproduce the error, but the scenario occurred as you expected.
I have tested using the Text component of beagle, also tested with a custom component like below, and the result is as following.

It was read as title only the first text, Beagle only sets this information if the accessibility is present(not null, and null is the default value for accessibility on widgets), since the 2 last elements does not have this information, nothing is configured for them.

listOf(CustomTextAccessible("First text")
                .setAccessibility { isHeader = true }, // its reads the text, and sinalized as header by the talk back
                CustomTextAccessible("Second text"), // it reads only the text, no sinalizing as header
                CustomTextAccessible("Third text")// it reads only the text, not sinalizing as header
)

Maybe you can see how the Text widget of beagle is implemented and see if there is any difference between the component and your custom "TextWidget".
Or maybe something is being done on serialization/deserialization.
Can you investigate what comes from the json for the screen request?
https://github.com/ZupIT/beagle-android/blob/main/beagle/src/main/kotlin/br/com/zup/beagle/android/components/Text.kt

//Android

@RegisterWidget("customTextAccessible")
data class CustomTextAccessible(
    val text: Bind<String>,
) : WidgetView() {
    override fun buildView(rootView: RootView): TextView = TextView(rootView.getContext()).also {
        it.setTextColor(Color.BLACK)
        observeBindChanges(rootView, it, this@CustomTextAccessible.text) { newText ->
            it.text = newText
        }
    }
}

BFF


@RegisterWidget
class CustomTextAccessible(
    val text: Bind<String>,
) : Widget() {
    constructor(
        text: String,
    ) : this(
        text = constant(text)
    )
}

Hello @hernandazevedozup, I reviewed the issue and it's in the project's custom widget, not in the Beagle.
Thanks!

Closing for now, since the user that reported the issue located the problem outside the Beagle Library.