@internetarchive/ia-topnav 1.3.4 → 1.3.5-alpha1

package/package.json

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

package/src/nav-search.js

@@ -34,13 +34,6 @@ class NavSearch extends TrackedElement {
     this.initSearchBetaOptIn();
   }
 
-  updated() {
-    if (this.open) {
-      this.shadowRoot.querySelector('[name=query]').focus();
-    }
-    return true;
-  }
-
   initSearchBetaOptIn() {
     this.inSearchBeta = !!window.localStorage?.getItem('SearchBeta-opt-in') ||
       !!window.localStorage?.getItem('SearchBeta-launched');
@@ -112,6 +105,7 @@ class NavSearch extends TrackedElement {
           <button
             type="submit"
             class="search"
+            tabindex="-1"
             data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
           >
             ${icons.search}

package/src/primary-nav.js

@@ -107,6 +107,7 @@ class PrimaryNav extends TrackedElement {
         .dropdownOpen=${this.signedOutMenuOpen}
         .openMenu=${this.openMenu}
         @signedOutMenuToggled=${this.signedOutMenuToggled}
+        tabindex="-1"
       ></login-button>
     `;
   }
@@ -152,7 +153,15 @@ class PrimaryNav extends TrackedElement {
   }
 
   get uploadButtonTemplate() {
-    return html`<a href="${formatUrl('/create', this.baseHost)}" class="upload">
+    return html`
+      <a href="${formatUrl('/create', this.baseHost)}"
+        class="upload"
+        tabindex="1"
+        @focus=${(e) => {
+          if (e.relatedTarget !== null) {
+            this.toggleSearchMenu(e)
+          }
+        }}>
       ${icons.upload}
       <span>Upload</span>
     </a>`;
@@ -188,6 +197,7 @@ class PrimaryNav extends TrackedElement {
             data-event-click-tracking="${this.config.eventCategory}|NavHome"
             title="Go home"
             class="link-home"
+            tabindex="-1"
             >${icons.iaLogo}${logoWordmarkStacked}</a
           >
           ${this.secondLogoSlot}

package/src/search-menu.js

@@ -29,6 +29,29 @@ class SearchMenu extends TrackedElement {
     this.selectedSearchType = '';
   }
 
+  firstUpdated() {
+    this.shadowRoot.addEventListener('keyup', (e) => {
+      const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
+      const length = searchTypes.length - 1;
+
+      // early return if searchTypes not found
+      if (!length) return;
+
+      const searchTypeHandler = (index) => {
+        const searchType = searchTypes[index];
+        searchType.checked = true;
+        searchType.dispatchEvent(new Event('change'));
+        searchType.focus();
+      };
+
+      if (e.key === 'Home') {
+        searchTypeHandler(0);
+      } else if (e.key === 'End') {
+        searchTypeHandler(length);
+      }
+    });
+  }
+
   selectSearchType(e) {
     this.selectedSearchType = e.target.value;
   }
@@ -70,7 +93,7 @@ class SearchMenu extends TrackedElement {
       }
       return html`
         <label @click="${this.selectSearchType}">
-          <input form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
+          <input tabindex="3" form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
           Search ${label}
         </label>
       `;
@@ -104,6 +127,7 @@ class SearchMenu extends TrackedElement {
             href="${formatUrl('/advancedsearch.php', this.baseHost)}"
             @click=${this.trackClick}
             data-event-click-tracking="${this.config.eventCategory}|NavAdvancedSearch"
+            tabindex="4"
             >Advanced Search</a
           >
         </div>

package/src/styles/search-menu.js

@@ -43,6 +43,9 @@ export default css`
   .advanced-search {
     text-decoration: none;
     color: var(--linkColor);
+    line-height: normal;
+    padding: 0.5rem;
+    margin-top: 5px;
   }
 
   @media (min-width: 890px) {