aria-valuetext is sometimes in the wrong spot in the a11y view

[jessegreenberg]

Mentioned by @terracoda in phetsims/molecules-and-light#290.

In #660 we added aria-valuetext to the a11y-view because it provides very important ouptut (as important as alerts) and it is helpful to see. But the method of inserting it into the a11y view is naive and sometimes puts it in the wrong spot

"fast" aria-valuetext should be right below the slider.

@zepumph has been working on a11y-view improvements lately so assigning to him as part of that work, but let me know if I can help!

[jessegreenberg]

In phetsims/molecules-and-light#290 (comment) @terracoda said

maybe it is time to think about how we could put Object Responses like current aria-valuetext over above the Context Responses, or interwoven with the the Context responses?

[zepumph]

I agree that the algorithm is naive. A quick way to fix this is to surround any item with aria-valuetext with a div, this will place the aria-valuetext display next to the input element because they will be the only two items in the parent.

A better way for this to work may be to have the a11y view pull out any element with aria-valueText, and replace it with a div that has two children: then element with aria-valuetext and the valuetext display.

I'll investigate.

[terracoda]

@zepumph, you could consider using a span element for the aria-valuetext. That might keep things on the same line.

span's are inline generic elements and div's are block-level generic elements.

[zepumph]

Indeed! That said there isn't a ton of horizontal space in the PDOM copy, and aria-valuetext values can be quite long (like a sentence or phrase instead of numeric value+unit).

I'll prototype a few solutions and provide some screen shots for comparison.

[zepumph]

I updated the a11y view to insert the created aria-valuetext display element immediately after the element, and not at the end of the container. @jessegreenberg please review.

I used this snippet (added to your favorite a11y view enabled sim) to see that it was working). The valueText display should go in between the two children.

  this.addChild( new Node( {
    tagName: 'div',
    children: [
      new Node( { tagName: 'p', ariaValueText: 'hello there', innerContent: 'i have valuetext' } ),
      new Node( { tagName: 'p', innerContent: 'the after one' } )
    ]
  } ) );

[jessegreenberg]

This is super nice, and looks great! I just went through a11y views and the valuetext is all nicely under each slider. Closing.