added doc, support aria role description, #152

js/friction/view/FrictionA11yGrabDragNode.js

@@ -14,11 +14,14 @@ define( function( require ) {
   const FrictionModel = require( 'FRICTION/friction/model/FrictionModel' );
   const utteranceQueue = require( 'SCENERY_PHET/accessibility/utteranceQueue' );
 
+  // a11y strings
   const initialGrabbedNotTouchingString = FrictionA11yStrings.initialGrabbedNotTouching.value;
   const grabbedNotTouchingString = FrictionA11yStrings.grabbedNotTouching.value;
   const initialGrabbedTouchingString = FrictionA11yStrings.initialGrabbedTouching.value;
   const grabbedTouchingString = FrictionA11yStrings.grabbedTouching.value;
+  const moveInFourDirectionsString = FrictionA11yStrings.moveInFourDirections.value;
 
+  // constants
   const touchingAlerts = { initial: initialGrabbedTouchingString, subsequent: grabbedTouchingString };
   const notTouchingAlerts = { initial: initialGrabbedNotTouchingString, subsequent: grabbedNotTouchingString };
 
@@ -37,6 +40,12 @@ define( function( require ) {
         // Function that returns whether or not the drag cue should be shown.
         successfulDrag: () => {
           return !model.topBookPositionProperty.value.equals( model.topBookPositionProperty.initialValue );
+        },
+
+        // set the role description on the grabbable
+        onRelease: () => {
+          wrappedNode.removeAccessibleAttribute( 'aria-roledescription' );
+
         }
       }, options );
 
@@ -45,6 +54,8 @@ define( function( require ) {
 
       // Wrap the onGrab option in default functionality for al of the type in Friction
       options.onGrab = () => {
+        wrappedNode.setAccessibleAttribute( 'aria-roledescription', moveInFourDirectionsString );
+
         oldGrab && oldGrab();
 
         let alerts = model.contactProperty.get() ? touchingAlerts : notTouchingAlerts;

js/friction/view/book/BookNode.js

@@ -35,7 +35,6 @@ define( function( require ) {
 
   // a11y strings
   let bookTitleStringPattern = FrictionA11yStrings.bookTitleStringPattern.value;
-  // let moveInFourDirectionsString = FrictionA11yStrings.moveInFourDirections.value;
   let zoomedInChemistryBookPatternString = FrictionA11yStrings.zoomedInChemistryBookPattern.value;
   let grabButtonHelpTextString = FrictionA11yStrings.grabButtonHelpText.value;
 
@@ -145,9 +144,6 @@ define( function( require ) {
 
       this.addChild( focusHighlightRect );
 
-      // TODO: manage aria-roledescription
-      // this.a11yGrabDragInteractionNode.setAccessibleAttribute( 'aria-roledescription', moveInFourDirectionsString );
-
       this.addInputListener( new FrictionDragHandler( model, options.tandem.createTandem( 'dragHandler' ), {
         startSound: bookPickupSoundClip,
         endSound: bookDropSoundClip

js/friction/view/magnifier/MagnifierNode.js

@@ -40,7 +40,6 @@ define( function( require ) {
   // a11y strings
   let bookTitleStringPattern = FrictionA11yStrings.bookTitleStringPattern.value;
   let zoomedInBookTitlePatternString = FrictionA11yStrings.zoomedInBookTitlePattern.value;
-  // let moveInFourDirectionsString = FrictionA11yStrings.moveInFourDirections.value;
   let zoomedInString = FrictionA11yStrings.zoomedIn.value;
   let zoomedInChemistryBookPatternString = FrictionA11yStrings.zoomedInChemistryBookPattern.value;
 
@@ -236,9 +235,6 @@ define( function( require ) {
       listenersForDrag: [ this.keyboardDragHandler, focusListener ]
     } );
 
-    // TODO: what to do about this? https://github.com/phetsims/friction/issues/152
-    // a11yGrabDragInteractionNode.setAccessibleAttribute( 'aria-roledescription', moveInFourDirectionsString );
-
     // add arrows before the drag area, then the grab cue hides the arrows
     this.topBookBackground.addChild( visualArrowIcon );