vue-accessible-select icon indicating copy to clipboard operation
vue-accessible-select copied to clipboard

Fix keyboard navigation

Open jonasclement opened this issue 3 years ago • 6 comments

Hello.

I noticed that this library has a few flaws regarding keyboard accessibility, and I've done my best to fix them here :)

Fixed issues:

  • Type-ahead
    • [ ] Would always select the first matching option, rather than the next matching option, like a native select would.
    • [ ] Had problems when you would use the spacebar for a multi-word option
  • General keyboard navigation
    • [x] Arrow keys and type-ahead didn't work without opening the select first - this doesn't match with native select behavior either

jonasclement avatar Nov 24 '21 14:11 jonasclement

Hello,

I added a few more commits with some additional fixes:

  • The drop-down now opens when you press the spacebar while it's focused.
  • Fixed enter key flashing the dropdown - now it toggles properly instead.

jonasclement avatar Dec 08 '21 14:12 jonasclement

@jonasclement thanks for your PR. I'm investigating your changes.

andrewvasilchuk avatar Dec 09 '21 21:12 andrewvasilchuk

@jonasclement This one still does not work for me.

Would always select the first matching option, rather than the next matching option, like a native select would.

Don't you mind if I also contribute to your PR?

andrewvasilchuk avatar Dec 09 '21 22:12 andrewvasilchuk

Hmm, no, I see that that doesn't work - I'm sure I fixed it at some point!

You're welcome contribute as you like. I'm going to look into the issue now, and hopefully push a working fix :)

jonasclement avatar Dec 10 '21 07:12 jonasclement

Check out a4d6bb95d88c3c0911ddcf2672322faa4235495f - should be working as expected now :)

jonasclement avatar Dec 10 '21 07:12 jonasclement

Hey mate - any progress on this? :)

jonasclement avatar Jan 13 '22 12:01 jonasclement