(One#26752818) [Insert new step]: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies.

[ek68794998]

Describe the issue

User Experience:

Visually impaired users who depend on assistive technology as screen readers will face difficulty while navigating on nested interactive controls or can cause focus problems due to which user will not be able to perform tasks properly.

Pre-requisites:

1. First we need to create a flow to test this feature, a person can create their own flow

Repro Steps:

1. Open URL "https://make.powerautomate.com/" and sign in with Valid credentials.
2. Flow Homepage will appear on the screen, navigate to 'My Flows' from the left pane and select it.
3. My Flows Page will appear on the screen which consist a list of already created flows.
4. Navigate to one of the flows on the list and click the icon for "Edit." You are now in the flow designer.

Actual Result:

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies.

Observation: Screen reader is remaining silent when focus moved to Insert a new step control in the flow design when navigated through tab control

Expected Result:

Nested interactive control "tab control" should be defined properly i.e. "Tab control" must not have any focusable descendants.

Issue:

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (nested-interactive - https://dequeuniversity.com/rules/axe/4.7/nested-interactive?application=msftAI)

Target application:

Microsoft Power Automate - https://make.preview.powerautomate.com/environments/839eace6-59ab-4243-97ec-a5b8fcc104e4/flows/3b6866d6-01d0-4505-a5c3-7d51330eaf7b?v3=true

Element path:

.edge-drop-zone-container > .msla-drop-zone-viewmanager2 > div[data-tabster="{\"restorer\":{\"type\":1}}"][role="button"]

Snippet:

<div tabindex="-1" role="button"
data-tabster="{&quot;restorer&quot;:{&quot;type&quot;:1}}"
aria-expanded="false">

Related paths:

#msla-edge-button-send_a_push_notification-undefined

How to fix:

Fix any of the following:

• Element has focusable descendants

Environment: Microsoft Edge version 121.0.0.0

\====

This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

MAS Reference:

MAS 4.1.2 -- Name, Role, Value

ARIA Authoring Ref Link/Fluent Patterns Guidance /HITS Guidance:

https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

UIA/DOM details available:

Yes

Reference Links:

Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.

Are you using new designer or old designer

New Designer (With action panels)

Screenshots or Videos

Browser

• OS Version: Windows 11 Version 23H2 (OS Build 22631.3007)
• Browser: Edge Version 120.0.2210.144 (Official build) (64-bit)
• #URL:https://make.powerautomate.com/
• Screen Reader: Narrator

Additional context

One#26752818

[edgarguoms]

FYI, the ADO is tagged as A11ySev3.