diff --git a/doc/AccordionBox.md b/doc/AccordionBox.md index c3d504fd..b4a8814e 100644 --- a/doc/AccordionBox.md +++ b/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 diff --git a/doc/Checkbox.md b/doc/Checkbox.md index 9977b615..b7fcb91b 100644 --- a/doc/Checkbox.md +++ b/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. diff --git a/doc/ComboBox.md b/doc/ComboBox.md index 74bfb3dc..4e00a4bf 100644 --- a/doc/ComboBox.md +++ b/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
Solute @@ -86,7 +91,7 @@ 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" @@ -94,5 +99,5 @@ The PhET combobox interaction, visually looks and behaves as a combobox; however * List Item 2 (e.g., Cobalt (II) nitrate) * List Item 3 * Or as listed in simulation -* (Optional) Help Text: +* (Optional) Help Text: diff --git a/doc/HSlider.md b/doc/HSlider.md new file mode 100644 index 00000000..62f87c8a --- /dev/null +++ b/doc/HSlider.md @@ -0,0 +1,6 @@ +--- +title: Horizontal Slider +category: slider +--- + +### Information specific to the HSlider Type \ No newline at end of file diff --git a/doc/OtherUI.md b/doc/OtherUI.md new file mode 100644 index 00000000..65c1b053 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/doc/PushButtons.md b/doc/PushButtons.md new file mode 100644 index 00000000..00826d28 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/doc/RadioButtonGroup.md b/doc/RadioButtonGroup.md index ed282528..e949798a 100644 --- a/doc/RadioButtonGroup.md +++ b/doc/RadioButtonGroup.md @@ -1,6 +1,7 @@ --- -components: VerticalAquaRadioButtonGroup, RadioButtonGroup +components: [ VerticalAquaRadioButtonGroup, RadioButtonGroup ] title: Radio Button Groups +category: other-ui --- ## General Design Considerations diff --git a/doc/Sliders.md b/doc/Sliders.md new file mode 100644 index 00000000..20edb765 --- /dev/null +++ b/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: \ No newline at end of file diff --git a/doc/ToggleButtons.md b/doc/ToggleButtons.md new file mode 100644 index 00000000..3a84ade4 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/doc/accessibility/AccessibleSlider.md b/doc/accessibility/AccessibleSlider.md index e4c39696..49ac2745 100644 --- a/doc/accessibility/AccessibleSlider.md +++ b/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. \ No newline at end of file