At reflow resolution "Workshops" and "Collections" control are not accessible using keyboard keys.:A11y_AzureResponsibleAIworkshop_Header_Keyboard.

[PoojaNamde]

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

Please do not close this bug. This bug should only be closed by Trusted Tester after verification.

Tags:

#A11yTCS; #A11yMAS; #A11ySev2; #WCP; #Win11; #ChromiumEdge; #FTP; #DesktopWeb; #Azure Responsible AI workshop; #Feature_Azure Responsible AI workshop_Mar2024; #WCAG2.1.1; #Keyboard;

Environment Details:

Application Name: Azure Responsible AI workshop URL: https://azure.github.io/responsible-ai-hub Chromium Edge Version 124.0.2478.6 (Official build) dev (64-bit) Window Version: Win 11 OS Build: 22621.3085

Prerequisites:

1. Open the web page / screen of the web application that is to be tested
2. Open Chrome/Edge dev Inspect tools. Keyboard shortcut "Ctrl+Shift+I"
3. Ensure devtools are customized to Dock location: "undock into separate window". Minimize devtools so they are not obscuring the page.
4. Zoom the browser window of the page to be tested to 200%.
5. Adjust the browser window's height and width to the required viewport of 320px*256px. As long as devtools remain open while resizing the viewport size will be displayed in the upper right corner of the browser so the size can be verified.

Alternatively:

1. Change the OS display settings to a resolution of 1280x1024 at 100% dpi scaling.
2. Open the web page / screen of the web application that is to be tested.
3. Adjust the browser window’s zoom level to 400%.
4. Set the browser to full screen. Keyboard shortcut "F11" key.
5. If any browser sidebars are still visible (e.g., the Edge discover sidebar), these must be closed.

Repro Steps:

1. Hit the URL: (https://azure.github.io/responsible-ai-hub/)
2. Set the reflow resolution and navigate using TAB key.
3. Observe the issue.

Actual Results:

At reflow resolution "Workshops" and "Collections" control are not accessible using keyboard keys.

Expected Results:

At reflow resolution "Workshops" and "Collections" controls should be accessible using keyboard keys

User Impact:

Low vision users with keyboard will not be able to access the control and will miss the information about it.

Attachment:

51_A11y_AzureResponsibleAIworkshop_Header_Keyboard.webm