keyboard navigation focus is missing after Remove Wall is pressed

[ghost]

Test Device

MacBook Air

Operating System

10.13.4

Browser

Safari 11.1

Problem Description

Related to phetsims/qa/issues/112. I used VoiceOver to guide me to the "Remove Wall" button. The "Remove Wall" button initially had keyboard navigation focus, i.e. the purple outline. When the "Remove Wall" button was pressed, the keyboard navigation focus disappeared.

This does not occur when I navigate to the "Remove Wall" button using normal keyboard navigation.

Steps to Reproduce

1. Use VoiceOver to guide you to the "Remove Wall" button.
2. Notice the keyboard navigation focus on the "Remove Wall" button.
3. Press the "Remove Wall" button using VoiceOver.
4. Notice the keyboard navigation focus disappear from the "Remove Wall / Add Wall" button.

Visuals

Comments from Original Issue

I accidentally put this issue in the QA repo. Here are the comments from the original issue:

@lmulhall-phet: The same thing happens with the "Two-Balloon Experiments" checkbox and the "Reset Balloons" button.

@lmulhall-phet: Same thing with the radio buttons for the charge settings.

@jessegreenberg: @lmulhall-phet are you testing with master or on the dev version? I haven't seen this before, so it seems like a regression in master that is not specific to this sim.

@lmulhall-phet: Happens with the "Reset All" button, but it does not occur with the keyboard navigation icon or the PhET menu button.

@lmulhall-phet: Testing on dev version.

@jessegreenberg: I see, thanks. I just tried on BOSE with VO Safari 11.0.3 I am not able to reproduce on master. Ill try the dev version.

@lmulhall-phet: OK, thanks. Also, not sure why I put this in the QA repo.

@jessegreenberg: Ah, didn't even notice!

@lmulhall-phet: I'm going to move this over to the correct repo and label this one a duplicate.

Link to original issue: phetsims/qa/issues/119

Troubleshooting Information

Name: ‪Balloons and Static Electricity‬
URL: https://bayes.colorado.edu/dev/html/balloons-and-static-electricity/1.4.0-dev.21/phet/balloons-and-static-electricity_all_phet_debug.html?accessibility
Version: 1.4.0-dev.21 2018-04-04 18:25:56 UTC
Features missing: touch
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15
Language: en-US
Window: 1440x736
Pixel Ratio: 1/1
WebGL: WebGL 1.0 (2.1 INTEL-10.32.48)
GLSL: WebGL GLSL ES 1.0 (1.20)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 15 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 16)
Max viewport: 8192x8192
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"ceb3cc00","branch":"master"},"balloons-and-static-electricity":{"sha":"f4f3cc64","branch":"master"},"brand":{"sha":"89d28f63","branch":"master"},"chipper":{"sha":"bc7c5d1f","branch":"master"},"dot":{"sha":"e5489d18","branch":"master"},"joist":{"sha":"2cf256a9","branch":"master"},"kite":{"sha":"b6071478","branch":"master"},"phet-core":{"sha":"d8804eee","branch":"master"},"phet-io":{"sha":"4bbddfaa","branch":"master"},"phet-io-website":{"sha":"b6c2b0f5","branch":"master"},"phet-io-wrapper-classroom-activity":{"sha":"1ecd81a1","branch":"master"},"phet-io-wrapper-lab-book":{"sha":"b1c5562c","branch":"master"},"phet-io-wrappers":{"sha":"025cc23d","branch":"master"},"phetcommon":{"sha":"de004c6e","branch":"master"},"query-string-machine":{"sha":"c379f1db","branch":"master"},"scenery":{"sha":"4a4afee2","branch":"master"},"scenery-phet":{"sha":"e68ebc03","branch":"master"},"sherpa":{"sha":"bb14a03a","branch":"master"},"sun":{"sha":"8a187c9f","branch":"master"},"tandem":{"sha":"f8147666","branch":"master"},"vibe":{"sha":"2dc20be7","branch":"master"}}

[jessegreenberg]

I haven't been able to reproduce this on Safari 11.0.3 with VO with 1.4.0-dev.21.

[jessegreenberg]

I can reproduce this issue when interacting with the button with "ctrl + option + spacebar" - which is what VO tells us to do in its interaction hint. @terracoda is this expected behavior?

[jessegreenberg]

To be clear, I can still click the button, it is just that the focus highlight disappears.

[jessegreenberg]

We should see what happens outside of PhET, Ill create a JSFiddle.

[jessegreenberg]

Using the console, I can see that after the button is clicked with ctrl + option + space, focus is on the body, even while still interacting with the button.

[jessegreenberg]

I don't see this happening in vanilla HTML.
https://jsfiddle.net/bawt7y4u/3/

[jessegreenberg]

Found it - VoiceOver is sending a mousedown event to the browser when pressing ctrl + option + spacebar. We have code that makes the focus highlight disappear when we detect that mouse interaction has continued.

[jessegreenberg]

It is clicking in the center of the HTML element in the PDOM. pointer.point is a Vector2 {-5875, 108}. Inspecting the HTML element,

var rect = button.getBoundingClientRect();
rect.left + rect.width / 2 // => -5875

[jessegreenberg]

One way to fix this is to only remove focus if we receive a pointer event within the display bounds. If outside of the display bounds, we can assume the AT sent an input event and ignore?

      // the assistive device might send a pointer down event at the location of the element in the PDOM, ignore these
      var inDisplay = this.display.bounds.containsPoint( pointer.point );

      // If any node in the trail has accessible content and Pointer point in display
      if ( trailAccessible && inDisplay ) {
         ...

On hold until other a11y work in scenery is merged into master (or we think of something better).

[terracoda]

Ok, sounds good.

[jessegreenberg]

a11y tree remapping was merged into master, we are back on for this.

[terracoda]

@jessegreenberg, the issue only happens when using Control-Option-Space, the interaction recommended by Voice Over. Focus is not lost when pressing Space or Enter alone to complete an interaction.

Currently, on master and this happens for all buttons and checkboxes.

I think I tested before you actually fixed. I took "back on" to mean "back on for testing".

Let me know when you are ready for me to check ;-)

[jessegreenberg]

Sorry @terracoda, "Back on for implementation" - ill reassign to you to verify.

[terracoda]

@jessegreenberg, I like your solution suggested. I am not actually sure what the expected visual focus behaviour is for VoiceOver Controls.

It makes sense to me to keep the focus highlight since MOST VoiceOver users are interacting using the keyboard. I have seen, however, one user switch to using the track pad when interacting with a slider.

[jessegreenberg]

I wonder if this fix will have an impact on phetsims/resistance-in-a-wire#143 and phetsims/resistance-in-a-wire#143

[jessegreenberg]

I won't be able to work on this until I have access to VoiceOver.

[terracoda]

@jessegreenberg, let me know if you need me to do the testing in Voice Over.

[terracoda]

@jessegreenberg, just got this tip from WAI list member:

VoiceOver command control-option-F4 should tell you what has focus

[terracoda]

@jessegreenberg, I do not get any information when I use the control-option-F4 command.

I think system focus is lost when the Wall is removed with Voice Over's Command-Option-Space command (VO-Space)?
When I remove the Wall with VO-Space, and then hit Tab, my focus goes to the Grab Balloon button (first focusable item in sim) and if I press Shift Tab after removing the Wall, focus goes to the last item in sim (PhET Menu button).

I get the same focus behaviour when I use VO-Space on the Two-Balloon Experiment checkbox.

After using VO commands, system focus is not on the elements because I cannot use plain Space or Enter to operate the button, or plain Space to operate the checkbox.

System focus seems to be gone.

[jessegreenberg]

Thanks @terracoda, no need to test just yet. Focus is lost in this case because of the way VoiceOver works with our PDOM (see #401 (comment)).

I still expect #401 (comment) to fix this, but I was unable to make changes to scenery yesterday without access to VoiceOver. Ill work on this today.

[jessegreenberg]

The above commit fixes this problem. I tested with VO in Safari and could no longer reproduce. @terracoda could you please verify this is fixed on your end?

[terracoda]

Awesome @jessegreenberg. Will test in the morning!

[terracoda]

@jessegreenberg, testing now.

[terracoda]

@jessegreenberg, verified you have resolved the issue!Focus stays on controls when usin VO suggested commands.