Android: accessibility not working correctly when using data-binding

[felixkrautschuk]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.1.3
• Cross-platform modules: 8.1.3
• Android Runtime: 8.1.1
• iOS Runtime: -
• XCode Version: -
• Plugin(s): -

Describe the bug
When setting a value of a property in Observable asynchronously, Android's screenreader is not reading that value correctly.

This is my Observable:

export const vm = fromObject({
  testValue: null
});

The value is updated in navigatingTo event of the page after 50ms (no matter what time I set in the setTimeout call)

export function onPageNavigatingTo(args: NavigatedData) {
  const page = args.object as Page;
  page.bindingContext = vm;

  setTimeout(() => {
    vm.set("testValue", 1234);
  }, 50);
}

This is my layout:

<Page navigatingTo="onPageNavigatingTo">
    <ActionBar title="My App" />

    <StackLayout padding="20">
        <Label text="{{ testValue }}"/> <!--Talkback: "1234"-->
        <Label text="{{ 'My test value: ' + testValue }}"/> <!--Talkback: "null"-->
        <Label text="{{ testValue === 1234 ? 'correct' : 'not correct' }}"/> <!--Talkback: "not correct"-->
    </StackLayout>
</Page>

So for the first Label, Google Talkback is reading the value correctly.
But if I do some operation like appending a static string or a conditional expression, Google Talkback is reading the initial value "null" instead of the updated value.

Please note: It is working as expected on iOS using the latest NS dependencies and it was working with NS 7.3.0 on Android as well.

To Reproduce
Open the demo app provided below on Android and use Google Talkback to read the content on the screen.

Expected behavior
When updating a value in a viewmodel, the screenreader the updated value should be correctly readable by the screenreader, like it was working with NS 7.3.0.

Sample project
ns-accessibility-bug.zip

Additional context
none

[felixkrautschuk]

I made some further investigations:

When doing the same data-binding stuff inside thweitem-template of ListView or Repeater, everything works as expected!

However, when doing that in RadListView, the issue occurs the same way as described in the beginning of this thread:

...
<lv:RadListView.itemTemplate>
    <StackLayout padding="10">
        <Label text="{{ id }}"/> <!-- working -->
        <Label text="{{ 'This item has the id: ' + id }}"/> <!-- not working -->
        <Label text="{{ id < 2 ? 'The id of this item is less than 2' : 'The id of this item is greater or equal 2' }}"/> <!-- not working -->
    </StackLayout>
</lv:RadListView.itemTemplate>
...

So for the first line, the screen reader is reading the correct value of the id property for any item.
But for the second line, it always says: This item has the id undefined.
For the third line it always says: The id of this item is greater or equal 2, even if the id for an item has the value 1.

It makes no difference if all data items are existing in the ObservableArray from the beginning, or if they are loaded asynchronously.

When using @nativescript/core < 8.0.0 (so 7.3.0 is the latest working version), the screen reader reads the correct contents for all lines as well when using the latest nativescript-ui-listview (10.0.1).

Demo app with more use cases for reproducing this issue:
ns-accessibility-bug.zip

[CatchABus]

@felixkrautschuk In Nativescript Core, there used to be a way to solve expression binding issues.
Try writing your components like this:

<Page navigatingTo="onPageNavigatingTo">
    <ActionBar title="My App" />

    <StackLayout padding="20">
        <Label text="{{ testValue }}"/> <!--Talkback: "1234"-->
        <Label text="{{ testValue, 'My test value: ' + testValue }}"/> <!--Talkback: "null"-->
        <Label text="{{ testValue, testValue === 1234 ? 'correct' : 'not correct' }}"/> <!--Talkback: "not correct"-->
    </StackLayout>
</Page>

This way reactivity will be triggered because of value itself (which is set as the first binding) and will also reload expression.
A reference can be found here: https://v6.docs.nativescript.org/angular/core-concepts/data-binding.html#using-expressions-for-bindings
Let me know if this helped.

[felixkrautschuk]

@dimitrisrk thanks for your feedback. I tried that, but unfortunately this does not have any effect :(

[felixkrautschuk]

When commenting this line, the issue does not occur anymore:
https://github.com/NativeScript/NativeScript/blob/master/packages/core/accessibility/index.android.ts#L450

However, I have not yet figured out yet what exaclty is causing the issue in there.