search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

Arbitrarily freeze what-intent while focused #123

Open warkentien2 opened 2 years ago

warkentien2 commented 2 years ago

Hi, @ten1seven

I would like to extend the Form field behavior — of a frozen what-intent while focused — to other elements. At first, I created a hook, as you showed in https://github.com/ten1seven/what-input/issues/105. But, it could be as simple as adding a data attribute, e.g.:

Updating:

const formInputs = ['button', 'input', 'select', 'textarea'];

to:

const formInputs = ['button', 'input', 'select', 'textarea', '[data-whatintent-target]'];
// usage
<RangeInputHandle data-whatintent-target />

Also, it would be great if [data-whatintent-target] didn't have to be inside a <form>.

Use case: When controlling a video player by clicking the progress slider and then clicking the left and right arrows, I don't want to see accessibility markers, which kick in as soon as html[data-whatintent="keyboard"]

ten1seven commented 2 years ago

Thanks for this suggestion @warkentien2!

I gave this a bit of thought and was considering going one further and creating an API function that would allow you to provide a parent container and list of focusable children. It could be used internally for forms but then available for things like your use case. Something like:

whatInput.contain('my-parent-selector', ['button', 'input', 'select', 'textarea', '.some-custom-control'])

Thoughts about that working for your use case but also being generic enough to be useful for others?

warkentien2 commented 2 years ago

Providing a parent container will work perfectly.

Thank you!