react-perimeter icon indicating copy to clipboard operation
react-perimeter copied to clipboard

accessibility, focus event listener

Open vabruzzo opened this issue 8 years ago • 3 comments

What do you think about adding focus event listener for non-mouse users? I'm undecided myself if this is a good idea but I was thinking of ways to make this accessible. The problem with a focus listener is that a user tabbing through items on the page would trigger everything as they navigate with the keyboard.

Thoughts? Concerns?

Great idea by the way!

vabruzzo avatar Mar 19 '17 02:03 vabruzzo

I'd love to add support for this! Maybe we could make it opt-in at first?

aweary avatar Mar 19 '17 05:03 aweary

Yeah, that was my inclination as well! I'll think about it a bit more and open a PR when I get a chance.

vabruzzo avatar Mar 24 '17 19:03 vabruzzo

I think is a great idea. One way tabbing could be handled is some kind of timer -- if a user navigating via tab pauses on an element for a given period of time, the element loads.

I foresee a couple of issues with this:

  • Users who visit a site frequently will be able to navigate & choose by muscle memory, negating the delay before choosing the element
  • First-time users will be pausing more frequently
  • Might require testing to get the timer length right
  • How to handle users who navigate by both focus and mouse (I've seen a couple articles about how this should be approached wrt CSS, notably this one, which inspired this polyfill. Parts of that solution seem applicable to this.)

I'm definitely going to think about this more also, but I think that adding a focus listener to this would not only improve its accessibility but also encourage the developers who use this to be more intentional about how they're setting up their tabindex order.

jlr7245 avatar Mar 25 '17 20:03 jlr7245