Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
[This article is pre-release documentation and is subject to change.]
Important
- This is an experimental feature, and will be deprecated soon. Instead of using this experimental feature, consider structuring an app appropriately to achieve the desired tab navigation order.
- Experimental features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
When you're nesting controls such as containers and component instances, the user input value for TabIndex isn't respected sometimes. Improved canvas keyboard navigation experimental setting improves the navigation experience in this situation when Tab key is pressed on the keyboard helping focus on the desired container or control precisely and predictably.
This feature also adds support for handling accessibility for keyboard tabs inline with rest of the controls in canvas apps. And addresses manual TabIndex assignments for all controls.
Note
This feature is added as "Experimental" to maintain backward compatibility and maintain existing app functionality.
When this feature is turned on, it also enables the following boolean properties for all child controls for the selected container or component instance in canvas apps:
| Property Name | Description |
|---|---|
| Prioritize child controls | Determines the order of navigation (Z-order) for child controls on canvas when pressing tab key on the keyboard.
|
| Enable child control focus | Determines the value of TabIndex for child controls on canvas when pressing tab key on the keyboard.
|
Configure improved canvas keyboard navigation in your app
If not already enabled, follow these steps to enable this feature in your app, and set the properties mentioned earlier.
Sign in to Power Apps.
Select Apps from the left-pane.
Select your app, and then select Edit.
In Power Apps Studio, select Settings > Upcoming features > Experimental.
Select Improved canvas keyboard navigation to turn on the feature.
Close settings.
Now that you've enabled the experimental feature, you'll see two new properties for controls and containers—Prioritize child controls, and Enable child control focus. Change the property values as appropriate.
Examples
Now that you understand the new feature with improved canvas keyboard navigation, let's take a look at a few examples to understand the behavior when the tab key is pressed.
Default improved canvas keyboard navigation behavior
The following example shows multiple Text input controls, and several nesting scenarios. The number displayed in the input represents the value of the TabIndex property. There are two nested containers, and component controls overlaid on top of each other.
The default order is determined by the relative position of the controls. When focus enters a container or a component, tabs first traverse the children of the container before moving on to the next available control.
When Prioritize child controls is set to Off
In the following example, each container and component control has the Prioritize child controls property set to "Off". All inputs are therefore considered to be on the same level of nesting, so the order is determined purely by their X/Y position relative to the screen.
Advanced configuration with mixed settings
In the following example, the orange outlined containers have Prioritize child controls property set to "Off". All others controls have this property set to "On". Also, a custom TabIndex property has been set for some inputs, indicated by the number shown in each input.
Tab order first proceeds through the containers and controls with TabIndex value of greater than 0, and then proceeds through all others with value of 0. This behavior was also the in the earlier implementation.
