@internetarchive/ia-topnav 1.3.5-alpha5 → 1.3.5-alpha7

package/package.json

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

package/src/dropdown-menu.js

@@ -57,6 +57,7 @@ class DropdownMenu extends TrackedElement {
     return html`<a
       href="${formatUrl(link.url, this.baseHost)}"
       class="${link.class}"
+      tabindex="${this.open ? '' : '-1'}"
       @click=${this.trackClick}
       data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}"
       aria-label=${calloutText ? `New feature: ${link.title}` : nothing}>

package/src/media-button.js

@@ -103,6 +103,7 @@ class MediaButton extends TrackedElement {
         @click=${this.followable ? this.trackClick : this.onClick}
         data-event-click-tracking="${this.analyticsEvent}"
         title="${this.tooltipPrefix} ${this.mediatype} menu"
+        tabindex="${this.openMenu === 'media' ? '' : '-1'}"
       >
         ${this.menuItem}
       </a>

package/src/nav-search.js

@@ -99,19 +99,8 @@ class NavSearch extends TrackedElement {
             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 || ''}
+            @focus=${this.toggleSearchMenu}
           />
           ${this.searchInsideInput}
           <button

package/src/primary-nav.js

@@ -157,7 +157,9 @@ class PrimaryNav extends TrackedElement {
     return html`
       <a href="${formatUrl('/create', this.baseHost)}"
         class="upload"
-        tabindex="1">
+        tabindex="1"
+        @focus=${this.toggleMediaMenu}
+      >
       ${icons.upload}
       <span>Upload</span>
     </a>`;

package/src/styles/search-menu.js

@@ -89,6 +89,8 @@ export default css`
 
     label {
       padding: 0;
+      font-weight: normal;
+      margin: 0;
     }
 
     label + label {