_content: fix for dropdown to not autoopen when receive focus

Change-Id: Iee3897aa4f5c1311141411ec44193751cb516e4d
Reviewed-on: https://go-review.googlesource.com/c/website/+/509857
Auto-Submit: Jamal Carvalho <[email protected]>
TryBot-Result: Gopher Robot <[email protected]>
Run-TryBot: Jamal Carvalho <[email protected]>
Reviewed-by: Jamal Carvalho <[email protected]>

Author: prudhvikrishna

_content/js/site.js

@@ -24,8 +24,8 @@ window.initFuncs = [];
         }
         // prevents menus that have been tabbed into from staying open
         // when you hover over another menu
-        e.target.focus();
-        e.target.blur();
+        e.target.classList.remove('forced-closed');
+        e.target.classList.add('forced-open');
       });
       const toggleForcedOpen = e => {
         const isForced = e.target.classList.contains('forced-open');
@@ -43,16 +43,17 @@ window.initFuncs = [];
         } else {
           target.classList.remove('forced-closed');
           target.classList.add('forced-open');
-          target.focus();
-          target.addEventListener('blur', e =>
-            target.classList.remove('forced-open')
-          );
           target.parentNode.removeEventListener('mouseout', () => {
             target.classList.remove('forced-closed');
           });
         }
+        e.target.focus();
       };
       menuItemHover.addEventListener('click', toggleForcedOpen);
+      menuItemHover.addEventListener('focus', e => {
+        e.target.classList.add('forced-closed');
+        e.target.classList.remove('forced-open');
+      });
     });
 
     // ensure desktop submenus are closed when esc is pressed
@@ -61,6 +62,7 @@ window.initFuncs = [];
       header.addEventListener('keyup', e => {
         if (e.key === 'Escape') {
           e.target.blur();
+          e.target.focus();
         }
       });
     });

_content/site.tmpl

@@ -65,9 +65,12 @@
           {{- $currentPage := .}}
           {{- range $menus.main}}
           <li class="Header-menuItem {{if strings.HasPrefix $currentPage.URL .url}} Header-menuItem--active{{end}}">
-            <a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}}aria-haspopup="true" class="js-desktop-menu-hover"{{end}}>
-              {{.name}} {{if .children}}<i class="material-icons">arrow_drop_down</i>{{end}}
+            <a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}} class="js-desktop-menu-hover"{{end}} aria-label={{.name}} aria-describedby="dropdown-description">
+              {{.name}} {{if .children}}<i class="material-icons" aria-hidden="true">arrow_drop_down</i>{{end}}
             </a>
+            <div class="screen-reader-only" id="dropdown-description" hidden> 
+              Press Enter to activate/deactivate dropdown
+            </div>
             {{- if .children}}
               <ul class="Header-submenu js-desktop-submenu-hover" aria-label="submenu">
                 {{- range .children}}