aweary / react-perimeter

🚧 Create an invisible perimeter around an element and respond when its breached.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

accessibility, focus event listener

vabruzzo opened this issue · 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!

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

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

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.