fix(dialog): focus dialog element when no actions are set (#9272)

By default the dialog searches for possible focus targets. Using the `md-autofocus` directive and querying for buttons inside of the `md-dialog-actions` element.
Some developers don't have any actions inside of the dialog, so there will be no focus target and Screenreaders are not able to detect the new change.

The dialog should focus the actual dialog element when no focus target is available.
Users are still able to disable the auto focus (as same as before) by using the `focusOnOpen` option.

> `mockElementFocus` now mocks the HTMLElement prototype instead of the jqLite prototype.
> This allows us to test focus on native HTML elements as well.

Fixes #9271.

Author: devversion

src/components/dialog/dialog.js

@@ -761,7 +761,7 @@ function MdDialogProvider($$interimElementProvider) {
        */
       function focusOnOpen() {
         if (options.focusOnOpen) {
-          var target = $mdUtil.findFocusTarget(element) || findCloseButton();
+          var target = $mdUtil.findFocusTarget(element) || findCloseButton() || dialogElement;
           target.focus();
         }
 
@@ -773,11 +773,13 @@ function MdDialogProvider($$interimElementProvider) {
          */
         function findCloseButton() {
           var closeButton = element[0].querySelector('.dialog-close');
+
           if (!closeButton) {
             var actionButtons = element[0].querySelectorAll('.md-actions button, md-dialog-actions button');
             closeButton = actionButtons[actionButtons.length - 1];
           }
-          return angular.element(closeButton);
+
+          return closeButton;
         }
       }
     }

src/components/dialog/dialog.spec.js

@@ -1134,6 +1134,24 @@ describe('$mdDialog', function() {
       expect($document.activeElement).toBe(parent[0].querySelector('#focus-target'));
     }));
 
+    it('should focus the dialog element if no actions are set', inject(function($mdDialog, $rootScope, $document) {
+      jasmine.mockElementFocus(this);
+
+      var parent = angular.element('<div>');
+
+      $mdDialog.show({
+        parent: parent,
+        template:
+        '<md-dialog></md-dialog>'
+      });
+
+      $rootScope.$apply();
+      runAnimation();
+
+      expect($document.activeElement).toBe(parent[0].querySelector('md-dialog'));
+
+    }));
+
     it('should focusOnOpen == false', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
       jasmine.mockElementFocus(this);
 

test/angular-material-spec.js

@@ -91,7 +91,10 @@
     });
 
     /**
-     * Mocks angular.element#focus ONLY for the duration of a particular test.
+     * Mocks the focus method from the HTMLElement prototype for the duration
+     * of the running test.
+     *
+     * The mock will be automatically removed after the test finished.
      *
      * @example
      *
@@ -105,17 +108,20 @@
      * }));
      *
      */
-    jasmine.mockElementFocus = function(test) {
-      var focus = angular.element.prototype.focus;
+    jasmine.mockElementFocus = function() {
+      var _focusFn = HTMLElement.prototype.focus;
+
       inject(function($document) {
-        angular.element.prototype.focus = function() {
-          $document.activeElement = this[0];
+        HTMLElement.prototype.focus = function() {
+          $document.activeElement = this;
         };
       });
+
       // Un-mock focus after the test is done
       afterEach(function() {
-        angular.element.prototype.focus = focus;
+        HTMLElement.prototype.focus = _focusFn;
       });
+
     };
 
     /**