On applying reflow resolution "Node.js" button is not accessible with keyboard "TAB" or "Arrow" keys.: A11y_Playwright OSS releases_Reflow

[kupatkar99]

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

GitHub Tags:

#A11yMAS;#A11yTCS;#Playwright OSS Releases;#BM_PlaywrightOSSReleases_Web_Dec2024;#A11ySev2;#Chrome;#DesktopWeb;#FTP;#Win11;#WCAG1.4.10;#Reflow;#A11yWCAG2.1;#Rev:Yaja;

Environmental Details:

App Name: Playwright OSS releases
#URL: https://playwright.dev/

OS & Browser Details:

Microsoft Windows 11 Enterprise
Version 26100.2605
Microsoft Edge
Version 131.0.2903.99 (Official build) (64-bit)

Pre- Requisites to apply reflow:

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. Zoom browser 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://playwright.dev/
2. Playwright page will get open.
3. Observe that on applying reflow resolution "Node.js" button is accessible with keyboard or not.

Actual:

On applying reflow resolution "Node.js" button is not accessible with keyboard "TAB" or "Arrow" keys.

Expected Result:

On applying reflow resolution "Node.js" button should be accessible with keyboard "TAB" or "Arrow" keys.

User Impact:

Users who zooms the page for there better visibility will face difficulty and not be able to access the control if it is not accessible with keyboard.

Attachments:

A11y_Playwright.OSS.releases_Reflow.mp4