@internetarchive/ia-topnav 1.3.5-alpha1 → 1.3.5-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha1",
+  "version": "1.3.5-alpha3",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/nav-search.js

@@ -98,7 +98,19 @@ class NavSearch extends TrackedElement {
             class="search-field"
             placeholder="Search"
             autocomplete="off"
+            tabindex="2"
             @focus=${this.toggleSearchMenu}
+            @blur=${(e) => {
+              if (e.relatedTarget?.tagName !== 'SEARCH-MENU') {
+                this.dispatchEvent(new CustomEvent('menuToggled', {
+                  detail: {
+                    menuName: 'search'
+                  },
+                  composed: true,
+                  bubbles: true,
+                }));
+              }
+            }}
             value=${this.searchQuery || ''}
           />
           ${this.searchInsideInput}

package/src/primary-nav.js

@@ -87,6 +87,7 @@ class PrimaryNav extends TrackedElement {
       <button
         class="user-menu ${userMenuClass}"
         title="${userMenuToolTip}"
+        tabindex="-1"
         @click="${this.toggleUserMenu}"
         data-event-click-tracking="${this.config.eventCategory}|NavUserMenu"
       >
@@ -106,8 +107,8 @@ class PrimaryNav extends TrackedElement {
         .config=${this.config}
         .dropdownOpen=${this.signedOutMenuOpen}
         .openMenu=${this.openMenu}
-        @signedOutMenuToggled=${this.signedOutMenuToggled}
         tabindex="-1"
+        @signedOutMenuToggled=${this.signedOutMenuToggled}
       ></login-button>
     `;
   }
@@ -156,12 +157,7 @@ class PrimaryNav extends TrackedElement {
     return html`
       <a href="${formatUrl('/create', this.baseHost)}"
         class="upload"
-        tabindex="1"
-        @focus=${(e) => {
-          if (e.relatedTarget !== null) {
-            this.toggleSearchMenu(e)
-          }
-        }}>
+        tabindex="1">
       ${icons.upload}
       <span>Upload</span>
     </a>`;

package/src/search-menu.js

@@ -30,10 +30,15 @@ class SearchMenu extends TrackedElement {
   }
 
   firstUpdated() {
-    this.shadowRoot.addEventListener('keyup', (e) => {
+    this.shadowRoot.addEventListener('keydown', (e) => {
       const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
       const length = searchTypes.length - 1;
 
+      // Prevent the default scrolling behavior for Home and End keys
+      if (e.key === 'Home' || e.key === 'End') {
+        e.preventDefault();
+      }
+
       // early return if searchTypes not found
       if (!length) return;
 
@@ -52,6 +57,11 @@ class SearchMenu extends TrackedElement {
     });
   }
 
+  disconnectedCallback() {
+    // Clean up event listener when the element is removed
+    this.shadowRoot.removeEventListener('keydown');
+  }
+
   selectSearchType(e) {
     this.selectedSearchType = e.target.value;
   }