Skip to content

Commit

Permalink
use nested options object for HelpContent, see #364
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessegreenberg
jessegreenberg committed Apr 10, 2018
1 parent 958b1ad commit cdbbfe3
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 44 deletions.
16 changes: 12 additions & 4 deletions js/keyboard/help/GeneralNavigationHelpContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,22 +55,28 @@ define( function( require ) {
var moveToNextItemText = new RichText( keyboardHelpDialogMoveToNextItemString, labelOptions );
var moveToNextItemIcon = new TabKeyNode();
var moveToNextItemRow = HelpContent.labelWithIcon( moveToNextItemText, moveToNextItemIcon, {
a11yIconLabelContent: keyboardHelpDialogTabDescriptionString
iconOptions: {
innerContent: keyboardHelpDialogTabDescriptionString
}
} );

// 'move to previous item' content
var moveToPreviousItemText = new RichText( keyboardHelpDialogMoveToPreviousItemString, labelOptions );
var tabIcon = new TabKeyNode();
var moveToPreviousItemIcon = HelpContent.shiftPlusIcon( tabIcon );
var moveToPreviousItemRow = HelpContent.labelWithIcon( moveToPreviousItemText, moveToPreviousItemIcon, {
a11yIconLabelContent: keyboardHelpDialogShiftTabDescriptionString
iconOptions: {
innerContent: keyboardHelpDialogShiftTabDescriptionString
}
} );

// 'exit a dialog' content
var exitADialogText = new RichText( keyboardHelpDialogExitADialogString, labelOptions );
var exitADialogIcon = new EscapeKeyNode();
var exitADialogRow = HelpContent.labelWithIcon( exitADialogText, exitADialogIcon, {
a11yIconLabelContent: keyboardHelpDialogExitDialogDescriptionString
iconOptions: {
innerContent: keyboardHelpDialogExitDialogDescriptionString
}
} );

var content = [];
Expand All @@ -86,7 +92,9 @@ define( function( require ) {
var upDownArrowsIcon = HelpContent.upDownArrowKeysRowIcon();
var leftRightOrUpDownIcon = HelpContent.iconOrIcon( leftRightArrowsIcon, upDownArrowsIcon );
var moveBetweenItemsInAGroupRow = HelpContent.labelWithIcon( moveBetweenItemsInAGroupText, leftRightOrUpDownIcon, {
a11yIconLabelContent: keyboardHelpDialogGroupNavigationDescriptionString
iconOptions: {
innerContent: keyboardHelpDialogGroupNavigationDescriptionString
}
} );

content = [ moveToNextItemRow, moveToPreviousItemRow, moveBetweenItemsInAGroupRow, exitADialogRow ];
Expand Down
49 changes: 14 additions & 35 deletions js/keyboard/help/HelpContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,33 +149,18 @@ define( function( require ) {
align: 'center',
labelFirst: true,
matchHorizontal: false,

// a11y options to pass through to the entry for the help content
a11yIconTagName: 'li',
a11yIconLabelTagName: null,
a11yIconContainerTagName: null,
a11yIconLabelContent: null,
iconOptions: null // specific options for the icon mostly to add a11y content, extended with defaults below
}, options );
assert && assert( !options.children, 'children are not optional' );

options.iconOptions = _.extend( {
tagName: 'li'
}, options.iconOptions );

// make the label and icon the same height so that they will align when we assemble help content group
var labelIconGroup = new AlignGroup( options );
var labelBox = labelIconGroup.createBox( label );
var iconBox = labelIconGroup.createBox( icon );

// add a11y to the icon Prevent blowing away a default with "null"
if( options.a11yIconTagName ){
iconBox.tagName = options.a11yIconTagName;
}
if( options.a11yIconLabelTagName ){
iconBox.labelTagName = options.a11yIconLabelTagName;
}
if( options.a11yIconLabelContent ){
iconBox.labelContent = options.a11yIconLabelContent;
}
if( options.a11yIconContainerTagName ){
iconBox.containerTagName = options.a11yIconContainerTagName;
}
var iconBox = labelIconGroup.createBox( icon, options.iconOptions );

// options.children = options.labelFirst ? [ label, icon ] : [ icon, label ];
var content = options.labelFirst ? { label: labelBox, icon: iconBox } : { label: iconBox, icon: labelBox };
Expand All @@ -200,13 +185,13 @@ define( function( require ) {
*/
labelWithIconList: function( label, icons, options ) {

// all options apply to iconsVBox and are passed directly to it
options = _.extend( {
verticalSpacing: DEFAULT_VERTICAL_ICON_SPACING * .75, // less than the normal vertical icon spacing since it is a group

// a11y options to pass through to the entry for the whole list, by default, this is just another list item
a11yIconTagName: 'li',
a11yIconLabelContent: ''
spacing: DEFAULT_VERTICAL_ICON_SPACING * .75, // less than the normal vertical icon spacing since it is a group
align: 'left',
tagName: 'li'
}, options );
assert && assert( !options.children, 'labelWithIconList adds its own children' );

// horizontally align the label with the first item in the list of icons, guarantees that the label and first
// icon have identical heights
Expand All @@ -230,16 +215,10 @@ define( function( require ) {
}
iconsWithOrText.push( icons[ icons.length - 1 ] );

// place icons in a VBox
var iconsVBox = new VBox( {
// place icons in a VBox, passing through optional spacing and a11y representation
var iconsVBox = new VBox( _.extend( {
children: iconsWithOrText,
spacing: options.verticalSpacing,
align: 'left',

// a11y
tagName: options.a11yIconTagName,
labelContent: options.a11yIconLabelContent
} );
}, options ) );

// make the label the same height as the icon list by aligning them in a box that matches height
var groupOptions = { yAlign: 'top' };
Expand Down
18 changes: 13 additions & 5 deletions js/keyboard/help/SliderControlsHelpContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ define( function( require ) {
var adjustSliderUpDownIcon = HelpContent.upDownArrowKeysRowIcon();
var adjustSliderIcon = HelpContent.iconOrIcon( adjustSliderLeftRightIcon, adjustSliderUpDownIcon );
var adjustSliderRow = HelpContent.labelWithIcon( adjustSliderText, adjustSliderIcon, {
a11yIconLabelContent: keyboardHelpDialogAdjustDefaultStepsString
iconOptions: {
innerContent: keyboardHelpDialogAdjustDefaultStepsString
}
} );

// 'move in smaller steps' content
Expand All @@ -74,7 +76,7 @@ define( function( require ) {
var shiftPlusUpDownIcon = HelpContent.shiftPlusIcon( smallStepsUpDownIcon );

var adjustSliderInSmallerStepsRow = HelpContent.labelWithIconList( adjustInSmallerStepsText, [ shiftPlusLeftRightIcon, shiftPlusUpDownIcon ], {
a11yIconLabelContent: keyboardHelpDialogAdjustSmallerStepsString
innerContent: keyboardHelpDialogAdjustSmallerStepsString
} );

// 'move in larger steps' content
Expand All @@ -86,21 +88,27 @@ define( function( require ) {
spacing: HelpContent.DEFAULT_ICON_SPACING
} );
var adjustInLargerStepsRow = HelpContent.labelWithIcon( adjustInLargerStepsText, pageUpPageDownIcon, {
a11yIconLabelContent: keyboardHelpDialogAdjustLargerStepsString
iconOptions: {
innerContent: keyboardHelpDialogAdjustLargerStepsString
}
} );

// 'move to minimum value' content
var jumpToMinimumText = new RichText( keyboardHelpDialogJumpToMinimumString, DEFAULT_LABEL_OPTIONS );
var homeKeyNode = new HomeKeyNode();
var jumpToMinimumRow = HelpContent.labelWithIcon( jumpToMinimumText, homeKeyNode, {
a11yIconLabelContent: keyboardHelpDialogJumpToHomeString
iconOptions: {
innerContent: keyboardHelpDialogJumpToHomeString
}
} );

// 'move to maximum value' content
var jumpToMaximumText = new RichText( keyboardHelpDialogJumpToMaximumString, DEFAULT_LABEL_OPTIONS );
var endKeyNode = new EndKeyNode();
var jumpToMaximumRow = HelpContent.labelWithIcon( jumpToMaximumText, endKeyNode, {
a11yIconLabelContent: keyboardHelpDialogJumpToEndString
iconOptions: {
innerContent: keyboardHelpDialogJumpToEndString
}
} );

// assemble final content for HelpContent
Expand Down

0 comments on commit cdbbfe3

Please sign in to comment.