Document A11y design pattern for TimeControlNode

[terracoda]

In the Interactive Description design of Molecules and Light (https://github.com/phetsims/molecules-and-light) we made the Time Control Node accessible.

We made several design decisions that worked well in MAL, and will hopefully work well in other simulations.

• H3: Timing Controls
• Names of buttons: Pause, Play Step Forward
• "Sim Speeds" group name for radio button
• Supporting context responses to alert when sim is paused (or main interaction is off)
• Help text to scaffold the use of the controls as a group - see A11y View or Interactive Description Design Document
• In addition, we added custom hotkeys to toggle Pause/Play and and to Step Forward in larger steps when Paused.

Assigning to self to create a markdown file for the A11y design pattern for this PhET component.

[pixelzoom]

Hi @terracoda. I'm now the responsible developer for scenery-phet. Can you give me an estimate of when you might be able to address this issue?

Raising priority to high since this issue has been inactive for 7+ months. Feel free to adjust priority when we've decided on how/when to proceed. Thanks!

[terracoda]

Hi @pixelzoom, thanks for the heads up. I realize 7 months is a long time. I just created this issue as a reminder. I didn't have a due date in mind. What's the typical expectation for documentation like this? It's not blocking anything and Molecules and Light is a working example.

Greenhouse Effect is the next sim up with a Timing Control Node and Interactive Description. It might be handy to have a pattern ready when development starts on that sim.

[pixelzoom]

No expectations. I was looking for the info that you just provided. Since it sounds like you don't have any plans to work on this right now, I'll give it "deferred" status. When you start Greenhouse, you can decide whether to change the priority.

Thanks!

[terracoda]

Thanks :-)

[terracoda]

I have documented a design pattern for this control in the documentation for the Description Course.

Please see Timing Control under the Customized & Grouped Interactions section in this extensive tip sheet covering Design Patterns for Multi-State & Customized Interactions

I am not sure where we keep the latest a11y interaction design pattern information.

[terracoda]

I think I can close this issue since I created and documented design pattern. And I'll just copy the tip sheet covering Design Patterns for Single- & Two-State Interactions as well into this issue.

We can open another issue, if the design pattern for Timing Control or any other interactive object needs to be copied somewhere specific, like possibly over to the binder repo.

[pixelzoom]

I don't think we need another issue, so reopening this one.

Another document or this GitHub issue is not a good place for this info. We'll never find it, and it's not scalable to other UI components. PhET has a process for this, it just doesn't seem to be getting used. So yes, we need to consider binder and .md files.

For those who are new to the team... Awhile back, PhET started documenting design (including a11y) in .md files. For example, see Checkbox.md. I'm not entirely clear on how this integrates with binder, which is described in https://github.com/phetsims/binder#readme. But adding binder support involves adding a line like this one that appears in Checkbox.ts:

    // support for binder documentation, stripped out in builds and only runs when ?binder is specified
    assert && phet.chipper.queryParameters.binder && InstanceRegistry.registerDataURL( 'sun', 'Checkbox', this );

So, questions to address:

• Does PhET want to continue using binder and .md files, ala Checkbox? If no, then what is the process? If yes, then...
• Should this info be put in TimeControlNode.md?
• Should binder support be added in TimeControlNode.ts?

@terracoda would you please take the lead on this?

[terracoda]

I can look at this for quater 4.

[terracoda]

These are helpful questions, @pixelzoom.

[pixelzoom]

Reviewing scenery-phet issues for Q4 2022 planning...

@terracoda reminder that you said:

I can look at this for quater 4.

[terracoda]

Thanks for the reminder. I'll try to move the course documentation into Mark Down format using this template https://github.com/phetsims/sun/blob/master/doc/templates/MarkDownTemplate.md

[terracoda]

Just discussed an idea related to Timing Control Node related to My Solar System with @Matthew-Moore240 over slack. I will document the idea here, since the design pattern documentation for this control still needs to be created.

Some Timing controls have a restart button, too. For example, My Solar System.

Using “sim action” instead of “sim”, might sound better - more specific than "sim". This wording might not be confused with restarting the sim when a learner is just restarting the action controlled by the Timing Control Node.

The dynamic help text in MAL looks like this: Help text (dynamic): changes depending when sim is in a paused state.

• When in Play mode (visible Pause button): Pause sim to step forward little by little, or keep playing sim at chosen sim speed.
• When Paused (visible Play button): Step forward little by little, or play sim at chosen sim speed.

But better wording might be:

• When in Play mode (visible Pause button): Pause sim action to step forward little by little, or keep playing action at chosen sim speed. Restart action to begin again.
• When Paused (visible Play button): Step forward little by little, or play action at chosen sim speed. Restart action to begin again.