search

euvl / vue-js-toggle-button

:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
http://vue-js-toggle-button.yev.io/
MIT License
934 stars 133 forks source link

Support keyboard navigation #82

Closed VictorCazanave closed 6 years ago

VictorCazanave commented 6 years ago

Is there any reason why https://github.com/euvl/vue-js-toggle-button/pull/26 has not been merged? I think it would be great to support keyboard navigation.

PS: Sorry for opening a new issue but I don't know if you get the notifications from closed PR 👼

euvl commented 6 years ago

Hey, I don't really remember as the PR was one year ago. I can take a look into it when i have a bit of free time.

euvl commented 6 years ago

I think what put me off was the phraseI'm not 100% sure on that front.. It is not a great benchmark for things that are used by hundreds of people 😄

VictorCazanave commented 6 years ago

Haha! Okay 😄I'll work on it when I have time.

VictorCazanave commented 6 years ago

I made a quick test on codepen and it seems that there is no need to check whether component is focused or not. However it doesn't work on IE 11 (nothing happens when pressing the space bar) 😞 so I'll search a way to fix it.

euvl commented 6 years ago

Nice, thanks 👍

VictorCazanave commented 6 years ago

I've updated the codepen with a solution based on this article using opacity: 0 instead of display: none to hide the <input/>. Then the <input/> is still accessible/focusable and natively reacts to keyboard events (no need to add @keydown.space) even on IE 11. I'm not an expert in accessibility but I think we can also remove the role="checkbox" and the aria-checked.

I may have time to make a PR this week. It will be more clear than explaining the code modification 😄