fluid-lab / gamepad-navigator

GSoC 2020 project
Other
6 stars 10 forks source link

Optional Focus Indicator doesn't work in modals. #170

Closed duhrer closed 4 months ago

duhrer commented 4 months ago
  1. The optional focus indicator added in #161 does not work with the onscreen keyboard. The focus indicator does not follow the arrow navigation.
  2. Initial focus in many modals seems broken, there is no optional focus indicator.
  3. The focus indicator shows up when bumper navigating and wrapping around, but not right after the wrap, i.e. the first element doesn't show up when wrapping forwards, and the last element doesn't show up when wrapping backwards.

In looking into the first item, I noticed that the onscreen keyboard uses its own focus management, which directly calls focus on the individual keys. I'll have to read up and see if there is some more general way of tracking focus changes and see if we can listen to that. Another thought is to add a model listener for focused row and column changes and update focusOverlayElement manually.

If we can figure out why the optional indicator sometimes works when wrapping, then we might be able to use that approach elsewhere.

duhrer commented 4 months ago

It looks like there are focus and blur events on the window itself. This would be a good opportunity to make the behaviour consistent when switching between keyboard and mouse as well.

It would also let us revert a lot of the changes from #161 that required a dedicated focus function.

duhrer commented 4 months ago

The window focus and blur events only fire when the whole window is first focused or blurred.

duhrer commented 4 months ago

Thanks to this page, it seems like I found an approach that does work. I created this CodePen to demonstrate, I was able to confirm that:

  1. focusin is triggered on the window when a new element receives focus.
  2. focusout is triggered when the previous element loses focus.
  3. The timing is consistent for each transition, i.e. focusout on the old element and then focusin on the new.

This should let me do what I had in mind. If we have the focus overlay listen for the changes, we don't even need to pass around model variables to track what the overlay should focus on, it can just adjust itself immediately.

duhrer commented 4 months ago

Turns out that shadow elements do not report their focusin and focusout events back to the window, so you need to add a listener to the shadow elements you care about (in our case, only the modal manager's shadow element). Once that was done, this works pretty well.