[Accessibility][Name, Role, Value - Bot Responses]: Aria-hidden elements contain focusable elements.

[ShellySoni]

User Experience:
This issue should be resolved for good coding practice as Aria-hidden elements contain focusable elements.

Test Environment:
Environment: Chromium Edge (Anaheim) + Narrator
Build Version: 2004 (OS Build 19564.1005)​​
Microsoft Edge Version: 82.0.425.0 (Official build) canary (64-bit)​
Test URL: http://localhost:3000/home

Repro Steps:

1. Open URL: http://localhost:3000/home.
2. Run K4W tool on the page and observe the issue in Left navigation pane.

Actual Result:
ARIA hidden elements contains focusable elements. Screen reader does not announce the selected/non-selected state of all controls in left navigation as screen reader only read like: Bot responses button.

Expected Result:
Ensures ARIA hidden elements do not contains focusable elements. Screen reader should read the selected/non-selected state of all controls in left navigation like: Bot responses button selected.

MAS Reference:
https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={248054a6-5e68-4771-9e1e-242fb5025730}

Attachment:
MAS4.1.2_Left navigation.zip
MAS4.1.2_Bot Responses _K4W.zip
MAS4.1.2_Bot Responses_Left Navigation_K4W.zip
MAS4.1.2_Bot Responses_Left Navigation_Screen reader.zip

[corinagum]

Only last .zip contains a video file. The first three contain .pngs, pasted above.

[beyackle]

This one is interesting. The elements inside the links are still focusable, even though they shouldn't be (the SR seems to think there's a 2xN grid here instead of a column; going down the "left" cells reads them as links, and going down the "right" cells reads them as buttons). Trying to just aria-hide the Buttons isn't working, either.