commit 647c4b2c5ac6204d03a40c19f7ec23ccd272caea
author prudhvikrishna <prudhvikrishna@google.com> Fri Jul 14 12:35:47 2023 -0700
committer Gopher Robot <gobot@golang.org> Mon Jul 17 15:45:47 2023 +0000
tree 7af2ebeaca69e4f9e3929122c31accc1c1fc8428
parent 57cac55d243dae0416e0776b24c9e84e0fec777a

_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 <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>

_content/js/site.js

diff --git a/_content/js/site.js b/_content/js/site.js
index 79c3c88..eecd9ad 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -24,8 +24,8 @@
         }
         // 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 @@
         } 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 @@
       header.addEventListener('keyup', e => {
         if (e.key === 'Escape') {
           e.target.blur();
+          e.target.focus();
         }
       });
     });

_content/site.tmpl

diff --git a/_content/site.tmpl b/_content/site.tmpl
index bcd54a6..975faf8 100644
--- a/_content/site.tmpl
+++ b/_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}}