Why does mouse move trigger a change although it does not change focus?

[jantimon]

Why does mouse move trigger a change although it does not change focus?

[ten1seven]

Hi @jantimon,

Binding mousemove is an attempt to catch the mouse as the current input device as quickly as possible. Also, people using keyboard or touch have to "interact" (initiate touchstart or keydown events) with the page even to just read content. A mouse user may never initiate a mousedown event so mousemove provides an additional way to detect mouse usage (though mousewheel was also added recently).

[jantimon]

But then it's not possible to use the library to have a different focus style for mouse/keyboard interactions.

If the user tabs through the page and moves the mouse the design changes which feels strange.

[jantimon]

Would it be possible to have an additional data-whatfocusinput attribute which is set to mouse/keyboard/touch only if the user presses focus keys, clicks or touches?

[jantimon]

In the demo moving the mouse doesn't cause a change if the user is inside a form element but only on links.. I guess this is very hard to understand for the user.

[jantimon]

Try https://www.viget.com/work/politicos-2016-election-coverage for example:

tab through the links and move the mouse - the tab state just disappears..

[ten1seven]

The interaction (not changing input state when interacting with form elements, even when switching between keyboard and mouse) was a requested addition but I regret trying to make the script too "smart" about what someone might be doing and am planning on removing that "feature" soon.

What you see on the Politico page is expected -- the script is picking up on whatever current input device is being used as quickly as possible. Using mousemove is tricky, but I do like that you don't have to assume everyone is a mouse user until they indicate otherwise with an interaction.

I could see your suggestion translating into simply removing mousemove. So data-whatinput-nomousemove (or something). Then you'd get what you're suggesting, which is mousedown, touchstart and keydown being the detected inputs.

I'm curious if you have a specific use case for this request or if this is a broader thought on how the script works?

[jantimon]

We have the requirement to have very bold surroundings for keyboard navigation but we don't want to have those styles if the user is just using his mouse.

However if he is using both - mouse and keyboard the user should be able to still see where his last "tabbed" focus was as long as he didn't focused sth else using the mouse.

We don't want to punish a keyboard user for moving the mouse.

What do you think about a second data-attribute? This would allow simple css styling like

/* keyboard (stays until user clicks/touches) */
[data-whatfocusinput='keyboard'] :focus {
  border-color: green;
}

/* keyboard (stays until user interacts using the mouse) */
[data-whatinput='keyboard'] :focus {
  background: orange;
}

You have all event information for this anyway and it would be fully backwards compatible.

[jantimon]

Just found allyjs which does exactly that: http://allyjs.io/api/style/focus-source.html

[ten1seven]

That's a great suggestion! I'll keep this ticket open and let you know when I've made that change (even if you wind up using allyjs 😉 ). Allyjs is pretty great and does soooooo much.

[jantimon]

Cool 👍

[ten1seven]

Hey @jantimon, I reworked the script as version 4.0 (since it significantly changes how it works and removes some API options) so now mousemove has no effect on the data-whatinput attribute but added a new data-whatintent attribute that acts like the old way. I'd appreciate it if you could take a look and let me know what you think.

Please note that the demo page has not been updated with this new script so you'll need to download the zip and run it locally.

https://github.com/ten1seven/what-input/tree/version-4

[jantimon]

Wow nice gonna try it right away :)

[ten1seven]

Closing this issue since it's been a while. Please re-open if version 4 didn't fix this issue.