feat: improve aria of user menu and add enter key listener

Author: julhoang

templates/v3/includes/_header_v3.html

@@ -89,12 +89,15 @@
 
 <script>
 /**
- * Header dismiss – closes CSS-only checkbox menus (avatar dropdown, mobile drawer)
- * when the user clicks or tabs outside their container.
+ * Header progressive enhancements for CSS-only checkbox menus:
+ *   - Dismiss open menus on outside click or focus.
+ *   - Toggle menus on Enter (checkboxes only respond to Space natively).
  */
 (function () {
   'use strict';
 
+  var TOGGLE_SELECTOR = '.header__user-toggle, .header__menu-toggle';
+
   function dismissOpenMenus(target) {
     var openUserToggles = document.querySelectorAll('.header__user-toggle:checked');
     openUserToggles.forEach(function (toggle) {
@@ -120,5 +123,14 @@
   document.addEventListener('focusin', function (e) {
     dismissOpenMenus(e.target);
   });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key !== 'Enter') return;
+    var toggle = e.target;
+    if (toggle.matches && toggle.matches(TOGGLE_SELECTOR)) {
+      e.preventDefault();
+      toggle.checked = !toggle.checked;
+    }
+  });
 })();
 </script>

templates/v3/includes/header/_header_avatar.html

@@ -12,15 +12,17 @@
 {% url 'account_logout' as logout_url %}
 {% url 'profile-account' as profile_url %}
 <div class="header__user-menu">
-  <input type="checkbox" id="{{ avatar_id }}-toggle" class="header__user-toggle" aria-label="User menu" aria-controls="{{ avatar_id }}-menu" aria-haspopup="menu">
-  <label for="{{ avatar_id }}-toggle" class="header__user-trigger" aria-hidden="true">
+  <input type="checkbox"
+         id="{{ avatar_id }}-toggle"
+         class="header__user-toggle"
+         aria-label="User account"
+         aria-controls="{{ avatar_id }}-menu">
+  <label for="{{ avatar_id }}-toggle"
+         class="header__user-trigger"
+         aria-hidden="true">
     {% include "v3/includes/_avatar_v3.html" with src=request.user.get_thumbnail_url name=request.user.display_name size="xl" %}
   </label>
-  <div id="{{ avatar_id }}-menu"
-       role="menu"
-       aria-orientation="vertical"
-       aria-labelledby="{{ avatar_id }}-toggle"
-       class="header__user-dropdown">
+  <div id="{{ avatar_id }}-menu" role="group" class="header__user-dropdown">
     {% include "v3/includes/header/_header_nav_link.html" with url=logout_url label="Logout" %}
     {% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="My Profile" %}
     {% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="Edit Profile" %}