Skip to content

Commit

Permalink
ToggleSwitch optionally adds aria attributes for accessibility, see p…
Browse files Browse the repository at this point in the history
  • Loading branch information
jessegreenberg committed Nov 6, 2024
1 parent f9f6b98 commit bf64f68
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 6 deletions.
6 changes: 5 additions & 1 deletion js/ABSwitch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,11 @@ export default class ABSwitch<T> extends HBox {

const toggleSwitch = new ToggleSwitch<T>( property, valueA, valueB,
combineOptions<ToggleSwitchOptions>( {
tandem: options.tandem.createTandem( 'toggleSwitch' )
tandem: options.tandem.createTandem( 'toggleSwitch' ),

// Aria switch attributes do not accurately describe switches with more than a binary state.
// Instead, custom accessible names are used to describe the switch state.
accessibleSwitch: false
}, options.toggleSwitchOptions ) );

let nodeA = labelA;
Expand Down
21 changes: 16 additions & 5 deletions js/ToggleSwitch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ type SelfOptions = {
// and Interactive Description features when value changes to either left or right value.
leftValueContextResponse?: TAlertable;
rightValueContextResponse?: TAlertable;

// pdom - If true, aria attributes are added to this Node to indicate that it is a switch.
// Aria switches do not work well when selecting between non-boolean values, so you can disable this if needed.
accessibleSwitch?: boolean;
};
type ParentOptions = VoicingOptions & NodeOptions;
export type ToggleSwitchOptions = SelfOptions & ParentOptions;
Expand Down Expand Up @@ -140,7 +144,7 @@ export default class ToggleSwitch<T> extends Voicing( Node ) {

// pdom
tagName: 'button',
ariaRole: 'switch',
accessibleSwitch: true,

// a11y (both voicing and pdom)
a11yName: null,
Expand Down Expand Up @@ -224,12 +228,19 @@ export default class ToggleSwitch<T> extends Voicing( Node ) {
}
rightTrackFillRectangle.rectWidth = thumbNode.right - halfLineWidth;

// pdom - Signify to screen readers that the toggle is pressed. Both aria-pressed and aria-checked
// are used because using both sounds best with NVDA.
this.setPDOMAttribute( 'aria-pressed', value !== leftValue );
this.setPDOMAttribute( 'aria-checked', value !== leftValue );
if ( options.accessibleSwitch ) {

// pdom - Signify to screen readers that the toggle is pressed. Both aria-pressed and aria-checked
// are used because using both sounds best with NVDA.
this.setPDOMAttribute( 'aria-pressed', value !== leftValue );
this.setPDOMAttribute( 'aria-checked', value !== leftValue );
}
};

if ( options.accessibleSwitch ) {
this.ariaRole = 'switch';
}

// sync with property, must be unlinked in dispose
property.link( update );

Expand Down

0 comments on commit bf64f68

Please sign in to comment.