Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with using v14 for keyboard behaviour to replicate pressing tab in the browser #1018

Closed
kksy opened this issue Aug 3, 2022 · 9 comments
Labels
bug Something isn't working

Comments

@kksy
Copy link

kksy commented Aug 3, 2022

Reproduction example

https://codesandbox.io/s/ecstatic-rubin-yygg77?file=/src/App.spec.js

Prerequisites

  1. Go to the codesandbox link and press the "Test" tab

Expected behavior

Button element should have focus. This works when using version 13.5.0 userEvent.tab()

Actual behavior

Button does not have focus or is not the active element in the page

User-event version

14.4.1

Environment

Testing Library framework: @testing-library/[email protected]

JS framework: [email protected]

Test environment: jest sandbox version

DOM implementation: jsdom sandbox version

Additional context

I believe that this missing feature prevents us from testing keyboard accessibility in an easy way

@kksy kksy added bug Something isn't working needs assessment This needs to be looked at by a team member labels Aug 3, 2022
@ph-fritsche
Copy link
Member

Looks like a duplicate of #1002

@robin-hg
Copy link

robin-hg commented Aug 4, 2022

Works for me in 14.3.0
Broken in 14.4.0+

@kksy
Copy link
Author

kksy commented Aug 4, 2022

I've just realised the implementation of tab is using the keyboard API under the hood. You're right @robinh-jsx. I tried it again locally and userEvent.tab() works in 13.5.0 and 14.3.0. userEvent.keyboard('{Tab}') never worked with focus even at 13.5.0 though.

According to the documentation, it also implies that both the keyboard('{Tab}') and tab should work the same
Screenshot 2022-08-04 at 09 41 08

@ph-fritsche
Copy link
Member

@kksy fixed your test: https://codesandbox.io/s/flamboyant-liskov-kcccjd?file=/src/App.spec.js
Working as expected

@ph-fritsche
Copy link
Member

Works for me in 14.3.0 Broken in 14.4.0+

@robinh-jsx Could you provide more information, maybe a reproduction example? There was no particular change to either handling of Tab or how an element was focused. Might be unrelated.

@kksy
Copy link
Author

kksy commented Aug 4, 2022

Thanks @ph-fritsche I completely missed the Promise return. Regarding @robinh-jsx comment, user.tab works without await in 14.3.0, but you need await in 14.4.0. However, this is not mentioned in the documentation that it returns a Promise

@ph-fritsche
Copy link
Member

All APIs in v14 return a Promise.
fixed in testing-library/testing-library-docs#1128

@ph-fritsche
Copy link
Member

@all-contributors add @kksy docs

@allcontributors
Copy link
Contributor

@ph-fritsche

I've put up a pull request to add @kksy! 🎉

@ph-fritsche ph-fritsche closed this as not planned Won't fix, can't repro, duplicate, stale Aug 4, 2022
@ph-fritsche ph-fritsche removed the needs assessment This needs to be looked at by a team member label Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants