From 93b8d4bd8d45b0bf761b1eaec5519c458390e178 Mon Sep 17 00:00:00 2001 From: zepumph Date: Tue, 30 Jul 2019 16:39:55 -0800 Subject: [PATCH] add accessibility to NumberControl through sliderOptions, added doc, https://github.com/phetsims/scenery-phet/issues/452 --- js/NumberControl.js | 8 ++++++-- js/demo/ComponentsScreenView.js | 6 +++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/js/NumberControl.js b/js/NumberControl.js index ac54d520d..3a8c3a17e 100644 --- a/js/NumberControl.js +++ b/js/NumberControl.js @@ -4,6 +4,9 @@ * Control for changing a Property of type {number}. * Consists of a labeled value, slider and arrow buttons. * + * Number Control provides accessible content exclusively through the slider, please pass accessibility related + * customizations through options to the slider. + * * @author Chris Malley (PixelZoom, Inc.) */ define( require => { @@ -169,7 +172,8 @@ define( require => { // a11y - for alternative input, the number control is accessed entirely through slider interaction and these // arrow buttons are not tab navigable assert && assert( options.arrowButtonOptions.tagName === undefined, - 'NumberControl handles alternative input for arrow buttons' ); + 'NumberControl\'s accessible content is just the slider, do not set accessible content on the buttons. Instead ' + + 'set a11y through options.sliderOptions.' ); options.arrowButtonOptions.tagName = null; // Slider options for track (if not specified as trackNode) @@ -269,7 +273,7 @@ define( require => { }; numberProperty.link( arrowEnabledListener ); - // @public {HSlider} - for access to AccessibleValueHandler API + // @public {HSlider} - for access to accessibility API this.slider = new HSlider( numberProperty, numberRange, options.sliderOptions ); // major ticks diff --git a/js/demo/ComponentsScreenView.js b/js/demo/ComponentsScreenView.js index 141ff1e05..2ec6c5776 100644 --- a/js/demo/ComponentsScreenView.js +++ b/js/demo/ComponentsScreenView.js @@ -577,9 +577,9 @@ define( function( require ) { font: new PhetFont( 14 ) }, sliderOptions: { - trackSize: new Dimension2( 150, 3 ) - }, - containerTagName: 'div' + trackSize: new Dimension2( 150, 3 ), + containerTagName: 'div' + } }; demoParent.addChild( new VBox( { resize: false, // Don't readjust the size when the slider knob moves all the way to the right