At reflow resolution "Hamburger" control is not visible clearly: A11y_ASP.NET_BlazorWebAssemblyStandalone_Home_Reflow

[PoojaNamde]

GitHub Tags:

#A11yMAS; #A11yTCS; #A11ySev2; #BM_ASP.NET_Web_Jun2024; #.NETCore; #WCAG1.4.10; #DesktopWeb; #Win11; #FTP; #Reflow; #ChromiumEdge; #A11yWCAG2.1;

Environment Details:

App name: ASP.NET
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. Download the "BlazorWebAssemblyStandalone" zip file.
2. Open command prompt and enter cd "<UNZIPPED_FOLDER_PATH>" command and hit ENTER key.
3. Enter "dotnet serve" command next and hit ENTER key.
4. TAB to "http://localhost:54293/" link and press CTRL + ENTER key.
5. Observe that at reflow resolution "Hamburger" control is not visible clearly.

Actual Result:

At reflow resolution "Hamburger" control is not visible clearly.

Expected Result:

At reflow resolution "Hamburger" control should be visible clearly.

User Impact:

Low vision users will not be able to see the controls clearly and will not get information about it.

Attachment

[Yash14j]

GithubTags:#Rev:yaja;

[javiercn]

The issue is in the NavMenu definition, as it defines a fixed height

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

The fix is to use min-height instead

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

[PoojaNamde]

@javiercn Could you please share latest "BlazorWebAssemblyStandalone" zip file to verify this issue.

[PoojaNamde]

@javiercn #Regressed:09-20-24;

Verified the bug in the environment http://localhost:5000/movies/create
Now we are able to see the hamburger clearly but it is not accessible using keyboard. hence reactivating it.
Please find repro attachment for reference.

56295_Repro.mp4