Merge pull request #1066 from unl/dropdown-widget-improvements

Send focus to 'mobile' search input, avoid zoom

wdn/templates_4.1/less/critical/mq-bp480.less

@@ -12,7 +12,7 @@
         justify-content: flex-end;
 
 	    label {
-            margin: .254em .602em 0 0;
+            margin: .191rem .422rem 0 0;
 	    }
     }
 

wdn/templates_4.1/less/critical/search.less

@@ -15,7 +15,6 @@
 #wdn_search_query {
 	-webkit-appearance: none;
     width: 100%;
-    padding: .422em .75em;
+    padding: .317rem .563rem;
     border: 1px solid @ui05;
-    font-size: 1rem; // 12.83px
 }

wdn/templates_4.1/less/layouts/search.less

@@ -54,8 +54,8 @@
         form button {
             bottom: 1.899rem;
             right: 2.369rem;
-            height: 1.777em;
-            width: 1.899em;
+            height: 2.369rem;
+            width: 2.369rem;
             font-size: 1.247rem; // 16px
             color: @ui10;
         }
@@ -104,8 +104,9 @@
     }
 
     #wdn_search_query {
+        font-size: 1.247rem; // 16px
         color: @ui05;
-        border-right-width: 2.369em;
+        border-right-width: 2.369rem;
         background-color: @ui12;
 
         &:focus {
@@ -174,7 +175,7 @@
             top: 0;
             right: 0;
             height: 100%;
-            width: 2.369em;
+            width: 2.369rem;
             color: @cream;
         }
     }

wdn/templates_4.1/scripts/wdn-ui.js

@@ -26,7 +26,9 @@ define(['jquery'], function($) {
 		});
 	};
 
-	var closeDropDown = function(selector) {
+	var closeDropDown = function(selector, returnFocus) {
+		var $firstClosed = false;
+
 		$.each($(selector), function() {
 			var $element = $(this);
 			var container_id = $element.attr('aria-controls');
@@ -38,10 +40,18 @@ define(['jquery'], function($) {
 				$container.attr('aria-hidden', 'true');
 			}
 
-			if ('true' == $element.attr('aria-pressed')) {
+			if ('true' === $element.attr('aria-pressed')) {
 				$element.attr('aria-pressed', 'false');
+				if (!$firstClosed) {
+                    $firstClosed = $element;
+				}
 			}
 		});
+
+		if (returnFocus && $firstClosed) {
+			//Send focus back to the button instead of to the top of the document
+			$firstClosed.focus();
+		}
 	};
 
 	var isFullNav = function() {
@@ -119,8 +129,8 @@ define(['jquery'], function($) {
 			//Close search on escape
 			$(document).on('keydown', function(e) {
 				if (e.keyCode === 27) {
-					//Close on escape
-					closeDropDown('.'+dropdownButtonClass);
+					//Close on escape and do return focus
+					closeDropDown('.'+dropdownButtonClass, true);
 				}
 			});
 
@@ -140,7 +150,7 @@ define(['jquery'], function($) {
 					var $container = $('#' + container_id);
 
 					var isPressed = $control.attr('aria-pressed');
-					if ('true' == isPressed) {
+					if ('true' === isPressed) {
 						$container.attr('aria-hidden', 'true');
 						$control.attr('aria-pressed', 'false');
 					} else {
@@ -149,13 +159,24 @@ define(['jquery'], function($) {
 						$container.attr('tabindex', '-1').focus();
 					}
 
+					//If the container has an input, send focus to that (mobile search)
+					var $inputs = $('input', $container);
+					if ($inputs.length) {
+						$inputs[0].focus();
+					} else {
+						//Otherwise, send focus to the container
+						$container.attr('tabindex', '-1').focus();
+					}
+
 					//Close other widgets
-					closeDropDown($('.'+dropdownButtonClass).not($control));
+					//Don't return focus because the new widget should manage focus
+					closeDropDown($('.'+dropdownButtonClass).not($control), false);
 				}
 
 				//close all dropdown widgets
 				if (!$dropdownContent.find(e.target).length) {
-					closeDropDown('.'+dropdownButtonClass);
+					//Don't return focus because the new target probably as focus
+					closeDropDown('.'+dropdownButtonClass, false);
 				}
 			});