{Linked:Bug3397351}[Adaptive Cards > Designer] On pressing tab key Focus moves out of the data binding list item and it remains expanded.

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/designer/
OS Version: 23H2 (OS Build 26040.1000)
Browser Version: Version 122.0.2365.3 (Official build) dev (64-bit)

Repro Steps:

1. Open the above URL on Edge Dev URL.
2. Press tab key and navigate to the 'New Card' and press enter key to activate it.
3. New Card dialog will be appeared.
4. Navigate to the 'Blank Card' using tab key and press enter key to activate it.
5. Navigate to 'Element Property' page and press enter key to activate it.
6. Press tab key and navigate to the 'Data Bind' button and press enter key and activate it.
7. Press down arrow key and navigate the Data Context list item.
8. Press tab key and observe the issue.

Actual Result:
While navigating the data context list items, on pressing tab key keyboard focus is landing on top of the page and list item is getting expanded.

Observation:
While navigating using 'Shift+tab' key, keyboard focus is retain on the same control i.e.' Data Binding'.

Expected Result:
While navigating the list item on pressing tab key, keyboard focus should land on the next interactive element and list item should be collapsed.

User Experience:
If the focus will move out of the menu item, then the users dependent on the keyboard and screen reader need to press multiple times tab to reach on it again and will be unable to access the UI properly and may face trouble.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/focus-order

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Screenshots

https://github.com/microsoft/AdaptiveCards/assets/95913748/17833f08-7d12-457d-a4e9-4d44f80d566d

Card JSON

NA

Sample Code Language

No response

Sample Code

No response

Start at https://adaptivecards.io/designer/ and reproduce the keyboard sequence through the Data Bind button and Data Context list item in the reported Edge Dev environment. Trace the designer's focus and expansion behavior for that list item; done means Tab moves to the next interactive element and the item collapses, while Shift+Tab retains the expected focus behavior.