HTML of Keyboard Shortcuts Dialog - empty li's, too many p's and div's

[terracoda]

While testing, I noticed some weird spacing in the A11y View, so I inspected the HTML for the keyboard shortcuts dialog.
Screen shot from inspector

A div element cannot be direct child of an ul element

It is ok if div elements contain things that need to stick together in the PDOM. It's important that they do not come between natural parent and child elements.

The lists in the Keyboard Shortcuts dialog should be like this:

<h2>Move or Jump Grabbed Balloon</h2>
<ul>
  <li>Move grabbed balloon up, left, down, or right with Arrow keys or with letter keys W, A, S, or D.</li>
  <li>Move slower with shift plus Arrow keys or Shift plus letter keys W, A, S, or D.</li>
  <li>Jump close to sweater with J plus S.</li>
  <li>Jump to wall with J plus W.</li>
  <li>Jump to near wall with J plus N.</li>
  <li>Jump to center with J plus C.</li>
</ul>

Here's the ideal fix:

• The API should require that an li element is required to be a direct child of its parent ul
• Use the li tag itself to wrap the content of the list item, rather than adding an extra p tag.
• If you must use a p tag, it needs to go inside the li.
• Same for the div elements. If possible, do not add extra divs. If not possible, the div and/or the p have to be inside the li.
• If the purpose of the div is to "keep related content together for placing in the PDOM", it would be better to contain the parent ul, or contain the parent ul together with its labeling heading than to contain individual list items.

Additionally, removing the p should improvement the visual layout of the the bulleted lists in the A11y View:

[terracoda]

This sim is in Dev Testing, so tagging phetsims/qa/issues/112.

[terracoda]

@jessegreenberg, if you need me to provide a full example of the Keyboard Help dialog HTML, I can do that.

[jessegreenberg]

Thanks @terracoda, I shouldn't need a full example, I think you already provided one earlier. This is caused by recent changes to the API, and usages of the API in the sim haven't been updated. Early versions of BASE did not have this problem.

[terracoda]

Ok, understood. I thought that recent changes to API might be the cause.

[jessegreenberg]

This was fixed as part of phetsims/scenery-phet#364, and the HTML is sound again (no divs, no ps, and lis are direct descendants of uls).

Closing.