fix(fabSpeedDial/Toolbar): Implement better hover/click/keyboard/aria…

… support.

BREAKING CHANGE: The FAB Speed Dial/Toolbar no longer automatically
adds the hover effect. The demo has been updated with example code
which utilizes `ng-mouseenter` and `ng-mouseleave`.

BREAKING CHANGE - Fab Toolbar now requires the use of the `md-direction`
attribute instead of just setting the `md-left` and `md-right` classes.
This is due to the shared controller and keyboard support.

This also provides better support for iOS devices (and presumably
other mobile devices too).

Ideally, these will be refactored into a single component before 1.0.

fixes #3925, fixes #3214, fixes #3231. closes #4074.

src/components/fabActions/fabActions.js

@@ -42,22 +42,6 @@
           // Wrap every child in a new div and add a class that we can scale/fling independently
           children.wrap('<div class="md-fab-action-item">');
         }
-
-        return function postLink(scope, element, attributes, controllers) {
-          // Grab whichever parent controller is used
-          var controller = controllers[0] || controllers[1];
-
-          // Make the children open/close their parent directive
-          if (controller) {
-            angular.forEach(element.children(), function(child) {
-              // Attach listeners to the `md-fab-action-item`
-              child = angular.element(child).children()[0];
-
-              angular.element(child).on('focus', controller.open);
-              angular.element(child).on('blur', controller.close);
-            });
-          }
-        }
       }
     }
   }

src/components/fabSpeedDial/demoBasicUsage/index.html

@@ -15,14 +15,14 @@
         </md-fab-trigger>
 
         <md-fab-actions>
-          <md-button aria-label="twitter" class="md-fab md-raised md-mini">
-            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
+          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
+            <md-icon md-svg-src="img/icons/twitter.svg" aria-label="Twitter"></md-icon>
           </md-button>
-          <md-button aria-label="facebook" class="md-fab md-raised md-mini">
-            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
+          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
+            <md-icon md-svg-src="img/icons/facebook.svg" aria-label="Facebook"></md-icon>
           </md-button>
           <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
-            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
+            <md-icon md-svg-src="img/icons/hangout.svg" aria-label="Google Hangout"></md-icon>
           </md-button>
         </md-fab-actions>
       </md-fab-speed-dial>

src/components/fabSpeedDial/demoMoreOptions/index.html

@@ -6,11 +6,13 @@
     </p>
 
     <div class="lock-size" layout="row" layout-align="center center">
-      <md-fab-speed-dial ng-hide="demo.hidden" md-direction="down" class="md-fling">
+      <md-fab-speed-dial ng-hide="demo.hidden" md-direction="down" class="md-fling"
+                         md-open="demo.isOpen"
+                         ng-mouseenter="demo.isOpen=true" ng-mouseleave="demo.isOpen=false">
         <md-fab-trigger>
           <md-button aria-label="menu" class="md-fab md-warn">
             <md-tooltip md-direction="top">Menu</md-tooltip>
-            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+            <md-icon md-svg-src="img/icons/menu.svg" aria-label="menu"></md-icon>
           </md-button>
         </md-fab-trigger>
 
@@ -19,7 +21,7 @@
             <md-button aria-label="{{item.name}}" class="md-fab md-raised md-mini"
                        ng-click="demo.openDialog($event, item)">
               <md-tooltip md-direction="{{item.direction}}">{{item.name}}</md-tooltip>
-              <md-icon md-svg-src="{{item.icon}}"></md-icon>
+              <md-icon md-svg-src="{{item.icon}}" aria-label="{{item.name}}"></md-icon>
             </md-button>
           </div>
         </md-fab-actions>
@@ -72,6 +74,22 @@ <h3>Tooltips</h3>
     </div>
   </md-content>
 
+  <md-content class="md-padding" layout="row">
+    <div flex="50">
+      <h3>Hovering</h3>
+
+      <p>
+        You can also easily setup the speed dial to open on hover using the
+        <code>ng-mouseenter</code> and <code>ng-mouseleave</code> attributes.
+      </p>
+
+      <p>
+        See the example code for more information.
+      </p>
+    </div>
+  </md-content>
+
+
   <script type="text/ng-template" id="dialog.html">
     <md-dialog>
       <md-dialog-content>Hello User! You clicked {{dialog.item.name}}.</md-dialog-content>