set a11y order on LabScreenView, delineate necessary keyboard steps f…

…or peg control sliders, see #104
phetsims · Oct 19, 2017 · 400d984 · 400d984
1 parent b92c407
commit 400d984
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/js/lab/view/LabScreenView.js b/js/lab/view/LabScreenView.js
@@ -165,6 +165,9 @@ define( function( require ) {
         model.isPlayingProperty.set( false );
       }
     } );
+
+    // a11y
+    this.accessibleOrder = [ playPanel, pegControls, statisticsAccordionBox, hopperModeControl, histogramModeControl, this.eraserButton];
   }
 
   plinkoProbability.register( 'LabScreenView', LabScreenView );

diff --git a/js/lab/view/PegControls.js b/js/lab/view/PegControls.js
@@ -69,7 +69,11 @@ define( function( require ) {
       trackSize: SLIDER_TRACK_SIZE,
       majorTicks: rowsMajorTicks,
       majorTickLength: 18,
-      tickLabelSpacing: 1
+      tickLabelSpacing: 1,
+
+      // a11y
+      keyboardStep: 2,
+      shiftKeyboardStep: 1
     } );
 
     // major tick labels for slider that controls binary probability
@@ -94,7 +98,11 @@ define( function( require ) {
       trackSize: SLIDER_TRACK_SIZE,
       majorTicks: probabilityMajorTicks,
       majorTickLength: 18,
-      tickLabelSpacing: 1
+      tickLabelSpacing: 1,
+
+      // a11y
+      // no need to delineate specific steps as the HSlider defaults evenly/cleanly divide
+      // the range
     } );
 
     var contentNode = new VBox( {
-Original file line number
+Diff line change
@@ Expand Up / @@ -165,6 +165,9 @@ define( function( require ) { @@
             model.isPlayingProperty.set( false );
           }
         } );
+        // a11y
+        this.accessibleOrder = [ playPanel, pegControls, statisticsAccordionBox, hopperModeControl, histogramModeControl, this.eraserButton];
       }
       plinkoProbability.register( 'LabScreenView', LabScreenView );
@@ Expand Down @@