Skip to content

KeyboardHelpSection

Overview

KeyboardHelpSection contains a section of text and icons for a KeyboardHelpDialog. Typically multiple KeyboardHelpSections are assembled to describe the keyboard interactions for the sim. Takes a heading string for the section label and an array of contents for rows of labels and icons.

This type has many static functions for creating and laying out rows of content. Default values for spacing and fonts are also available through statics if necessary.

Help sections are aligned with two groups. Text labels are aligned in one VBox, icons are aligned in another. To structure the accessible content, we chose to instrument a11y on the icons in the section. To label content in your own KeyboardHelpSection, instrument the icons not the label Text so a11y content is placed correctly in the DOM. KeyboardHelpSections are generally a list of items, so each icon has a tagName of 'li' be default.

@author Jesse Greenberg

Class KeyboardHelpSection

import { KeyboardHelpSection } from 'scenerystack/scenery-phet';

Constructor

new KeyboardHelpSection( headingString : string | TReadOnlyProperty<string>, content : KeyboardHelpSectionRow[], providedOptions? : KeyboardHelpSectionOptions )

Instance Methods

Static Methods

alignHelpSectionIcons( sectionArray : KeyboardHelpSection[] )

Vertically align icons for a number of different KeyboardHelpSections. Useful when two KeyboardHelpSection sections are stacked vertically in a Dialog. Loops through sectionArray and finds the max x value of the left edge of the icon VBox. Then increases spacing of all other content HBoxes accordingly.

Static Properties

DEFAULT_VERTICAL_ICON_SPACING

(readonly)

Type KeyboardHelpSectionOptions

import type { KeyboardHelpSectionOptions } from 'scenerystack/scenery-phet';
  • headingOptions?: RichTextOptions
    propagated to the Text for the section heading
  • textMaxWidth?: number
    Used as maxWidth for each KeyboardHelpSectionRow.text
  • vBoxOptions?: StrictOmit<VBoxOptions, "tagName">
    propagated to VBox for layout
  • a11yContentTagName?: string | null
    tag name for the entire content, usually content is a list of items
  • & ReadingBlockOptions & VBoxOptions

Source Code

See the source for KeyboardHelpSection.ts in the scenery-phet repository.