Interactivity of AccordionBox title

[kathy-phet]

@pixelzoom, @amanda-phet - I was playing with Gas Properties on phettest and found myself clicking the titles of the accordion boxes to open/close and wondering why it wasn't working - then recalling I think that the PhET-iO work limited open/close to the button only.

Is this change indeed from the PhET-iO work? Do you miss the titles being clickable? Can the touch area be extended to the right/left from the button to cover the title in the way we normally do button click/touch area expansions?

I am realizing that I was using this behavior pretty commonly as I played with BAA for instance - and when I play with it on phettest its not active now.

[pixelzoom]

After consultation with PhET designers and developers, this feature was removed from AccordionBox. See #477 for complete history. So the title is no longer interactive, and you need to click the expand/collapse button.

[pixelzoom]

See also phetsims/graphing-quadratics#112 (comment). At the Graphing Quadratics PhET-iO design meeting, there was an explicit decision to remove this feature from AccordionBox, and I was assigned to create issue #477 and do the work. The attendance for that meeting isn't recorded in the comment, but I would be surprised if we had made so many decisions (including this one) without out both @amanda-phet and @kathy-phet present.

[pixelzoom]

To answer @kathy-phet's other questions:

Is this change indeed from the PhET-iO work?

The decision was made in a PhET-iO meeting (see above), but there were other problems with this feature not specific to PhET-iO.

Do you miss the titles being clickable?

No, I don't miss it. I doubt that most users even know that it exists, and suspect that they use the button.

Can the touch area be extended to the right/left from the button to cover the title in the way we normally do button click/touch area expansions?

That would will be possible once #500 is addressed. But I don't recommend it, there are some significant problems. At the point where we need to specify the pointer areas, we don't know how long the localized title text is, or how wide the accordion box will be, so we don't know how much to increase the touch area. And for accordion boxes that hide their title when open, we'll have a pointer area that is covering content (not title) and may conflict with the content.

[pixelzoom]

Reassigning @amanda-phet and @arouinfar, in case they want to chime in.

[amanda-phet]

If we get complaints from users or if there are specific sims that could use the wider touch area, we can always expand the touch area on a sim-by-sim basis. But as far as the design decision goes, I think it is a reasonable one.

[pixelzoom]

Over in phetsims/unit-rates#212, we identified that asymmetric pointer areas for the expand/collapse button would be a generally useful feature. And that's going to require some work in sun buttons. Before I continue with that, I want to be sure that we're OK with where things are currently at with AccordionBox. Because the asymmetric pointer areas is not compatible with the any general plan that involves expanding the button's pointer areas to cover the title.

If being able to open/close via the title is a necessary feature, then we should revert all of the work that's been done in #477, restore the feature (and patch any sims that have been released since then?) and have another design meeting to decide how to move forward with AccordionBox.

[pixelzoom]

@amanda-phet said:

If we get complaints from users or if there are specific sims that could use the wider touch area, we can always expand the touch area on a sim-by-sim basis.

No, we cannot do that. It doesn't work with translated strings. It requires code to be duplicated over and over in sims. And it's not compatible with the "asymmetric pointer areas" that I was asked to add for the expand/collapse button in phetsims/unit-rates#212. It also results in inconsistent behavior across sims; if titles are interactive, they should be interactive in all sims, and should be handled by AccordionBox, not by sim-specific code.

[pixelzoom]

So here are the 2 options:

(1) Titles are never interactive. You must use the button to expand/collapse the box. This is what is currently implemented, and was the consensus in #477.

(2) Titles are always interactive. You can use either the button or the title (when it's visible) to expand/collapse the box. This will require reverting #477, and figuring out another way to address PhET-iO concerns.

[amanda-phet]

Thanks for clarifying @pixelzoom . I would still vote for keeping the pointer/touch area limited to the actual button.

[kathy-phet]

@pixelzoom - I was in the discussion and had been OK with the decision at that time. But I'm finding now that the behavior is changed is that the sim is not as fluid to use when I need to be more precise and move my cursor further (in cases like BAA) to hit the box.

[kathy-phet]

@amanda-phet said: If we get complaints from users or if there are specific sims that could use the wider touch area, we can always expand the touch area on a sim-by-sim basis.

No, we cannot do that. It doesn't work with translated strings. It requires code to be duplicated over and over in sims. And it's not compatible with the "asymmetric pointer areas" that I was asked to add for the expand/collapse button in phetsims/unit-rates#212. It also results in inconsistent behavior across sims; if titles are interactive, they should be interactive in all sims, and should be handled by AccordionBox, not by sim-specific code.

Chris - Can you elaborate on why the idea of expanding the button hit area assymetrically is not compatible with having it extend over the title area?

[kathy-phet]

Also, can you remind me what the other issues with the title being interactive were besides the PhET-iO issues? Was there an accessibility issue as well?

[pixelzoom]

• Can you elaborate on why the idea of expanding the button hit area assymetrically is not compatible with having it extend over the title area?

The requested touchArea in Unit Rates phetsims/unit-rates#212. would look like this:

But more importantly:

(1) the sim code creating the AccordionBox has no idea how wide the title is, or where it will be placed, and therefore no way to know how much to increase the touch area.
(2) this would need to be done over and over in sim code
(3) this would result in inconsistent behavior across sims; some sims would support clicking on title, others would not.

Also, can you remind me what the other issues with the title being interactive were besides the PhET-iO issues? Was there an accessibility issue as well?

I can't speak to the a11y issues, you'll need to ask someone from the a11y team. I confirmed that removing this feature did not create any a11y issue.

[amanda-phet]

Also, can you remind me what the other issues with the title being interactive were besides the PhET-iO issues? Was there an accessibility issue as well?

I recall one issue was the focus rectangle. It would highlight the entire touch area, but if there was no title then the highlight would obscure some of the box content. In that case, having the touch area around the button only solves the problem.

[pixelzoom]

The other thing that was always odd about this feature is that it was the title area (not the text in the bar) that was interactive. If you clicked anywhere in the title area, the box would expand/collapse. And that for wide AccordionBoxes (like Unit Rates) that proved to be a problem, so we disabled it - making it behave differently than other sims.

So if we do restore this feature, we should consider making just the title (not the entire title bar) interactive. And that may have implications for a11y focus area.

Again... so many issues to sort out for a power-user feature.

[kathy-phet]

OK. Got it. Let's touch base next week at status briefly. If I am the only one who feels it feels less usable, or if consensus is the way it is now is the better of the various options, I will deal and try to retrain myself. I was surprised by how much it impacted my fluidity with the sim.

[kathy-phet]

There is indeed hope I can retrain myself. I just checked the Java BAA to see if we had this behavior in Java - and it is only the button that works - the title is not clickable.

[arouinfar]

I'm personally fine with continuing to limit the click/touch area to the ExpandCollapseButton.

But I'm finding now that the behavior is changed is that the sim is not as fluid to use when I need to be more precise and move my cursor further (in cases like BAA) to hit the box.

@kathy-phet I think an easy way to address this would be to move the ExpandCollapseButton to the left side of the box. BAA is somewhat unusual in that the ExpandCollapseButton is on the right.

Also, can you remind me what the other issues with the title being interactive were besides the PhET-iO issues? Was there an accessibility issue as well?

I recall one issue was the focus rectangle. It would highlight the entire touch area, but if there was no title then the highlight would obscure some of the box content. In that case, having the touch area around the button only solves the problem.

That's also my recollection @amanda-phet. This was particularly problematic for accordion boxes which have a hidden title when expanded.

[pixelzoom]

@kathy-phet said:

... Let's touch base next week at status briefly.

Labeling with meeting:design, and I will try to remember to bring it up at status meeting.

[ariel-phet]

I have no issue with limiting the touch area to generally around the open/close button, that seems totally natural.

@pixelzoom couldn't this button however default have an asymmetric touch area that extends some amount to the left or right? So for instance for open close buttons on the left of the accordion box it extends 50 px or something to right by default. Just to give a more generous touch area regardless of title width? I understand that accordion box does not know the size of the title, but we usually have soem fairly constant negative space between the button and start of the title, it seems no harm in giving that space to couch area.

Agreed with @arouinfar comment that the open close buttons on the right of the accordion box in BAA is a bit odd...I think we might have been overly concerned about occlusion issues when that sim was designed, but I think we could make those work just find on the left.

[pixelzoom]

@ariel-phet asked:

@pixelzoom couldn't this button however default have an asymmetric touch area that extends some amount to the left or right? So for instance for open close buttons on the left of the accordion box it extends 50 px or something to right by default. Just to give a more generous touch area regardless of title width?

Making the pointer areas of the expand/collapse button configurable is relatively easy, and that is what is planned in #500. But we're discussing whether the title should be interactive here, and that feature should not be misused to make the title appear to be interactive.

[pixelzoom]

Agreed with @arouinfar comment that the open close buttons on the right of the accordion box in BAA is a bit odd...

RPAL also has expand/collapse buttons on the right, and it was one of the first sims (maybe the first sim) to have an AccordionBox. If we want standardization, then we should remove the buttonAlign option from AccordionBox.

[pixelzoom]

List of sims that use buttonAlign: 'right', expand/collapse button on the right:

balancing-chemical-equations
build-an-atom
fluid-pressure-and-flow
isotopes-and-atomic-mass
models-of-the-hydrogen-atom
plinko-probability
reactants-products-and-leftovers
states-of-matter

[kathy-phet]

I do recall that the RHS alignment was on purpose to bring the words closer to the atom itself. I think we had tried the original LHS and it felt disconnected during the design process.

[pixelzoom]

@kathy-phet are you referring to build-an-atom?

[kathy-phet]

Yes

…

Sent from my iPhone On May 1, 2019, at 12:28 PM, Chris Malley <notifications@github.com<mailto:notifications@github.com>> wrote: @kathy-phet<https://github.com/kathy-phet> are you referring to build-an-atom? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#502 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABG4KZH5FKFYTXJQ6GYEPJLPTHOK5ANCNFSM4HISPLJA>.

[pixelzoom]

Whether the location of the button should be standardized seems like a tangential issue, so please continue the discussion in #504.

[pixelzoom]

5/2/19 status meeting, commented on by @kathy-phet @ariel-phet @jbphet @amanda-phet @arouinfar @samreid @chrisklus @jessegreenberg.

Consensus is that I will put things back they way it was before #477, and will solve the PhET-iO problem (disabling title interactivity when button is invisible) a different way. I'm going to do the work in #477, which I will reopen.