Merge pull request #10298 from MicrosoftDocs/main

pushing to live

Author: mduelae

powerapps-docs/maker/canvas-apps/accessibility-keyboard-navigation.md

@@ -5,7 +5,7 @@ author: hemantgaur
 
 ms.topic: article
 ms.custom: canvas
-ms.date: 09/06/2021
+ms.date: 07/12/2024
 ms.subservice: canvas-maker
 ms.author: hemantg
 search.audienceType:
@@ -24,7 +24,7 @@ contributors:
 > - This is an experimental feature, and will be deprecated soon. Instead of using this experimental feature, consider [structuring an app appropriately](accessible-apps-structure.md#logical-control-order) 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](controls/properties-accessibility.md#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.
+When you're nesting controls such as containers and component instances, the user input value for [TabIndex](controls/properties-accessibility.md#acceptsfocus-and-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.
 
@@ -36,13 +36,13 @@ When this feature is turned on, it also enables the following boolean properties
 | 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. <ul> <li> **On** (Default): Pressing the tab key on the keyboard will first progress through all child controls before moving the focus outside of the selected container or component instance. This option is recommended for similarly nested HTML elements. </li> <li> **Off**: Pressing the tab key on the keyboard will progress through all controls only based on Z-order, ignoring parent-child relationship between controls or containers for keyboard navigation. </li> </ul> **Note**: This property isn't applicable to [responsive or autolayout](create-responsive-layout.md) containers. |
-| **Enable child control focus** | Determines the value of [TabIndex](controls/properties-accessibility.md#tabindex) for child controls on canvas when pressing tab key on the keyboard. <ul> <li> **On** (Default): Pressing the tab key behaves as per TabIndex values defined on each control. </li> <li> **Off**: Pressing the tab key doesn't move focus to any child control within the selected container or component instance. Sets the TabIndex value to **-1** for all child controls. </li> </ul> |
+| **Enable child control focus** | Determines the value of [TabIndex](controls/properties-accessibility.md#acceptsfocus-and-tabindex) for child controls on canvas when pressing tab key on the keyboard. <ul> <li> **On** (Default): Pressing the tab key behaves as per TabIndex values defined on each control. </li> <li> **Off**: Pressing the tab key doesn't move focus to any child control within the selected container or component instance. Sets the TabIndex value to **-1** for all child controls. </li> </ul> |
 
 ## 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.
 
-1. Sign in to [Power Apps](https://make.poweraps.com).
+1. Sign in to [Power Apps](https://make.powerapps.com).
 
 1. Select **Apps** from the left-pane.
 
@@ -66,7 +66,7 @@ Now that you understand the new feature with improved canvas keyboard navigation
 
 ### 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](controls/properties-accessibility.md#tabindex) property. There are two nested containers, and component controls overlaid on top of each other.
+The following example shows multiple Text input controls, and several nesting scenarios. The number displayed in the input represents the value of the [TabIndex](controls/properties-accessibility.md#acceptsfocus-and-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.
 
@@ -80,7 +80,7 @@ In the following example, each container and component control has the **Priorit
 
 ### 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](controls/properties-accessibility.md#tabindex) property has been set for some inputs, indicated by the number shown in each input.
+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](controls/properties-accessibility.md#acceptsfocus-and-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.
 

powerapps-docs/maker/canvas-apps/accessible-apps-structure.md

@@ -5,7 +5,7 @@ author: tahoon-ms
 
 ms.topic: article
 ms.custom: canvas
-ms.date: 09/16/2022
+ms.date: 07/12/2024
 ms.subservice: canvas-maker
 ms.author: tahoon
 ms.reviewer: mkaur
@@ -90,18 +90,42 @@ In this example, a **Gallery** row has a thumbnail and two pieces of text on the
 
 ## Logical keyboard navigation order
 
-**[TabIndex](controls/properties-accessibility.md)** specifies how controls can be reached by keyboard users. **TabIndex** should either be 0 or -1. With a logical control order as described above, there's little reason to have **TabIndex** greater than 0.
+Keyboard navigation is an important aspect of any app. For many, the keyboard is more efficient than using touch or a mouse. The navigation order should:
+- Follow the visual flow of controls.
+- Follow either an intuitive across and then down "Z" order or a down and then across "reverse-N" order.
+- Only have a tab stop at controls that are interactive.
 
-Keyboard navigation order should follow visual flow of controls. If the navigation order is unexpected, you should first check if the app structure is logical.
+**[AcceptsFocus](controls/properties-accessibility.md)** specifies whether controls can be reached by keyboard. For classic controls, the equivalent property is **[TabIndex](controls/properties-accessibility.md)**.
+
+Navigation order follows [control order](#logical-control-order): from left-to-right, then top-to-bottom, in a "Z" pattern. You can customize it the same way as with control order. For example, controls in **[Containers](controls/control-container.md)**, **[Form Cards](controls/control-card.md)** and **[Galleries](controls/control-gallery.md)** are automatically grouped. The Tab key will navigate through all elements inside the container before proceeding to the next control outside of the container.
+
+If the navigation order is unexpected, you should first check if the app structure is logical.
 
 > [!NOTE]
-> Keyboard navigation order is not the same as control order. **TabIndex** only affects Tab key navigation. It does not change how screen reader users navigate an app linearly. Some screen reader users don't even use keyboards.
+> When controls are dynamically moved on the screen, for example, by having its **X** or **Y** value change according to a Power Fx expression, the navigation order will not be updated.
+
+
+### Workaround for custom tab sequence
+
+For rare scenarios where the keyboard navigation order should be different from visual order, you can position container controls carefully to have the same effect.
+
+In the example below, button A is above button B. The natural tab navigation order is A, then B.
+
+:::image type="content" source="media/accessible-apps-structure/simplified-tab-index-workaround-normal.png" alt-text="Two buttons with the same TabIndex, stacked vertically.":::
+
+To reverse the tab navigation order, put B in a Container control. Set the Y value of the Container to be above A. The app structure now has the Container (and B) before A. Hence, the tab navigation order is B, then A.
+
+:::image type="content" source="media/accessible-apps-structure/simplified-tab-index-workaround-container.png" alt-text="B is put in a container that appears before A.":::
+
+With this technique, screen reader users will also encounter B before A when navigating without the **Tab** key.
+
+### Custom tab indexes (retired feature)
 
-### Avoid custom tab indexes
+Custom tab indexes are those that are greater than zero. They are no longer supported. All **TabIndex** values greater than zero will be treated as zero.
 
-Custom tab indexes are those that are greater than zero. They're almost always a sign of bad design. There are better alternatives like creating an appropriate app structure or using **[SetFocus](/power-platform/power-fx/reference/function-setfocus)** to change focus.
+Custom tab indexes are almost always a sign of bad design. There are better alternatives like creating an appropriate app structure or using **[SetFocus](/power-platform/power-fx/reference/function-setfocus)** to change focus.
 
-Avoid using custom tab indexes because of the following reasons.
+Some problems with custom tab indexes:
 
 #### Accessibility
 It's a serious accessibility issue to have custom tab indexes. Screen reader users navigate an app using its logical structure. Custom tab indexes ignore that structure. Since screen reader users can also navigate using **Tab** key, they'll be confused when they get a different order from other methods of navigation.
@@ -120,31 +144,6 @@ Custom tab indexes only work with built-in controls. Controls that aren't integr
 
 In the other direction, when canvas apps are embedded in another web page, custom tab indexes don't work. For example, in [custom pages](../model-driven-apps/model-app-page-overview.md). Power Apps can't control the elements outside the canvas app, so the overall tab navigation order will be illogical.
 
-### Simplified tab index (preview)
-
-To ensure that tab indexes are either 0 or -1, enable the app feature **Simplified tab index** from **Settings** > **Upcoming features**.
-
-:::image type="content" source="media/accessible-apps-structure/simplified-tab-index-setting.png" alt-text="Enabling the Simplified tab index app feature.":::
-
-> [!IMPORTANT]
-> - This is a preview feature.
-> - [!INCLUDE[cc_preview_features_definition](../../includes/cc-preview-features-definition.md)]
-
-When this feature is enabled, all **TabIndex** values greater than zero will be treated as zero. This also disables Power Apps' tab index system so that it can integrate better with other components, as described above.
-
-### Workaround for custom tab sequence
-
-For rare scenarios where the keyboard navigation order should be different from visual order, you can position container controls carefully to have the same effect.
-
-In the example below, button A is above button B. The natural tab navigation order is A, then B.
-
-:::image type="content" source="media/accessible-apps-structure/simplified-tab-index-workaround-normal.png" alt-text="Two buttons with the same TabIndex, stacked vertically.":::
-
-To reverse the tab navigation order, put B in a Container control. Set the Y value of the Container to be above A. The app structure now has the Container (and B) before A. Hence, the tab navigation order is B, then A.
-
-:::image type="content" source="media/accessible-apps-structure/simplified-tab-index-workaround-container.png" alt-text="B is put in a container that appears before A.":::
-
-With this technique, screen reader users will also encounter B before A when navigating without the **Tab** key.
 
 ## Next steps
 

powerapps-docs/maker/canvas-apps/controls/modern-controls/modern-control-button.md

@@ -90,7 +90,7 @@ The button control now includes subset of Fluent icons. The following properties
 
 ## Additional properties
 
-**AcceptsFocus** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
+**[AcceptsFocus](../properties-accessibility.md)** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
 
 **[OnSelect](../properties-core.md)** – Actions to perform when the user selects a control.
 

powerapps-docs/maker/canvas-apps/controls/modern-controls/modern-control-info-button.md

@@ -70,7 +70,7 @@ Use **Info button** control to provide additional information to users.
 
 **DisplayMode** – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
 
-**AcceptsFocus** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
+**[AcceptsFocus](../properties-accessibility.md)** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
 
 **OnSelect** - Actions to perform when the user selects a control.  
 

powerapps-docs/maker/canvas-apps/controls/modern-controls/modern-control-link.md

@@ -76,7 +76,7 @@ Use **Link** control to provide links that can be defined with accessibility com
 
 ## Additional properties
 
-**AcceptsFocus** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
+**[AcceptsFocus](../properties-accessibility.md)** - Determines whether the control can receive focus when the user navigates through the app using the keyboard. 
 
 
 

powerapps-docs/maker/canvas-apps/controls/properties-accessibility.md

@@ -43,36 +43,23 @@ This lets screen reader users know whether a **Label** is a heading and allows t
 
 Use **Default** for normal text.
 
-### TabIndex
+### AcceptsFocus and TabIndex
 Determines if the control participates in keyboard navigation.
 
-Keyboard navigation is an important aspect of any app. For many, the keyboard is more efficient than using touch or a mouse. The navigation order should:
-- Mirror what is seen visually.
-- Only have a tab stop at controls that are interactive.
-- Follow either an intuitive across and then down "Z" order or a down and then across "reverse-N" order.
+You can use **AcceptsFocus** to configure keyboard navigation for [modern controls](./modern-controls/overview-modern-controls.md). [Classic controls](../reference-properties.md) use **TabIndex**.
 
-The **TabIndex** property has two recommended values:
+| AcceptsFocus | TabIndex | Behavior | Default for |
+|--------------|----------|----------|-------------|
+| true | 0 or greater | Control participates in keyboard navigation, unless it's hidden or disabled. | [**Button**](control-button.md), [**Text input**](control-text-input.md), [**Combo box**](control-combo-box.md), and other typically interactive controls. |
+| false | −1 or less than 0 | Control does not participate in keyboard navigation. | [**Label**](control-text-box.md), [**Image**](control-image.md), [**Icon**](control-shapes-icons.md), and other typically non-interactive controls. |
 
-| TabIndex value | Behavior | Default for |
-|----------------|----------|-------------|
-| 0 | Control participates in keyboard navigation. | [**Button**](control-button.md), [**Text input**](control-text-input.md), [**Combo box**](control-combo-box.md), and other typically interactive controls. |
-| −1 | Control does not participate in keyboard navigation. | [**Label**](control-text-box.md), [**Image**](control-image.md), [**Icon**](control-shapes-icons.md), and other typically non-interactive controls. |
-
-Any keyboard navigation sequence can be achieved with just these values, along with the use of the [**Container**](control-container.md) control. We recommend that you do not set **TabIndex** to other values.
-
-When **TabIndex** of all controls are set to either -1 or 0, navigation order goes from left-to-right, then top-to-bottom, in a "Z" pattern. The order is based on the **X** and **Y** property values of the controls. If controls are dynamically moved on the screen, for example, by having its **X** or **Y** value change according to a timer or other control, the navigation order will change dynamically too.
-
-Use the [**Container**](control-container.md) control to bundle controls that should be navigated together or to create columns in a "reverse-N" pattern. Controls in **[Form Cards](control-card.md)** and [**Galleries**](control-gallery.md) are automatically grouped. Tabbing through these containers will navigate through all elements inside the container before proceeding to the next control outside of the container.  
+Any keyboard navigation sequence can be achieved with just these properties, along with the use of the [**Container**](control-container.md) control. For **TabIndex**, we recommend using either 0 or -1 for simplicity.
 
 Controls that have a **Visible** property value of *false* or a **DisplayMode** property value of **Disabled** are not included in keyboard navigation.
 
 > [!IMPORTANT]
-> **TabIndex** only affects keyboard navigation. A [logical control order](../accessible-apps-structure.md) is still necessary for screen reader users to understand app structure.
+> **TabIndex** only affects keyboard navigation. A [logical control order](../accessible-apps-structure.md) is still necessary for screen reader users to understand app structure. Some screen reader users don't even use keyboards.
 
-> [!WARNING]
-> - **TabIndex** values greater than zero will not be supported soon. They will be treated as if they were zero. Enable the **Simplified tab index** app setting to preview this behavior.
-> - In the meantime, setting **TabIndex** to be greater than zero is one of the ways to customize keyboard navigation. This is for rare scenarios where you may not want to follow visual order or logical structure. Use caution since it can be difficult to get the order correct and accurate. It also results in a confusing screen reader experience.
-> - When there are controls with **TabIndex** greater than 0, users will first navigate to controls with increasing positive **TabIndex** values (such as, 1, then 2). When users have navigated all controls with positive **TabIndex** values, they will finally navigate to controls with **TabIndex** of 0. When there are multiple controls with the same **TabIndex**, their **X** and **Y** value and the **Containers** they are in will determine their relative order. Inside a **Gallery** or **Form**, **TabIndex** is scoped so that the contained controls will be navigated first before the ones outside.
 
 ### See also
 

powerapps-docs/maker/canvas-apps/create-blank-app.md

@@ -28,7 +28,8 @@ Watch this short video that shows you how to create a blank canvas app.
 
 ## Prerequisites
 
-To follow this quickstart, you must be assigned to the [Environment Maker](/power-platform/admin/database-security#predefined-security-roles) security role.
+In order to proceed with this quickstart, you need to be assigned the [Environment Maker](/power-platform/admin/database-security#predefined-security-roles) security role, either directly or through a Dataverse team that belongs to the **AAD Security Group** category.
+
 
 ## Create a blank canvas app