fluid-lab / gamepad-navigator

GSoC 2020 project
Other
6 stars 10 forks source link

Focus styles not applied consistently. #162

Closed duhrer closed 4 months ago

duhrer commented 4 months ago

We now have a clearer explanation for why :focus-visible styles aren't always applied when we use bumper navigation (see #161).

However, the problems described in #161 don't explain why I can occasionally get into a state where modals don't display focus. All of those styles use :focus (in fact we don't use :focus-visible anywhere in our code base).

This ticket tracks research into modal focus problems like this.

duhrer commented 4 months ago

The next time I get into a broken state, I'd like to:

  1. Set a break point after we programatically focus to see what document.targetElement is.
  2. Examine the state of the element that should have been focused.
  3. Hit enter to see if the option is focused without that being displayed.
  4. Inspect the focused element and toggle its focus attributes to see if any of those force the styles to jump back into place.
  5. Try tabbing or otherwise using the keyboard to see if it unsticks things (this would suggest that this is a variation on #161).
duhrer commented 4 months ago

In further testing for #161, I discovered that:

  1. Some of the elements for which focus is not displayed have :focus rather than only :focus-visible styles.
  2. document.activeElement is being set correctly when triggering focus.

This suggests to me that this is indeed the same issue. Leaving this open until I can get the menus in a state to confirm.

duhrer commented 4 months ago

I think I'm going to close this one once #164 is merged.