Improve implementation of "Skip To Content" link (#6906)

Author: Scott Bommarito

src/NuGetGallery/Scripts/gallery/common.js

@@ -208,72 +208,40 @@
     nuget.configureFileInputButton = function (id) {
         // File input buttons should respond to keyboard events.
         $("#" + id).on("keypress", function (e) {
-            var code = (e.keyCode || e.which);
-            var isInteract = (code == 13 /*enter*/ || code == 32 /*space*/) && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+            var code = e.keyCode || e.which;
+            var isInteract = (code === 13 /*enter*/ || code === 32 /*space*/) && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
             if (isInteract) {
                 $(this).click();
             }
         });
-    }
-
-    nuget.canElementBeTabbedTo = function (element) {
-        var isElement = function (type) {
-            return element.is(type);
-        }
-
-        var hasAttribute = function (attributeName) {
-            var attribute = element.attr(attributeName);
-            return typeof attribute !== typeof undefined && attribute !== false;
-        }
+    };
 
-        if (hasAttribute("tabindex")) {
-            // Elements that have had their tabindex set to -1 cannot be tabbed to.
-            return element.attr("tabindex") !== "-1";
+    nuget.canElementBeFocused = function (element) {
+        element = $(element);
+        if (!element.is(':visible')) {
+            return false;
         }
 
         // See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content
         var alwaysInteractiveElements = ['a', 'button', 'details', 'embed', 'iframe', 'keygen', 'label', 'select', 'textarea'];
         var i;
         for (i = 0; i < alwaysInteractiveElements.length; i++) {
-            if (isElement(alwaysInteractiveElements[i])) {
+            if (element.is(alwaysInteractiveElements[i])) {
                 return true;
             }
         }
 
-        return ((isElement("audio") && hasAttribute("controls")) ||
-            (isElement("img") && hasAttribute("usemap")) ||
-            (isElement("input") && element.attr("type") !== "hidden") ||
-            (isElement("menu") && element.attr("type") !== "toolbar") ||
-            (isElement("object") && hasAttribute("usemap")) ||
-            (isElement("video") && hasAttribute("controls")));
-    }
-
-    nuget.getFirstChildThatCanBeTabbedTo = function (element) {
-        if (window.nuget.canElementBeTabbedTo(element)) {
-            return element;
-        }
-
-        // If an element has its tabindex set to -1, none of its children can be tabbed to.
-        if (element.attr("tabindex") === "-1") {
-            return null;
-        }
-
-        var i;
-        var children = element.children();
-        for (i = 0; i < children.length; i++) {
-            var child = children.eq(i);
-            if (window.nuget.canElementBeTabbedTo(child)) {
-                return child;
-            }
-
-            var childChild = window.nuget.getFirstChildThatCanBeTabbedTo(child);
-            if (childChild !== null) {
-                return childChild;
-            }
-        }
+        return element.is("audio") && !!element.attr("controls") ||
+            element.is("img") && !!element.attr("usemap") ||
+            element.is("input") && element.attr("type") !== "hidden" ||
+            element.is("menu") && element.attr("type") !== "toolbar" ||
+            element.is("object") && !!element.attr("usemap") ||
+            element.is("video") && !!element.attr("controls");
+    };
 
-        return null;
-    }
+    nuget.canElementBeTabbedTo = function (element) {
+        return window.nuget.canElementBeFocused(element) && $(element).attr('tabindex') !== "-1";
+    };
 
     // Source: https://stackoverflow.com/a/27568129/52749
     // Detects whether SVG is supported in the browser.
@@ -365,7 +333,7 @@
         var $field = $("#AntiForgeryForm input[name=__RequestVerificationToken]");
         if (data instanceof FormData)
         {
-            data.append($tokenKey, $field.val())
+            data.append($tokenKey, $field.val());
         }
         else
         {
@@ -383,10 +351,15 @@
         }
 
         return stringToFormat;
-    }
+    };
 
     window.nuget = nuget;
 
+    jQuery.extend(jQuery.expr[':'], {
+        focusable: window.nuget.canElementBeFocused,
+        tabbable: window.nuget.canElementBeTabbedTo
+    });
+
     initializeJQueryValidator();
 
     $(function () {
@@ -454,16 +427,16 @@
         });
 
         $(document).on('keydown', function (e) {
-            var code = (e.keyCode || e.which);
+            var code = e.keyCode || e.which;
             var isValidInputCharacter =
-                ((code >= 48 && code <= 57)           // numbers 0-9
-                    || (code >= 64 && code <= 90)     // letters a-z
-                    || (code >= 96 && code <= 111)    // numpad
-                    || (code >= 186 && code <= 192)   // ; = , - . / `
-                    || (code >= 219 && code <= 222))  // [\ ] '
+                (code >= 48 && code <= 57           // numbers 0-9
+                    || code >= 64 && code <= 90     // letters a-z
+                    || code >= 96 && code <= 111    // numpad
+                    || code >= 186 && code <= 192   // ; = , - . / `
+                    || code >= 219 && code <= 222)  // [\ ] '
                 && !e.altKey && !e.ctrlKey && !e.metaKey;
 
-            if (isValidInputCharacter && document.activeElement == document.body) {
+            if (isValidInputCharacter && document.activeElement === document.body) {
                 var searchbox = $("#search");
                 searchbox.focus();
                 var currInput = searchbox.val();
@@ -475,7 +448,7 @@
         $("#skipToContent").on('click', function () {
             // Focus on the first element that can be tabbed to inside the "skippedToContent" element.
             var skippedToContent = $("#skippedToContent");
-            var firstChildThatCanBeTabbedTo = window.nuget.getFirstChildThatCanBeTabbedTo(skippedToContent.first());
+            var firstChildThatCanBeTabbedTo = skippedToContent.find(':tabbable').first();
             if (firstChildThatCanBeTabbedTo !== null) {
                 firstChildThatCanBeTabbedTo.focus();
             } else {
@@ -486,4 +459,3 @@
         });
     });
 }());
-