decide on consistent term for ComboBox's list

[pixelzoom]

Part of #430 is to create ComboBoxListNode, using the standard "list" terminology for this part of combo box (see https://en.wikipedia.org/wiki/Combo_box). But in ComboBoxIO, I see that terminology is different - "popup" is used instead of "list":

  phetioInherit( NodeIO, 'ComboBoxIO', ComboBoxIO, {}, {
    documentation: 'A traditional combo box',
    events: [ 'popupShown', 'popupHidden' ]
  } );

A11y terminology is also slightly different. ComboBox.md describes a11y for combo box, and uses "listBox".

@samreid @jessegreenberg Thoughts on what term we should use for ComboBox's list, and what the class should be named for that list?

[samreid]

"listbox popup" https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
"list box" https://www3.rocketsoftware.com/bluezone/help/v52/en/bzsh/bzaa_aref_list-combo-and-drop-down-list-boxes.htm

So perhaps we should use ListBox or ComboBoxListBox or ComboBoxList.

I'm also noticing that the ComboBoxList looks very similar to the joist PhET menu popup:

Maybe we should have a SUN common code file that shows a number of choices that highlight on rollover and allow you to select them. I'm sure we will need this list component in other sims as well.

Come to think of it--it seems the combo box list box is a lot like a vertical radio button group. Not sure if that helps.

[jessegreenberg]

I also like ListBox, this example is very similar to PhET's ComboBox https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html. ARIA group is calling the whole input with button readout and list a "Collapsible Dropdown Listbox".

EDIT: So maybe that means Listbox (not ListBox), like we decided for Checkbox. Also, should it be Combobox instead of ComboBox?

[jessegreenberg]

At https://www.w3.org/TR/wai-aria-1.1/ I see a few usages of "list box" in documentation so ListBox seems fine.

[pixelzoom]

@samreid said

I'm also noticing that the ComboBoxList looks very similar to the joist PhET menu popup: ...

I do not have time to investigate this. That's the topic of #10, which has been sitting around since Sept 2013.

@jessegreenberg said:

I also like ListBox, .... So maybe that means Listbox (not ListBox), like we decided for Checkbox. Also, should it be Combobox instead of ComboBox?

Aria unfortunately does not use camelcase; by convention, it turns everything to lowercase. For example see https://www.w3.org/TR/wai-aria-practices/#menu. Combo Box -> combobox, Menu Bar -> menubar, List Box -> listbox. That convention is not a good fit for PhET, and I recommend that we stick with camelcase. CheckBox was changed to Checkbox because that is it's most common syntax, see https://en.wikipedia.org/wiki/Checkbox.

So...

From the above comments, I surmise that "list box" is the correct a11y term, and pheti-io would be happy using the a11y term.

Since this is going to be its own .js file, ListBox seems a bit too general -- and I do not have time (or interest) to investigate generalization for use with menus, as @samreid identified in #440 (comment).

Some options:

class	a11y	phet-io	cons?
ListBox	listBox	listBox	too general? doesn't have "Node" suffix for phet-io
ComboBoxList	listBox	listBox	doesn't match Aria name, doesn't have "Node" suffix for phet-io
ComboBoxListBox	listBox	listBox	"ListBox" twice, doesn't have "Node" suffix for phet-io
ComboBoxListNode	listBox	listNode	doesn't match Aria name

@jessegreenberg @samreid thoughts?

[pixelzoom]

I said:

From the above comments, I surmise that "list box" is the correct a11y term, and pheti-io would be happy using the a11y term.

@samreid is that really true? Will you be OK if this list does not have a tandem name that has "Node" suffix?

I.e., this:

this.listBox = new ListBox( ..., {
  tandem.createTandem( 'listBox' )
} );

versus this:

this.listNode= new ListNode( ..., {
  tandem.createTandem( 'listNode' )
} );

[samreid]

Yes, listBox seems good. Not all nodes need to end with a *Node suffix. For example, RoundPushButton is not RoundPushButtonNode.

[pixelzoom]

@samreid Could you please identify which option in #440 (comment) you prefer? I'm not a fan of ListBox for the class name.

If we went with ComboBoxListBox, here's what that would look like in contex. Does this seem OK?

//ComboBoxListBox.js
ariaRole: 'listbox',

// ComboBox.js
this.listBox = new ComboBoxListBox( ..., { 
  tandem: tandem.createTandem( 'listBox' )
} );

[samreid]

That seems to be the best option, thanks!

[jessegreenberg]

ComboBoxListBox sounds good.

[pixelzoom]

OK, I will proceed with ComboBoxListBox, as in #440 (comment).

[pixelzoom]

Noted decisions in #430 (comment), closing.