feat(material-dialog): on open focus .dialog-close or the last button

Closes #222

Author: Marcy Sutton

src/base/test-utils.js

@@ -9,5 +9,28 @@ var TestUtil = {
       e.which = eventData.keyCode;
     }
     element.trigger(e);
+  },
+
+  /** 
+   * Mocks angular.element#focus for the duration of the test
+   * @example
+   * it('some focus test', inject(function($document) {
+   *   TestUtil.mockFocus(this); // 'this' is the test instance
+   *   doSomething();
+   *   expect($document.activeElement).toBe(someElement[0]);
+   * }));
+   */
+  mockElementFocus: function(test) {
+    var focus = angular.element.prototype.focus;
+    inject(function($document) {
+      angular.element.prototype.focus = function() {
+        $document.activeElement = this[0];
+      };
+    });
+    // Un-mock focus after the test is done
+    test.after(function() {
+      angular.element.prototype.focus = focus;
+    });
   }
+
 };

src/components/buttons/buttons.js

@@ -75,8 +75,24 @@ function MaterialButtonDirective(ngHrefDirectives, $materialInkRipple, $aria ) {
 
       innerElement
         .addClass('material-button-inner')
-        .append(element.contents());
-      element.append(innerElement);
+        .append(element.contents())
+        // Since we're always passing focus to the inner element,
+        // add a focus class to the outer element so we can still style
+        // it with focus.
+        .on('focus', function() {
+          element.addClass('focus');
+        })
+        .on('blur', function() {
+          element.removeClass('focus');
+        });
+
+      element.
+        append(innerElement)
+        .attr('tabIndex', -1)
+        //Always pass focus to innerElement
+        .on('focus', function() {
+          innerElement.focus();
+        });
 
       return function postLink(scope, element, attr) {
         $aria.expect(element, 'aria-label', element.text());
@@ -85,13 +101,6 @@ function MaterialButtonDirective(ngHrefDirectives, $materialInkRipple, $aria ) {
         element.on('focus', function() {
           innerElement.focus();
         });
-        innerElement
-          .on('focus', function() {
-            element.addClass('focus');
-          })
-          .on('blur', function() {
-            element.removeClass('focus');
-          });
       };
     }
   };

src/components/dialog/dialog.js

@@ -43,13 +43,19 @@ function MaterialDialogDirective($$rAF) {
  *
  * The $materialDialog service opens a dialog over top of the app. 
  *
- * See the overview page for an example.
- *
  * The `$materialDialog` service can be used as a function, which when called will open a
  * dialog. Note: the dialog is always given an isolate scope.
  *
  * It takes one argument, `options`, which is defined below.
  *
+ * Note: the dialog's template must have an outer `<material-dialog>` element. 
+ * Inside, use an element with class `dialog-content` for the dialog's content, and use
+ * an element with class `dialog-actions` for the dialog's actions.  
+ *
+ * When opened, the `dialog-actions` area will attempt to focus the first button found with 
+ * class `dialog-close`. If no button with `dialog-close` class is found, it will focus the
+ * last button in the `dialog-actions` area.
+ *
  * @usage
  * <hljs lang="html">
  * <div ng-controller="MyController">
@@ -137,6 +143,7 @@ function MaterialDialogService($timeout, $materialCompiler, $rootElement, $rootS
       var element = compileData.link(scope); 
       var popInTarget = options.targetEvent && options.targetEvent.target && 
         angular.element(options.targetEvent.target);
+      var closeButton = findCloseButton();
       var backdrop;
 
       if (options.hasBackdrop) {
@@ -150,10 +157,21 @@ function MaterialDialogService($timeout, $materialCompiler, $rootElement, $rootS
         if (options.clickOutsideToClose) {
           element.on('click', dialogClickOutside);
         }
+        closeButton.focus();
       });
 
       return destroyDialog;
 
+      function findCloseButton() {
+        //If no element with class dialog-close, try to find the last 
+        //button child in dialog-actions and assume it is a close button
+        var closeButton = element[0].querySelector('.dialog-close');
+        if (!closeButton) {
+          var actionButtons = element[0].querySelectorAll('.dialog-actions button');
+          closeButton = actionButtons[ actionButtons.length - 1 ];
+        }
+        return angular.element(closeButton);
+      }
       function destroyDialog() {
         if (destroyDialog.called) return;
         destroyDialog.called = true;

src/components/dialog/dialog.spec.js

@@ -3,13 +3,13 @@ describe('$materialDialog', function() {
   beforeEach(module('material.components.dialog'));
 
   beforeEach(inject(function spyOnMaterialEffects($materialEffects) {
-    spyOn($materialEffects, 'popOut').andCallFake(function(element, parent, cb) {
-      cb();
-    });
     spyOn($materialEffects, 'popIn').andCallFake(function(element, parent, targetEvent, cb) {
       parent.append(element);
       cb();
     });
+    spyOn($materialEffects, 'popOut').andCallFake(function(element, parent, cb) {
+      cb();
+    });
   }));
 
   it('should append dialog with container', inject(function($materialDialog, $rootScope) {
@@ -135,6 +135,45 @@ describe('$materialDialog', function() {
     expect(parent.find('material-backdrop').length).toBe(0);
   }));
 
+  it('should focus `material-button.dialog-close` on open', inject(function($materialDialog, $rootScope, $document) {
+    TestUtil.mockElementFocus(this);
+
+    var parent = angular.element('<div>');
+    $materialDialog({
+      template:
+        '<material-dialog>' +
+          '<div class="dialog-actions">' +
+            '<button class="dialog-close">Close</button>' +
+          '</div>' +
+          '</material-dialog>',
+      appendTo: parent
+    });
+
+    $rootScope.$apply();
+
+    expect($document.activeElement).toBe(parent.find('.dialog-close')[0]);
+  }));
+
+  it('should focus the last `material-button` in dialog-actions open if no `.dialog-close`', inject(function($materialDialog, $rootScope, $document) {
+    TestUtil.mockElementFocus(this);
+
+    var parent = angular.element('<div>');
+    $materialDialog({
+      template:
+        '<material-dialog>' +
+          '<div class="dialog-actions">' +
+            '<button id="a">A</material-button>' +
+            '<button id="focus-target">B</material-button>' +
+          '</div>' +
+        '</material-dialog>',
+      appendTo: parent
+    });
+
+    $rootScope.$apply();
+
+    expect($document.activeElement).toBe(parent.find('#focus-target')[0]);
+  }));
+
   it('should only allow one open at a time', inject(function($materialDialog, $rootScope) {
     var parent = angular.element('<div>');
     $materialDialog({