Closed pixelzoom closed 2 years ago
Slack discusion with @jessegreenberg:
This probably needs to be ironed out before Fourier 1.0 is published. The current milestones for Fourier are listed in https://github.com/phetsims/fourier-making-waves/issues/43.
In the meantime, the plan was described in the above Slack thread:
So in the meantime, I’ll modify TransitionNode to move focus to the first element in pDomOrder for the Node that it has transitioned to. For Fourier, that’s the Back button for a level, and the “Level 1” button for the level-selection UI.
@arouinfar (and @terracoda if you have time) can we schedule a brief design meeting about this? We will want to decide what the long term behavior should be and what the behavior should be for Fourier 1.0 (if we need to defer this).
EDIT: I reached out over slack to schedule a design meeting.
Discussed today with @terracoda and @arouinfar:
The behavior should be like this:
That sounds nice. Some implementation notes for myself and @jessegreenberg:
- After transitioning from level selection to a level scene, focus should move to the first focusable element in the level scene.
This seems to be handled nicely by the TransitionNode change that @jessegreenberg suggested in https://github.com/phetsims/twixt/issues/30#issuecomment-852662036.
- After transitioning from the level scene to the level selection scene, focus should be on the button for the level that we just left.
This is NOT handled by the TransitionNode change that @jessegreenberg suggested in https://github.com/phetsims/twixt/issues/30#issuecomment-852662036. Focus returns to the first focusable item on the level-selection UI, which is typically the first level-selection button. So we'll need some way to dynamically tell TransitionNode where to put focus for each Node that it's managing. Maybe a getFocus
option for each Node?
- When switching to the game screen from navigation bar or home screen focus should be on the h1 of the screen, which matches focus behavior for all screens.
Looks like there's nothing to do here, it seems to be working as desired.
- After transitioning from the level scene to the level selection scene, focus should be on the button for the level that we just left.
This pattern was taken from the Home screen.
Over in https://github.com/phetsims/twixt/issues/30, @jessegreenberg and I agreed that this funtionality does not belong in TransitionNode -- it's much too general, and used for things other than games.
It might be the case that we could build support for this behavior (and the UI framework) into vegas. But that's a big project, better tackled after we have more a11y experience with game screens.
So for the time being, I've implemented this behavior in Fourier-specific code, see the above commit. @arouinfar please verify that the behavior matches https://github.com/phetsims/vegas/issues/90#issuecomment-854034816. You can close this issue if it looks OK.
I remember reviewing the focus order and keyboard nav behavior in general throughout the design process for Fourier: Making Waves, but it looks like this issue slipped through the cracks. That said, the published sim does have the behavior outlined in https://github.com/phetsims/vegas/issues/90#issuecomment-854034816, so closing.
This came up in the context of Fourier, but is relevant to sims that have a game screen.
A game screen is sort of like multiple screens in one. It as a Node that shows level-selection buttons, and a Node for each level. See example screenshots from Fourier below. Pressing one of the level-selection buttons does an animated transition (usually a left-to-right wipe) to that level Node. Pressing the Back button on a level does an animated transition (right-to-left wipe) to the level-selection buttons.
TransitionNode (which lives in twixt) is responsible for the transition --- it's a general class, and does animated transitions between any 2 Nodes, not just game components. In Fourier (and probably other sims), after transitioning from level-selection buttons to a level, nothing has focus. And pressing tab moves focus to the navbar - which seems wrong.
How should this behave? Should something have focus after a transition?