[JAWS, IE11] Mute Sound can't be toggled

[phet-steele]

I am unable to toggle the Mute Sound button while running JAWS on Win 10 + IE11. Pressing "Space" or "Enter" will instead move the focus to the arm or the Reset All button, depending on which was focused prior (ex, if you Tab from the arm vs Shift + Tab from the Reset All button). The Reset All button will get pressed in the latter case. Neither of these scenarios actually toggle the Mute Sound button though.

@jessegreenberg, when you have the focus over the Mute Sound button, JAWS also reports the descriptions of both the Mute Sound button AND the arm/Reset All button (again depending on which was focused prior).

The only way I've been able to toggle the button is if I:

1. Focus the Mute Sound Button
2. Open the shortcut menu (Alt + Spacebar)
3. Press ESC to close that menu. Subsequent Spacebar and Enter key presses will toggle the button.

For phetsims/tasks/issues/813.
URL: http://www.colorado.edu/physics/phet/dev/html/john-travoltage/1.3.0-dev.20/john-travoltage_en.html
Version: 1.3.0-dev.20 2017-04-05 17:45:45 UTC
Features missing: touch, fullscreen
Flags: pointerEnabled, msPointerEnabled, pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; rv:11.0) like Gecko
Language: en-US
Window: 1536x774
Pixel Ratio: 2.5/1
WebGL: WebGL 0.94
GLSL: WebGL GLSL ES 0.94
Vendor: Microsoft (Internet Explorer)
Vertex: attribs: 16 varying: 15 uniform: 512
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"a707328c","branch":"master"},"axon":{"sha":"f7beced2","branch":"master"},"babel":{"sha":"349f2b73","branch":"master"},"brand":{"sha":"054ca5c3","branch":"master"},"chipper":{"sha":"7c6e001f","branch":"master"},"dot":{"sha":"569939e1","branch":"master"},"john-travoltage":{"sha":"d3c5efa2","branch":"master"},"joist":{"sha":"d11d93da","branch":"master"},"kite":{"sha":"81166ce9","branch":"master"},"phet-core":{"sha":"c5c6c2a8","branch":"master"},"phetcommon":{"sha":"85801e7b","branch":"master"},"query-string-machine":{"sha":"d8a4ff18","branch":"master"},"scenery":{"sha":"e5fadaaf","branch":"master"},"scenery-phet":{"sha":"2cc12884","branch":"master"},"sherpa":{"sha":"ad343771","branch":"master"},"sun":{"sha":"cf75fc6d","branch":"master"},"tandem":{"sha":"cc7876d0","branch":"master"},"vibe":{"sha":"549baf54","branch":"master"}}

[jessegreenberg]

Thanks @phet-steele I will investigate.

[jessegreenberg]

When I remove the aria-pressed attribute this is no longer an issue. Does JAWS not support that attribute? Or maybe JAWS doesn't support the way we are adding it dynamically?

[jessegreenberg]

This example:
https://jsfiddle.net/wpyuhdLq/2/

Doesnt seem to exhibit the problem, so it is likely an issue with the way it is being used in the sim.

[jessegreenberg]

This example has parent divs and tab indices that are the same as the ones used in the sim:
https://jsfiddle.net/6p9c2ue9/2/

The above example doesn't exhibit teh problem.

[jessegreenberg]

Aww, I was testing in Chrome. Going to test again with IE11

[jessegreenberg]

In https://jsfiddle.net/6p9c2ue9/2/ with JAWS in IE11, the focus doesn't move around but the button doesn't work.

[jessegreenberg]

This example works with JAWS in IE11: https://jsfiddle.net/6p9c2ue9/8/

Instead of <input type="button">

We are using
<button>

[jessegreenberg]

Actually, the button in this sim and the example in https://jsfiddle.net/6p9c2ue9/2/ works with JAWS in IE11 if you hold down the shift key. Otherwise it doesn't work.

@jobara @jhung @terracoda do you know if that is the customary behavior for JAWS? Or is that a bug?

If a bug, we can use a <button> for now and submit a bug report to VFO.

[jobara]

@jessegreenberg i'm not sure if that's common behaviour in JAWS. I wonder though if it is because <input type="button"> are associated with form submissions. So maybe it is ignoring toggle states?

[jobara]

actually i made a mistake it's <input type="submit"> that defaults to form submissions.

[jobara]

@jessegreenberg also is there a specific reason to make use of <input type="button"> vs <button>?

[jessegreenberg]

None that I know of @jobara, lets use a <button> for now.

This issue is not a problem for
<input type="button">

but
<input type=button aria-pressed="false">

never receives a click event unless pressing "shift" with "enter" and "spacebar". I am not sure if this is a bug or a JAWS feature.

[jessegreenberg]

Maybe we should submit a report just in case, do you agree @jobara?

[jessegreenberg]

For this issue, we are using <button> instead of <input type="button">, which fixes the problem.

[jobara]

@jessegreenberg probably worth submitting a report for. I couldn't find any other examples of a toggle made with an <input type="button">. I'd be interested to know what they say about it.

[terracoda]

@jessegreenberg and @jobara, the only difference I know of with the button element and the button input is how one must provide an accessible name. The button element is straightforward. It's content is its name. With the input, you have to make sure your provide the accessible name correctly either with ARIA or by associating a label element with the input.

• <button>Press Me</button>
• <input type="button" name="pressMe" aria-label="Press Me" />
• <label for="pressme-button">Press Me</label> <input id="pressme-button" type="button" name="pressMe" />

The button element is simpler. I'd use it wherever possible.

[jessegreenberg]

Thanks @terracoda, yes the button had a label before just like your example, JAWS just didn't want to work when it had the aria-pressed attribute :(

We changed to a button, and I have tried it with JAWS on two different machines now and it works. Closing.