question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove `keydown` linting in rule: no-down-event-binding

See original GitHub issue

no-down-event-binding rule includes keydown event:

https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-down-event-binding.md

I understand how binding to mousedown could cause a11y issues because it prevents a user from moving away from the target(preventing the action). However, I do not see the benefit for avoiding keydown. Once the key is pressed a user can’t really undo it. But maybe I’m not seeing something.

It is known that keydown provides more uniform behavior across different browsers. https://www.mutuallyhuman.com/blog/keydown-is-the-only-keyboard-event-we-need/

Hello @MelSumner , I see that you contributed to this rule. What is the original reasoning behind including keydown along with mousedown?

Talking with our a11y team, they agree that it is fine to use keydown without compromising a11y.

Please let me know, if the community agrees, I can work on submitting a PR.
Thank you, Mario

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
drewleecommented, Feb 12, 2022

@MelSumner The tab example behavior may not be desirable for all cases. For example, if we have a vertical tab component, we would want to stop the browser from scrolling the page each time the Up and Down arrow keys are pressed to activate a tab. There are similar concerns with combobox-like components, where list scrolling behavior may require programmatic control. Doing this requires adding a keydown event listener in order to apply preventDefault. A better approach to limiting sequential key triggers would be to implement a debounce. Overall, this seems to be too much of a narrow use case to broadly ban all usage of keydown.

2reactions
MelSumnercommented, Feb 10, 2022

Update: an example where you would want to use keyup instead of keydown: On a tabs component, you would want to configure the arrow keys that cycle between the tabs to use keyup instead of keydown- keyup responds once, whereas keydown would respond multiple times. This would be detrimental for folks with motor control issues.

I wonder if we should keep this rule as is and instead encourage folks to disable it if they really feel like they need to use it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Remove keydown event from jquery element not working
To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one().
Read more >
Element: keydown event - Web APIs | MDN
The keydown event is fired when a key is pressed. Unlike the deprecated keypress event, the keydown event is fired for all keys,...
Read more >
How to disable a keypress event? - Qualtrics Community
Hi Qualtrics experts, I am programming a survey which relies on a question which uses a keypress event, and have encountered a problem...
Read more >
Remove anonymous keydown event - JavaScript - SitePoint
In my webpack build, I export a function export function trapFocus(element,cb) { element.addEventListener('keydown', function(e) { .
Read more >
Control.KeyDown Event (System.Windows.Forms)
Occurs when a key is pressed while the control has focus.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found