why is tabindex=0 and can an option be exported for user to change it?

[winston0410]

Hi, from the codebase I notice that for marqueeck-wrapper, there is a tabindex=0. I understand that it is to make div a focusable element, but since clicking on the marquee would not do anything special for my usecase, is it possible to export an option to customize tabindex and make it -1?

[AristideBH]

Hello, thanks for your comment ! It's indeed the reason why tabindex is set to 0. Ideally, I'm looking for a way to set it automatically if a click event is passed. If I can't figured it out quickly, I will export a tabIndex prop as suggested and let you know !

[AristideBH]

Unfortunately, and according to this discussion, detecting if an event is passed or not is not possible with the on: directive in Svelte. Thats' a bummer...

However, even if I don't find it elegant, I have replaced on:click with a custom on_click prop in version 0.4.3.

It works the same (just pass a function), but it allows event to be detected, thus applying attributes accordingly :

• if you don't pass on_click : role="marquee" and tabindex="-1"

• if on_click is set : role="button" and tabindex="0"

  The updated module is up on npmjs, and documentation reflects this change ;) Feel free to close the issue if that worked for you !

On a sidenote, I will likely update the new handleClick function to differenciate Mouse and Keyboard events, while restricting keydown directive to enter and space keys for better accessibilty. But I take one step at a time ;)

[AristideBH]

Updated to 0.4.4 : Automaticaly add 'cursor: pointer' when .marqueeck-wrapper has role="button"

[winston0410]

That is awesome progress, thank you so much!