7900 shaares
161 private links
161 private links
Most of the time, your job with JavaScript to enhance components’ keyboard accessibility will be done with just a handful of tools, including the use of event listeners and certain JavaScript methods of a couple of Web APIs that can help us in this task.
- keydown event: Instead, the utility of the keydown event comes when you need to add functionality to other keys [than enter or space].
- blur event: most of the time, you’ll use it to reverse the possible changes you have made with the keydown event listener.
- focus event (rare), but instead the focus method!
button.inert
works and avoid a setAttribute.
#idea #project #vue: create a directive to handle keydown and blur event into one action that is reversible.
So now we can have a look at component patterns:
- toggletips
- tabs
- modals