A11y_Playwright.dev_Usability: Using up and down arrow keys we are not able navigate list items present in the "Node js" button.

[Raghu-addepalli]

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

GitHub Tags:

#A11yUsable;#A11yTCS;#Playwright releases;#P1_Playwright.dev_Web_Jan2024;#A11ySev4;#ChromiumEdge;#DesktopWeb;#FTP;#Win11#P1_WCP

Environmental Details:

App Name: Playwright.dev
#URL: https://playwright.dev/docs/input

OS & Browser Details:

Microsoft Windows 11 Enterprise
Version 22621.3007
Microsoft Edge
Version 120.0.2210.144 (Official build) (64-bit)

Repro Steps:

1. Hit the URL: https://playwright.dev/docs/input
2. TAB to "Node js" button and press Enter to Expand.
3. Now check that we are able navigate the list items by using up and down arrow keys or not.

Actual result:

Using up and down arrow keys, we are not able navigate list items present in the "Node js" button.

Note: Similar issue is also observed in below links.

https://playwright.dev/docs/test-assertions
https://playwright.dev/docs/running-tests
https://playwright.dev/docs/locators
https://playwright.dev/docs/api/class-locator
https://playwright.dev/docs/writing-tests
https://playwright.dev/docs/api/class-playwright
https://playwright.dev/docs/intro
https://playwright.dev/docs/api/class-page

Expected result:

Using up and down arrow keys, we should be able navigate list items present in the "Node js" button.

User Impact:

Key board users will face difficulty if we are not able navigate list items present in the "Node js" button using arrow keys.

Attachments:

1.mp4