Balloon does not seem to get focus when mouse dragging

[jhung]

When using the mouse to drag the balloon, it does not appear to gain focus. There is no focus box on the balloon when dragging. Also if using a combination of mouse and keyboard, dragging the balloon first with mouse then pressing tab puts focus on the balloon, when the focus should go onto the next focusable item (i.e. Remove wall button).

[jessegreenberg]

Good catch @jhung, thank you for creating the issue. Integrating accessible mouse interaction is a feature that PhET will be working on in the near future.

[terracoda]

Yes, good catch @jhung. @jessegreenberg, I've noticed this, also, on all A11y sims (well FAMB and BASE). Mouse focus and keyboard focus are currently not synched. I made note of this when I tested FAMB. For FAMB there is an actual mouse focus in the original sim design, and these styles are actually visually different - yellow circles for mouse focus rope knots and pink squares for keyboard focus on rope knots.

[jessegreenberg]

I believe this would mostly be implemented with phetsims/scenery#41. However, the focus event is separate from other mouse events. For most accessible forms, the focus highlight disappears if the mouse is pressed. If a button is pressed, the navigation order resets.

Implementing this would mean an addition to typical html behavior. That may be necessary for PhET's applications, but we should discuss how this would behave and investigate how the deviation could exist within scenery.

[terracoda]

In traditional website design it is often the focus style that gets overlooked in the design process, making it difficult for many users (but especially visual keyboard users) to see where they are on the page. This is usually handled through the CSS psuedo-classes: Link, Visited, Hover, Focus, Active. It often makes sense (but not always) to have the hover style the same as the focus style.

In many PhET sims the visual change on hover (or mouse over) is subtle (e.g. Reset button) and in some cases it is not so subtle (yellow circles on knots in FAMB). Looking at the big picture, maybe some design efficiencies can be made? For example, could the focus and the hover on the Reset button be the same? And if so, the option that provides higher contrast, would be preferred from a visual accessibility perspective.

[jessegreenberg]

As a general pattern we have since decided that focus will disappear after interaction with a mouse so this issue can be closed.