diff --git a/js/NumberControl.js b/js/NumberControl.js index 0961b48ae..77208faaf 100644 --- a/js/NumberControl.js +++ b/js/NumberControl.js @@ -10,6 +10,7 @@ define( function( require ) { 'use strict'; // modules + var AccessibleSlider = require( 'SUN/accessibility/AccessibleSlider' ); var AlignBox = require( 'SCENERY/nodes/AlignBox' ); var ArrowButton = require( 'SUN/buttons/ArrowButton' ); var Color = require( 'SCENERY/util/Color' ); @@ -113,11 +114,7 @@ define( function( require ) { // phet-io tandem: Tandem.required, - phetioType: NumberControlIO, - - // a11y - tagName: 'input', - inputType: 'range' + phetioType: NumberControlIO }, options ); // highlight color for thumb defaults to a brighter version of the thumb color @@ -201,19 +198,17 @@ define( function( require ) { }; numberProperty.link( arrowEnabledListener ); - var slider = new HSlider( numberProperty, numberRange, _.extend( - // prevent supertype options from being passed, see https://github.com/phetsims/scenery-phet/issues/255 - _.omit( options, Node.prototype._mutatorKeys ), - { - // Use these more general callback options, because the same callbacks apply to the arrow buttons, - // where it makes no sense to call them startDrag and endDrag. - startDrag: options.sliderStartCallback || options.startCallback, - endDrag: options.sliderEndCallback || options.endCallback, - tandem: options.tandem.createTandem( 'slider' ), + // prevent supertype options from being passed, see https://github.com/phetsims/scenery-phet/issues/255 + var sliderOptions = _.extend( _.omit( options, Node.prototype._mutatorKeys ), + { + // Use these more general callback options, because the same callbacks apply to the arrow buttons, + // where it makes no sense to call them startDrag and endDrag. + startDrag: options.sliderStartCallback || options.startCallback, + endDrag: options.sliderEndCallback || options.endCallback, + tandem: options.tandem.createTandem( 'slider' ) + } ); - // a11y - focusable: false - } ) ); + var slider = new HSlider( numberProperty, numberRange, sliderOptions ); // major ticks var majorTicks = options.majorTicks; @@ -236,6 +231,10 @@ define( function( require ) { ]; Node.call( this, options ); + // a11y - the number control acts like a range input for a11y, pass slider options without tandem + var accessibleSliderOptions = _.omit( sliderOptions, [ 'tandem' ] ); + this.initializeAccessibleSlider( numberProperty, slider.enabledRangeProperty, slider.enabledProperty, accessibleSliderOptions ); + // a11y - keyboard navigation skips over the tweaker buttons, so this focus highlight indicates that the // NumberControl is a self contained input var numberControlFocusHighlightBorder = new FocusHighlightFromNode( this, { @@ -262,9 +261,6 @@ define( function( require ) { // highlight's localToGlobalPoint slider.focusHighlight.centerY = sliderFocusHighlightPosition.y; - // add the same input listeners that the slider does, so that NumberControl keyboard interaction mimics HSlider's - this.addAccessibleInputListener( slider.accessibleInputListener ); - // when focused, you should not be able to set enabled to true var disableWhenFocusedListener = function() { leftArrowButton.enabled = false; @@ -343,7 +339,7 @@ define( function( require ) { sceneryPhet.register( 'NumberControl', NumberControl ); - return inherit( VBox, NumberControl, { + inherit( VBox, NumberControl, { // @public dispose: function() { @@ -508,4 +504,9 @@ define( function( require ) { }; } } ); + + // mix accessibility features into NumberControl + AccessibleSlider.mixInto( NumberControl ); + + return NumberControl; } );