RadioButtonGroup.md General Design Considerations, etc

[terracoda]

@amanda-phet and @arouinfar, I have committed my contributions to the RadioButtonGroup.md which now lives here https://github.com/phetsims/sun/blob/master/doc/RadioButtonGroup.md

I didn't add a section for the keyboard dialog, nor did I separate out example screen reader utterances. I created a section called "PhET Components" near the bottom, but I am not sure that's the best spot yet.

Please go to town on the General design sections, and I am happy to get feedback on any aspect of the document.

[terracoda]

Please assign me if you have any questions for me, thanks.

[arouinfar]

In the above commit, I updated the "General Design Considerations" and "Aesthetic Considerations" to match the Style Guide working doc.

We still need to flesh out how to separate VerticalAquaRadioButtonGroup and RadioButtonGroup so I'll leave this issue open for discussion at next week's meeting.

[arouinfar]

@terracoda did you say you were going to look into VerticalAquaRadioButtonGroup vs RadioButtonGroup? Feel free to unassign yourself if this discussion should be left to the keyboard nav meeting.

[terracoda]

Thanks @arouinfar. I updated the PhET Component section and changed the Design Document Template to a list for formatting purposes.

I also have a question for the meeting, ""Where does RadioButtonGroup.js live?"

I'll un-assign myself for now.

[jessegreenberg]

@terracoda I noticed this has the a11y meeting label, would you like to add this to the agenda of an upcoming a11y meeting?

[terracoda]

@jessegreenberg, I think we decided that the two types of radio button groups can be described in the same markdown file for now.

[terracoda]

@jessegreenberg, I reviewed the Binder Meeting notes from Tuesday. I think I possibly need to split the document up into CommonToAllRadioButtonGroups, RadioButtonGroup, and VerticalAquaRadioButton. I'll double check with @mbarlow12

[terracoda]

I have section on Customized & Grouped Interactions in this tip sheet documenting Design Patterns for Multi-State & Customized Interactions

Examples for the radiogroup interactions in BASE and RaP are provided as examples.

H3: {{name for radiogroup}}, radiogroup
Interaction Type: radiogroup, radiobutton
Accessible name for group:
Use aria-labelledby to read group name automatically: YES/NO
Accessible names, and initial states for each radio button:

• {{name of first radio button}}; Initial state: selected
• {{name of second radio button}}; Initial state: not selected
• {{name of third radio button}}; Initial state: not selected

(Optional) Help Text:
(Optional) Context Responses upon selection (or link to them):
(Optional) Design Note: Special things about this radiogroup, if any.

The above design pattern is the general info that is needed for the Interactive Design Document as of 2022. It can be added to the binder example when there is time.