accessible radio and check inputs, phetsims/build-an-atom#150

phetsims · Mar 29, 2017 · c2a58e9 · c2a58e9
1 parent 28d0127
commit c2a58e9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/js/CheckBox.js b/js/CheckBox.js
@@ -46,6 +46,10 @@ define( function( require ) {
       tandem: Tandem.tandemRequired(),
       phetioType: TCheckBox,
 
+      // a11y
+      tagName: 'input',
+      inputType: 'checkbox',
+
       /*
        * {function( {Node} checkBox, {boolean} enabled ) }
        * Strategy for controlling the check box's appearance, excluding any content.
@@ -128,6 +132,11 @@ define( function( require ) {
     } );
     this.addInputListener( this.checkBoxButtonListener );
 
+    // a11y - input listener for the pDOM
+    this.addAccessibleInputListener( {
+      change: this.fire
+    });
+
     // @private - sync with property
     this.checkBoxCheckedListener = function( checked ) {
       self.checkedNode.visible = checked;

diff --git a/js/RadioButton.js b/js/RadioButton.js
@@ -31,7 +31,11 @@ define( function( require ) {
     options = _.extend( {
       cursor: 'pointer',
       tandem: Tandem.tandemRequired(),
-      enabled: true
+      enabled: true,
+
+      // a11y
+      tagName: 'input',
+      inputType: 'radio'
     }, options );
 
     assert && assert( !options.phetioValueType, 'phetioValueType should be specified in the property, not RadioButton options' );
@@ -71,6 +75,15 @@ define( function( require ) {
     } );
     this.addInputListener( buttonListener );
 
+    // a11y - input listener for the pDOM
+    this.addAccessibleInputListener( {
+      change: function( ) {
+        if ( self.domElement.value === 'on' ) {
+          fire();
+        }
+      }
+    } );
+
     this.mutate( options );
 
     this.disposeRadioButton = function() {