titanium-sdk
titanium-sdk copied to clipboard
iOS: add accessibilityElements to Ti.UI.View to order VoiceOver labels
I have searched and made sure there are no existing issues for the issue I am filing
- [X] 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
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
).