A11y_30days_Welcome to 30 Days of Learning_Reflow: In Reflow resolution “Menu hamburger” button is not accessible by “Enter” & “Space” key

[Ashutoshsahoo164]

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

GitHub Tags:

#A11yTCS;#A11yMAS;#A11ySev3;#30days;#P3_30days_Dec22;#A11yWCAG2.1;#WCAG1.4.10;#DesktopWeb;#Win11;#ChromiumEdge

Environment Details:

Application Name: 30days
#URL: https://microsoft.github.io/30daysof/
Windows Version: Win11
Chromium Edge Version: 110.0.1556.0 (Official build) dev (64-bit)

Pre-Requisite:

To apply Reflow resolution, follow the below steps:

1. Open DevTools in new window by press F12.
2. Adjust the application browser window size to 320256 pixels using mouse (Change the browser zoom levels accordingly up to 200% to adjust the window pixels to 320256).
3. Refresh the page.

Repro Steps:

1. Hit the URL: https://microsoft.github.io/30daysof/
2. Home page will open then tab to "Menu Hamburger" button present in header section.
3. Observe in Reflow resolution “Menu Hamburger” button is not accessible by “Enter” & “Space” key

Actual:

In Reflow resolution “Menu Hamburger” button is not accessible by “Enter” & “Space” key.
Note – This issue is also observed in 200% resize

Expected:

In Reflow resolution “Menu Hamburger” button should be accessible by “Enter” & “Space” key.

User Impact:

Low vision user will face difficulty while accessing “Menu Hamburger” button.

Attachment:

209560677-1ca72026-c6bb-4719-96b4-1dde0ff81457.webm

[nitya]

@Ashutoshsahoo164 I tried this on a macOS machine with Microsoft Edge and the Space button worked (if held down, the menu slides over) but not Enter. Do both need to be active?

[Ashutoshsahoo164]

Hi @nitya Please try on Windows Machine . We need any one of them to be worked either "Enter" or "Space"

[Ashutoshsahoo164]

As the Site is now not be published , closing this bug.