Create Energy Measurement Tools heading

[arouinfar]

Experimenting with the Energy Balance and Flux Meter can require lots of tabbing for screen reader users. A common interaction pattern for screen reader users is to jump through the content by headings. Grouping these controls under a heading would streamline navigation.

We would like to create a new heading "Energy Measurement Tools", level H3, to contain the Energy Balance and Flux Meter.

• H2: Play Area
  • H3: Energy Measurement Tools
  • Energy Balance Checkbox
  • Flux Meter Checkbox (screens 2 & 3)
  • Flux Meter Altitude Slider (when applicable)

Assigning to @jbphet

[jbphet]

I've implemented something that seems to get us to the desired behavior, and reviewed it with @arouinfar over Zoom, and she agreed that it looked good. I'd like to double check with @jessegreenberg before saying this is done though. The thing that feels a little odd to me is that, while in some cases all the energy measurement tools appear to be under the new heading, some are together in the same div while others aren't. Neither @arouinfar nor I think this matters, but we don't have enough experience with PDOM structure to feel confident.

These screenshots help to illustrate my question. Here is what the PDOM structure looks like in the a11y view, and this is what we're after:

This one shows how the Energy Balance and Flux Meter checkboxes are in the same div (because they are together in a Node in the sim's scene graph), but the flux meter's altitude slider isn't in that div.

[jbphet]

I just reviewed this with @jessegreenberg over Zoom, and he feels like the structure that I've implemented here is reasonable. Since @arouinfar has already reviewed the behavior, I think we can close this one.