@internetarchive/ia-topnav 1.3.5-alpha17 → 1.3.5-alpha19

package/package.json

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

package/src/ia-topnav.js

@@ -204,7 +204,7 @@ export default class IATopNav extends LitElement {
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
-        @focusToNext=${(e) => this.currentTab = e.detail}
+        @focusToOtherMenuItem=${(e) => this.currentTab = e.detail}
       ></user-menu>
     `;
   }
@@ -297,7 +297,7 @@ export default class IATopNav extends LitElement {
           .mediaSliderOpen=${this.mediaSliderOpen}
           .menus=${this.menus}
           tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
-          @focusToNext=${(e) => this.currentTab = e.detail}
+          @focusToOtherMenuItem=${(e) => this.currentTab = e.detail}
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}

package/src/lib/keyboard-navigation.js

@@ -69,7 +69,7 @@ export default class KeyboardNavigation {
   }
 
   /**
-   * Handles arrow key events and focuses the next or previous element.
+   * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu
    * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
    */
   handleArrowKey(key) {
@@ -102,7 +102,7 @@ export default class KeyboardNavigation {
   handleTabKey(event) {
     if (this.menuOption) {
       const isShiftPressed = event.shiftKey;
-      this.focusNextMenuItem(isShiftPressed);
+      this.focusToOtherMenuItems(isShiftPressed);
     }
 
     this.focusableElements[this.focusedIndex]?.blur();
@@ -110,12 +110,12 @@ export default class KeyboardNavigation {
   }
 
   /**
-   * Focuses the next or previous menu item based on the provided flag.
+   * Focuses the other parent menu items based on the provided flag.
    * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
    */
-  focusNextMenuItem(isPrevious = false) {
+  focusToOtherMenuItems(isPrevious = false) {
     this.elementsContainer.dispatchEvent(
-      new CustomEvent('focusToNext', {
+      new CustomEvent('focusToOtherMenuItem', {
         bubbles: true,
         composed: true,
         detail: {

package/src/media-button.js

@@ -103,7 +103,6 @@ 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' ? '' : '0'}"
       >
         ${this.menuItem}
       </a>

package/src/media-menu.js

@@ -90,7 +90,8 @@ class MediaMenu extends LitElement {
             linkItem.classList.remove('selected');
             linkItem.blur();
 
-            mediaButtons[this.currentTab.moveTo === 'next' ? index + 1 : index - 1].shadowRoot.querySelector('a.menu-item').focus();
+            const newFocusIndex = this.currentTab.moveTo === 'next' ? index + 1 : index - 1;
+            mediaButtons[newFocusIndex].shadowRoot.querySelector('a.menu-item').focus();
           }
         }
       });

package/src/styles/primary-nav.js

@@ -153,11 +153,10 @@ export default css`
     height: 100%;
   }
 
-  .user-menu:hover,
-  .user-menu:focus {
+  button.user-menu:hover,
+  button.user-menu:focus {
     color: var(--linkHoverColor);
     outline: none;
-    img { box-shadow: 0 0 0 1px #fff; }
   }
 
   .user-menu.active {