refactor(sidenav): remove md-sidenav-focus directive

BREAKING CHANGE: Removed the `md-sidenav-focus` directive. It was deprecated in favor of `md-autofocus`. Please see the [md-autofocus Docs](https://material.angularjs.org/latest/api/directive/mdAutofocus) and [md-sidenav Basic Usage Demo](https://material.angularjs.org/latest/demo/sidenav#basic-usage) for examples.

Author: Splaktar

CHANGELOG.md

@@ -4739,7 +4739,7 @@ it is disabled, change it to an ng-disabled expression.
     - **md-scroll-xy**
   * <md-divider **md-inset**="" >
   * <md-linear-progress **md-buffer-value**="someValue" **md-mode**="query" >
-  * <md-circular-rogress **md-mode**="query" **md-diameter**="60" >
+  * <md-circular-progress **md-mode**="query" **md-diameter**="60" >
   * <md-sidenav>
     - **md-is-open**="isOpen"
     - **md-is-locked-open**="isLockedOpen"

src/components/sidenav/sidenav.js

@@ -12,7 +12,6 @@ angular
   ])
   .factory('$mdSidenav', SidenavService)
   .directive('mdSidenav', SidenavDirective)
-  .directive('mdSidenavFocus', SidenavFocusDirective)
   .controller('$mdSidenavController', SidenavController);
 
 
@@ -151,39 +150,6 @@ function SidenavService($mdComponentRegistry, $mdUtil, $q, $log) {
   }
 }
 
-/**
- * @ngdoc directive
- * @name mdSidenavFocus
- * @module material.components.sidenav
- *
- * @restrict A
- *
- * @description
- * `mdSidenavFocus` provides a way to specify the focused element when a sidenav opens.
- * This is completely optional, as the sidenav itself is focused by default.
- *
- * @usage
- * <hljs lang="html">
- * <md-sidenav>
- *   <form>
- *     <md-input-container>
- *       <label for="testInput">Label</label>
- *       <input id="testInput" type="text" md-sidenav-focus>
- *     </md-input-container>
- *   </form>
- * </md-sidenav>
- * </hljs>
- **/
-function SidenavFocusDirective() {
-  return {
-    restrict: 'A',
-    require: '^mdSidenav',
-    link: function(scope, element, attr, sidenavCtrl) {
-      // @see $mdUtil.findFocusTarget(...)
-    }
-  };
-}
-
 /**
  * @ngdoc directive
  * @name mdSidenav
@@ -362,12 +328,10 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInterac
 
     /**
      * Toggle the SideNav view and attach/detach listeners
-     * @param isOpen
+     * @param {boolean} isOpen
      */
     function updateIsOpen(isOpen) {
-      // Support deprecated md-sidenav-focus attribute as fallback
-      var focusEl = $mdUtil.findFocusTarget(element) ||
-        $mdUtil.findFocusTarget(element,'[md-sidenav-focus]') || element;
+      var focusEl = $mdUtil.findFocusTarget(element) || element;
       var parent = element.parent();
       var restorePositioning;
 

src/components/sidenav/sidenav.spec.js

@@ -122,24 +122,6 @@ describe('mdSidenav', function() {
       expect($document.activeElement).toBe(el[0]);
     }));
 
-    it('should focus child with md-sidenav-focus', inject(function($rootScope, $material, $document, $compile) {
-      jasmine.mockElementFocus(this);
-      var parent = angular.element('<div>');
-      var markup = '<md-sidenav md-is-open="show">' +
-                   '    <md-input-container><label>Label</label>' +
-                   '      <input type="text" md-sidenav-focus>' +
-                   '    </md-input-container>' +
-                   '<md-sidenav>';
-      var sidenavEl = angular.element(markup);
-      parent.append(sidenavEl);
-      $compile(parent)($rootScope);
-      $rootScope.$apply('show = true');
-
-      var focusEl = sidenavEl.find('input');
-      $material.flushOutstandingAnimations();
-      expect($document.activeElement).toBe(focusEl[0]);
-    }));
-
     it('should focus child with md-autofocus', inject(function($rootScope, $material, $document, $compile) {
       jasmine.mockElementFocus(this);
       var parent = angular.element('<div>');
@@ -158,13 +140,13 @@ describe('mdSidenav', function() {
       expect($document.activeElement).toBe(focusEl[0]);
     }));
 
-    it('should focus on last md-sidenav-focus element', inject(function($rootScope, $material, $document, $compile) {
+    it('should focus on last md-autofocus element', inject(function($rootScope, $material, $document, $compile) {
       jasmine.mockElementFocus(this);
       var parent = angular.element('<div>');
       var markup = '<md-sidenav md-is-open="show">' +
-        '<md-button md-sidenav-focus>Button</md-button>' +
+        '<md-button md-autofocus>Button</md-button>' +
         '<md-input-container><label>Label</label>' +
-        '<input type="text" md-sidenav-focus>' +
+        '<input type="text" md-autofocus>' +
         '</md-input-container>' +
         '<md-sidenav>';
       var sidenavEl = angular.element(markup);

src/core/util/autofocus.js

@@ -1,9 +1,8 @@
 angular.module('material.core')
   .directive('mdAutofocus', MdAutofocusDirective)
 
-  // Support the deprecated md-auto-focus and md-sidenav-focus as well
-  .directive('mdAutoFocus', MdAutofocusDirective)
-  .directive('mdSidenavFocus', MdAutofocusDirective);
+  // Support the deprecated md-auto-focus as well
+  .directive('mdAutoFocus', MdAutofocusDirective);
 
 /**
  * @ngdoc directive

src/core/util/prefixer.js

@@ -10,6 +10,15 @@ angular
     }]);
   });
 
+/**
+ * @param {string|string[]} initialAttributes
+ * @param {boolean} buildSelector
+ * @return {string|string[]|{buildSelector: (function(string|string[]): string),
+ *   buildList: (function(string|string[]): string[]),
+ *   hasAttribute: (function(JQLite|Element, string): HTMLElement),
+ *   removeAttribute: (function(JQLite|Element, string): void)}}
+ * @constructor
+ */
 function MdPrefixer(initialAttributes, buildSelector) {
   var PREFIXES = ['data', 'x'];
 

src/core/util/util.js

@@ -212,17 +212,17 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
     /**
      * Finds the proper focus target by searching the DOM.
      *
-     * @param containerEl
-     * @param attributeVal
-     * @returns {*}
+     * @param {!JQLite} containerEl
+     * @param {string=} attributeVal
+     * @returns {JQLite|undefined}
      */
     findFocusTarget: function(containerEl, attributeVal) {
       var AUTO_FOCUS = this.prefixer('md-autofocus', true);
       var elToFocus;
 
       elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);
 
-      if (!elToFocus && attributeVal != AUTO_FOCUS) {
+      if (!elToFocus && attributeVal !== AUTO_FOCUS) {
         // Scan for deprecated attribute
         elToFocus = scanForFocusable(containerEl, this.prefixer('md-auto-focus', true));
 
@@ -237,12 +237,15 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       /**
        * Can target and nested children for specified Selector (attribute)
        * whose value may be an expression that evaluates to True/False.
+       * @param {!JQLite} target
+       * @param {!string} selector
+       * @return {JQLite|undefined}
        */
       function scanForFocusable(target, selector) {
         var elFound, items = target[0].querySelectorAll(selector);
 
         // Find the last child element with the focus attribute
-        if (items && items.length){
+        if (items && items.length) {
           items.length && angular.forEach(items, function(it) {
             it = angular.element(it);
 
@@ -258,8 +261,8 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
 
     /**
      * Disables scroll around the passed parent element.
-     * @param {Element|angular.JQLite=} element Origin Element (not used)
-     * @param {Element|angular.JQLite=} parent Element to disable scrolling within.
+     * @param {Element|JQLite=} element Origin Element (not used)
+     * @param {Element|JQLite=} parent Element to disable scrolling within.
      *   Defaults to body if none supplied.
      * @param {Object=} options Object of options to modify functionality
      *   - disableScrollMask Boolean of whether or not to create a scroll mask element or
@@ -291,7 +294,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       /**
        * Creates a virtual scrolling mask to prevent touchmove, keyboard, scrollbar clicking,
        * and wheel events.
-       * @param {!Element|!angular.JQLite} elementToDisable
+       * @param {!Element|!JQLite} elementToDisable
        * @param {Object=} scrollMaskOptions Object of options to modify functionality
        *   - disableScrollMask Boolean of whether or not to create a scroll mask element or
        *     use the passed parent element.
@@ -387,15 +390,16 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
         tempNode.children().css('height', '60px');
 
         $document[0].body.appendChild(tempNode[0]);
-        this.floatingScrollbars.cached = (tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth);
+        this.floatingScrollbars.cached =
+          (tempNode[0].offsetWidth === tempNode[0].childNodes[0].offsetWidth);
         tempNode.remove();
       }
       return this.floatingScrollbars.cached;
     },
 
     /**
      * Mobile safari only allows you to set focus in click event listeners.
-     * @param {Element|angular.JQLite} element to focus
+     * @param {Element|JQLite} element to focus
      */
     forceFocus: function(element) {
       var node = element[0] || element;

src/core/util/util.spec.js

@@ -145,22 +145,6 @@ describe('util', function() {
 
         expect(target[0].nodeName).toBe("BUTTON");
       }));
-
-      it('should find valid a valid focusTarget with a deep "md-sidenav-focus" argument', inject(function($rootScope, $compile, $mdUtil) {
-        var template = '' +
-          '<div class="autoFocus">' +
-          '  <md-sidenav>' +
-          '    <button md-sidenav-focus>' +
-          '      <img>' +
-          '    </button>' +
-          '  </md-sidenav>' +
-          '</div>';
-        var widget = $compile(template)($rootScope);
-            $rootScope.$apply();
-        var target = $mdUtil.findFocusTarget(widget,'[md-sidenav-focus]');
-
-        expect(target[0].nodeName).toBe("BUTTON");
-      }));
     });
 
     describe('extractElementByname', function() {