new yaml added to md files, new parent md files added, see phetsims/b…

…inder#15 and phetsims/binder#21

doc/AccordionBox.md

@@ -1,3 +1,9 @@
+---
+title: Accordion Box
+components: [ ExpandCollapseButton ]
+category: other-ui
+---
+
 ## General Design Considerations
 Here’s when and why we use accordion boxes:
 * Default state can be expanded or collapsed depending on how the designer wants to scaffold the user interaction. A closed panel can be used to keep the default opening condition of sim from being visually overwhelming, and suggesting a logical route for exploration, for example in Build an Atom and in GE:B (what's GE:B?).
@@ -53,9 +59,9 @@ Adapted from: ARIA Pracrices 1.1, [section 3.1 Accordion](https://www.w3.org/TR/
 | Role | Attribute | Element | Usage |
 | ---- | --------- | ------- | ----- |
 | -- | -- | button | The title content of each accordion header is contained in an element with role button.|
-| -- | -- | `h3` (or appropriate level) | PhET Sims use native HTML, so we use native heading and button elements to create the accordion header. | The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element. | 
+| -- | -- | `h3` (or appropriate level) | PhET Sims use native HTML, so we use native heading and button elements to create the accordion header. | The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element. |
 | - | `aria-expanded="true/false"` | div | Added to accordion panel dynamically with Javascript to indicate when the panel associated with the header is visible (`aria-expanded="true"`), or if the panel is not visible, `aria-expanded` is set to `false`.|
-| - | aria-controls="[ID REF of element contianing accordion panel]"| 
+| - | aria-controls="[ID REF of element contianing accordion panel]"|
 | button | - |
 | - | aria-disabled="true"| - | If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has `aria-disabled` set to true. (I think this is NOT RELEVANT for PhET sims?) |
 | region (optional) | `aria-labelledby=[ID REF of button that controls the display of the panel]` | `div` | - |
@@ -89,7 +95,7 @@ Adapted from: ARIA Pracrices 1.1, [section 3.1 Accordion](https://www.w3.org/TR/
 - Accessible Name: content for the accordon box title
 	 - Header contains a title? Yes/No, default Yes
 	 - Title is a heading? Yes/No, defaults to Yes
-	 - If title is heading, set heading level, defaults to H3 
+	 - If title is heading, set heading level, defaults to H3
 	 - Accordion Title Hidden: Yes/No (defaults to No)
 - Accordion Box Content (panel):
 	- Parent container accordion box contents: defaults to a div

doc/Checkbox.md

@@ -1,4 +1,7 @@
-
+---
+title: Checkbox
+category: other-ui
+---
 ## General Design Considerations
 
 Here’s the when and why we use a checkbox (traditional looking user interface component) in simulation design.

doc/ComboBox.md

@@ -1,3 +1,8 @@
+---
+title: ComboBox
+category: other-ui
+---
+
 ## General Design Considerations
 
 * Generally used with limited space and/or a long list of choices
@@ -41,15 +46,15 @@ ToDO.
 |   -   | `aria-expanded="true"` |  `button` |  Set by the JavaScript when the listbox is displayed.  Otherwise, is not present. |
 |   -   | `aria-labelledby="listbox-static-label listbox-option-dynamic-label"` |  button |  Reads out a combined name for the interaction when focus is placed on the button, first the name for the "combobox interaction", then the name of the selected option. Javascript sets the inner content of the button to be the selected item. |
 | `role="listbox"` | - | `ul` | Identifies the focusable element that has listbox behaviors and contains the listbox options. |
-| - | `aria-labelledby="listbox-static-label"` | ul | Refers to the element containing the listbox label (i.e., the accessible name for the listbox). | 
-| - | `tabindex="-1"` | ul | - Makes the `listbox` focusable. 
+| - | `aria-labelledby="listbox-static-label"` | ul | Refers to the element containing the listbox label (i.e., the accessible name for the listbox). |
+| - | `tabindex="-1"` | ul | - Makes the `listbox` focusable.
 - The JavaScript sets focus on the `listbox` when the `listbox` is displayed. |
 | -    | `aria-activedescendent` | -   | - Set by the JavaScript when the listbox is displayed and sets focus on the listbox; otherwise is not present.
 - Refers to the option in the listbox that is visually indicated as having keyboard focus.
 - When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
 - Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the ul element. |
 | `role="option"` | -| `li` | Identifies each selectable element containing the name of an option. |
-| - | `aria-selected="true"`| `li` | - Indicates that the option is selected. 
+| - | `aria-selected="true"`| `li` | - Indicates that the option is selected.
 - Applied to the element with role option that is visually styled as selected.
 - Set by the Javascript when Enter is pressed on the option referenced by `aria-activedescendant`.  
 - Note that in an auto-select `listbox` where selection follows focus, the option with this attribute is always the same as the option that is referenced by `aria-activedescendant`. |
@@ -60,7 +65,7 @@ The PhET combobox interaction, visually looks and behaves as a combobox; however
 
 **Note:** The HTML for this interaction may change when the ARIA role `combobox` has better support accross assitive technologies.
 
-#### Molarity Example (10 options) 
+#### Molarity Example (10 options)
 ```html
 	<div tabindex="-1" id="container-for-labels">
 	<span id="listbox-static-label">Solute</span>
@@ -86,13 +91,13 @@ The PhET combobox interaction, visually looks and behaves as a combobox; however
 
 ### Design Doc Content Template Text
 **Solute Combobox**
-* Accessible Name for combobox interaction (i.e., lisbox label): (e.g. Solute) 
+* Accessible Name for combobox interaction (i.e., lisbox label): (e.g. Solute)
 * Accessible name for pop-up button is dynamic: {{Selected list item, e.g. Drink Mix}}
 * Listbox: ul with role="listbox"
 * Listbox items: li's with role="option"
 * List Item 1 (e.g., Drink Mix)
 * List Item 2 (e.g., Cobalt (II) nitrate)
 * List Item 3
 * Or as listed in simulation
-* (Optional) Help Text: 
+* (Optional) Help Text:
 

doc/HSlider.md

@@ -0,0 +1,6 @@
+---
+title: Horizontal Slider
+category: slider
+---
+
+### Information specific to the HSlider Type

doc/OtherUI.md

@@ -0,0 +1,8 @@
+---
+title: Other UI Components
+category: other-ui
+parent: true
+components: [ AccordionBox, Checkbox, ComboBox, RadioButtonGroup ]
+---
+
+Here's the general information about the misc. UI components listed below.

doc/PushButtons.md

@@ -0,0 +1,8 @@
+---
+title: Push Buttons
+category: push-buttons
+parent: true
+components: [ RoundPushButton, RectangularPushButton, HTMLPushButton ]
+---
+
+Common info or all push buttons.

doc/RadioButtonGroup.md

@@ -1,6 +1,7 @@
 ---
-components: VerticalAquaRadioButtonGroup, RadioButtonGroup
+components: [ VerticalAquaRadioButtonGroup, RadioButtonGroup ]
 title: Radio Button Groups
+category: other-ui
 ---
 
 ## General Design Considerations

doc/Sliders.md

@@ -0,0 +1,11 @@
+---
+title: Sliders
+components: [ HSlider, FrequencySlider, WavelengthSlider ]
+accessible-patterns: AccessibleSlider
+parent: true
+category: sliders
+---
+
+Here's some great information about sliders.
+
+Here are our subtypes:

doc/ToggleButtons.md

@@ -0,0 +1,8 @@
+---
+title: Toggle Buttons
+parent: true
+category: toggle-buttons
+components: [ RoundStickyToggleButton, RectangularStickyToggleButton ]
+---
+
+General information about the PhET Toggle buttons.

doc/accessibility/AccessibleSlider.md

@@ -1,3 +1,6 @@
-### AccessibleSlider
+---
+title: Accessible Slider
+category: slider
+---
 
 This markdown will describe the accessible interaction of PhET's "slider-like" elements.