Using On-Screen Navigation - Amazon Vega Docs

Vega provides on-screen voice navigation through the UIController API. To access the API, you can set the ariaPosInSet, aria-label, keplerAltLabels, alexaEntityType, and alexaExternalID props on the Button, Pressable, Text, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, and View components. The ariaPosInSet and aria-label props implement Accessible Rich Internet Applications (ARIA) features:

ariaPosInSet - Short for “position in set.” Defines an element’s number or position in the current set of list items or tree items.
aria-label - A string value that specifies a voice selectable name for an interactive component.

For apps that currently use ariaLabel to provide a voice selectable name, backward compatibility is provided. However, it’s preferrable to migrate your app to aria-label. In addition to the aria-label, Vega supports alternate labels on a component:

keplerAltLabels - A list of additional voice selectable names for the component.

The following property defines an Alexa specific property:

alexaEntityType - Specifies the Alexa entity type. For additional information, see Enum<EntityTypes> in Alexa.UIController Interface (VSK Fire TV).

To enable on-screen navigation in the app, you must declare the kva-category in the manifest.toml. In the components section, add the following declaration:

categories = ["com.amazon.category.kva"]

For additional information about the manifest.toml file, see Vega App Manifest File. When sideloading an app that uses voice features, including the UIController API, you must reboot your device to enable to the features. The following code example shows how to render a button like component with on-screen navigation enabled.

<TouchableOpacity
    testID={"touchable opacity testid"}
    aria-label={'The Marvelous Iron Man'}
    ariaPosInSet={1}
    alexaEntityType={'VideoObject'}
    keplerAltLabels={["Iron Man", "Marvelous Iron Man"]}
>
    <View>
        <Text
            testID='vn_touchable_opacity_text'
            style={styles.buttonText}>
                {"1. " + "The Marvelous Iron Man"}
        </Text>
    </View>
</TouchableOpacity>

Focus Management

​Related topics

Related topics