Landing screen focus highlights

[mbarlow12]

In Safari and FF, we're seeing strange behavior with the focus highlights from the landing page/screen selection. Not sure yet if this is specific to this sim only or to all multiscreen a11y sims.

Safari:
In both the regular sim and the a11y view, the focus highlight seen on the landing page lingers.


Tabbing in either direction correctly blurs focus and moves it to the appropriate element. Once focus is lost from the lingering highlight, it cannot be regained again by the user.

Firefox:
In the regular sim, FF appears to exhibit identical behavior to Safari. The highlight simply lingers and can be blurred on tab interaction. However, in the a11y view, it appears that both landing page highlights still exist and can control the screen selection. The user can tab between them even after first moving focus to one of the sim's nodes.

Additionally it appears that there are focusable elements from both screens that are bleeding through. Cycling through all elements reveals several blank and repeated highlights before returning to the originally focused element (e.g. the address bar).

[mbarlow12]

@jonathanolson I think this issue lies in joist or scenery. Do you have time this week to pair up and work on it?

[jonathanolson]

Sure, what time works well for you?

I took a brief look, and it looks like it still thinks the button on the homescreen is focused. Hackily tested with:

setInterval( function() {
  console.log( phet.scenery.Display.focus && phet.scenery.Display.focus.trail.toPathString() )
}, 500 );

which continues to print HomeScreenView/HBox/ScreenButton in the buggy state (focus highlight for the homescreen button over another screen).

Not sure how switching screens is supposed to change the focus, are you familiar with the desired behavior?

[mbarlow12]

@jonathanolson Thanks for the feedback. I'll be working all day tomorrow, and @jessegreenberg and I were planning to tackle this in the AM.

I'd suggested pairing as I'm still pretty fuzzy on the inner workings of the scenery and display, but if there are other issues that might be more instructive, perhaps those might be better to pair on.

[jonathanolson]

I'll be available tomorrow, but I have some other collaboration scheduled at 10am. I'll be able to let you know tomorrow if I can help out before that, or if it would need to be after.

[jessegreenberg]

@mbarlow12 and I worked on this today. It turns out that Chrome is the only browser to blur the active element if an ancestor gets hidden. If a descendant of a hidden element has focus, it is now blurred. Verified on Firefox and IE11, but @mbarlow12 could you please review the commit and make sure it works in Safari?

[mbarlow12]

@jessegreenberg Issue is fixed for standard screens. However, there's a lot of strange behavior in the a11y view—yet that may not be an issue since that's more for development. I'll create a new issue to track.