Skip to content

Commit

Permalink
Rename helpText -> accessibleHelpText, see phetsims/scenery#1688
Browse files Browse the repository at this point in the history
  • Loading branch information
jessegreenberg committed Feb 13, 2025
1 parent 6bf1639 commit 9d89623
Show file tree
Hide file tree
Showing 9 changed files with 20 additions and 20 deletions.
2 changes: 1 addition & 1 deletion doc/Checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ checkbox widgets is not relevant. I have adapted the content from the ARIA pract
or name for the group.
- When the presentation includes additional descriptive static text (i.e., help text) relevant to a checkbox or group of
checkboxes, using `aria-describedby` is an option to provide automatically read help text. We have, however, that
automatic helptext is not needed in our sims. Users seem to prefer on-demand help text.
automatic accessibleHelpText is not needed in our sims. Users seem to prefer on-demand help text.

### Simplified HTML Examples for PDOM

Expand Down
2 changes: 1 addition & 1 deletion js/ABSwitch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export default class ABSwitch<T> extends HBox {
this.toggleSwitch = toggleSwitch;
this.setLabelEnabled = options.setLabelEnabled;

// pdom - Setting helpText on ABSwitch forwards the values to the actual ToggleSwitch.
// pdom - Setting accessibleHelpText on ABSwitch forwards the values to the actual ToggleSwitch.
ParallelDOM.forwardHelpText( this, toggleSwitch );

// Find accessible names from the labels if optional values were not provided.
Expand Down
14 changes: 7 additions & 7 deletions js/AccordionBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,13 @@ type SelfOptions = {
contextResponseExpanded?: TAlertable;
contextResponseCollapsed?: TAlertable;

// pdom - AccordionBoxes usually don't have helpText. If they do, the content is usually only available
// pdom - AccordionBoxes usually don't have accessibleHelpText. If they do, the content is usually only available
// when collapsed. There is one option for each state.
helpTextExpanded?: PDOMValueType | null;
helpTextCollapsed?: PDOMValueType | null;

// voicing - AccordionBoxes usually don't have helpText, so default values for voicing are not
// set from helpText. Usually, the hint response is removed when the accordion box is expanded.
// voicing - AccordionBoxes usually don't have accessibleHelpText, so default values for voicing are not
// set from accessibleHelpText. Usually, the hint response is removed when the accordion box is expanded.
// There is one option for each state.
voicingHintResponseExpanded?: ResolvedResponse;
voicingHintResponseCollapsed?: ResolvedResponse;
Expand Down Expand Up @@ -432,12 +432,12 @@ export default class AccordionBox extends Sizable( Node ) {
} );
this.addChild( pdomContainerNode );

// So that setting accessibleName and helpText on AccordionBox forwards it to the correct subcomponents for the
// So that setting accessibleName and accessibleHelpText on AccordionBox forwards it to the correct subcomponents for the
// accessibility implemenation.
ParallelDOM.forwardAccessibleName( this, this.expandCollapseButton );
this.helpTextBehavior = ( node, options, helpText, forwardingCallbacks ) => {
this.accessibleHelpTextBehavior = ( node, options, accessibleHelpText, forwardingCallbacks ) => {
forwardingCallbacks.push( () => {
pdomHelpTextNode.innerContent = helpText;
pdomHelpTextNode.innerContent = accessibleHelpText;
} );
return options;
};
Expand Down Expand Up @@ -485,7 +485,7 @@ export default class AccordionBox extends Sizable( Node ) {

pdomContainerNode.setPDOMAttribute( 'aria-hidden', !expanded );

this.helpText = expanded ? options.helpTextExpanded : options.helpTextCollapsed;
this.accessibleHelpText = expanded ? options.helpTextExpanded : options.helpTextCollapsed;
this.expandCollapseButton.voicingHintResponse = expanded ? options.voicingHintResponseExpanded : options.voicingHintResponseCollapsed;

const contextResponse = expanded ? options.contextResponseExpanded : options.contextResponseCollapsed;
Expand Down
4 changes: 2 additions & 2 deletions js/AquaRadioButtonGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default class AquaRadioButtonGroup<T> extends FlowBox {
tagName: 'ul',
labelTagName: 'h3',
ariaRole: 'radiogroup',
helpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT,
accessibleHelpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT,
groupFocusHighlight: true
}, providedOptions );

Expand Down Expand Up @@ -150,7 +150,7 @@ export default class AquaRadioButtonGroup<T> extends FlowBox {
else {
targetButton.voicingSpeakFullResponse( {
contextResponse: null,
hintResponse: this.helpText
hintResponse: this.accessibleHelpText
} );
}
}
Expand Down
2 changes: 1 addition & 1 deletion js/Checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export default class Checkbox extends WidthSizable( Voicing( Node ) ) {
voicingCheckedObjectResponse: null,
voicingUncheckedObjectResponse: null,
accessibleNameBehavior: Voicing.BASIC_ACCESSIBLE_NAME_BEHAVIOR,
helpTextBehavior: Voicing.BASIC_HELP_TEXT_BEHAVIOR,
accessibleHelpTextBehavior: Voicing.BASIC_HELP_TEXT_BEHAVIOR,

// Utterances to be spoken with a screen reader after the checkbox is pressed. Also used for
// the voicingContextResponse
Expand Down
10 changes: 5 additions & 5 deletions js/ComboBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,17 +88,17 @@ export type ComboBoxItemNoNode<T> = StrictOmit<ComboBoxItem<T>, 'createNode'>;
export type ComboBoxListPosition = typeof LIST_POSITION_VALUES[number];
export type ComboBoxAlign = typeof ALIGN_VALUES[number];

// The definition for how ComboBox sets its accessibleName and helpText in the PDOM. Forward it onto its button. See
// The definition for how ComboBox sets its accessibleName and accessibleHelpText in the PDOM. Forward it onto its button. See
// ComboBox.md for further style guide and documentation on the pattern.
const ACCESSIBLE_NAME_BEHAVIOR: PDOMBehaviorFunction = ( node, options, accessibleName, otherNodeCallbacks ) => {
otherNodeCallbacks.push( () => {
( node as ComboBox<unknown> ).button.accessibleName = accessibleName;
} );
return options;
};
const HELP_TEXT_BEHAVIOR: PDOMBehaviorFunction = ( node, options, helpText, otherNodeCallbacks ) => {
const HELP_TEXT_BEHAVIOR: PDOMBehaviorFunction = ( node, options, accessibleHelpText, otherNodeCallbacks ) => {
otherNodeCallbacks.push( () => {
( node as ComboBox<unknown> ).button.helpText = helpText;
( node as ComboBox<unknown> ).button.accessibleHelpText = accessibleHelpText;
} );
return options;
};
Expand Down Expand Up @@ -248,7 +248,7 @@ export default class ComboBox<T> extends WidthSizable( Node ) {
tagName: 'div', // must have accessible content to support behavior functions
buttonLabelTagName: 'p',
accessibleNameBehavior: ACCESSIBLE_NAME_BEHAVIOR,
helpTextBehavior: HELP_TEXT_BEHAVIOR,
accessibleHelpTextBehavior: HELP_TEXT_BEHAVIOR,

comboBoxVoicingNameResponsePattern: SunConstants.VALUE_NAMED_PLACEHOLDER,
comboBoxVoicingContextResponse: null,
Expand Down Expand Up @@ -312,7 +312,7 @@ export default class ComboBox<T> extends WidthSizable( Node ) {

comboBoxVoicingNameResponsePattern: options.comboBoxVoicingNameResponsePattern,

// pdom - accessibleName and helpText are set via behavior functions on the ComboBox
// pdom - accessibleName and accessibleHelpText are set via behavior functions on the ComboBox
labelTagName: options.buttonLabelTagName,

// phet-io
Expand Down
2 changes: 1 addition & 1 deletion js/Panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const DEFAULT_OPTIONS: OptionizeDefaults<SelfOptions, SuperOptions> = {

// pdom
labelTagName: 'span', // A labelTagName ensures the accessibleName gets its own tag before child content.
helpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT // Help text comes first for Nodes that are content containers.
accessibleHelpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT // Help text comes first for Nodes that are content containers.
};
assert && Object.freeze( DEFAULT_OPTIONS );

Expand Down
2 changes: 1 addition & 1 deletion js/buttons/RectangularRadioButtonGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export default class RectangularRadioButtonGroup<T> extends FlowBox {
tagName: 'ul',
labelTagName: 'h3',
ariaRole: 'radiogroup',
helpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT,
accessibleHelpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT,
groupFocusHighlight: true
}, providedOptions );

Expand Down
2 changes: 1 addition & 1 deletion js/demo/buttons/demoAquaRadioButtonGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function demoAquaRadioButtonGroup( layoutBounds: Bounds2 ): Node

// pdom
accessibleName: 'Vertical AquaRadioButtonGroup',
helpText: 'This is a description of the vertical AquaRadioButtonGroup.'
accessibleHelpText: 'This is a description of the vertical AquaRadioButtonGroup.'
} );

// pdom - context response for the changing value
Expand Down

0 comments on commit 9d89623

Please sign in to comment.