Skip to content

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

@kupatkar99

Description

@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; #Closed;

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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions