iOS: add accessibilityElements to Ti.UI.View to order VoiceOver labels

[m1ga]

I have searched and made sure there are no existing issues for the issue I am filing

• I have searched the existing issues

Description

Slack request for a11y improvements:

Currently the order of the VoiceOver can be in a different order on iOS.

Solution

use accessibilityElements with a list of views to specify the order.

Alternatives

Hyperloop example code

accessibilityView.textField.addEventListener('postlayout', applyAccessibilitySettings);
accessibilityView.icon.addEventListener('postlayout', applyAccessibilitySettings);
accessibilityView.button.addEventListener('postlayout', applyAccessibilitySettings);

function applyAccessibilitySettings(e){
        const UIView = require('UIKit/UIView');

        // Access the native views
        var nativeTextField = UIView.cast(accessibilityView.textField);
        var nativeIcon = UIView.cast(accessibilityView.icon);
        var nativeButton = UIView.cast(accessibilityView.button);

        if(nativeTextField && nativeIcon && nativeButton){
            var accessibilityElements = [nativeTextField, nativeIcon, nativeButton];

            var nativeSearchView = UIView.cast(accessibilityView.searchView);
            nativeSearchView.setAccessibilityElements(accessibilityElements);
        }
    }

Platforms

iOS

[empiresdev]

I tried to use the the view.toImage().nativeView as the documentation says but only got undefined as a result. So the only solution that worked was casting the Titanium UI element with UIView.cast call. The postlayout event also waits for the UI element to be rendered.

It would be great if we could simply define the accessibilityElements attribute of a Ti.UI.View as an array of UI elements as we already do with other accessibility attributes (for example, accessibilityLabel).