Arbitrarily freeze what-intent while focused

[warkentien2]

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 #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]

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]

Providing a parent container will work perfectly.

Thank you!