@internetarchive/ia-topnav 1.3.5-alpha8 → 1.3.5-alpha9

package/package.json

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

package/src/ia-topnav.js

@@ -83,7 +83,7 @@ export default class IATopNav extends LitElement {
 
   updated(props) {
     if (props.has('username') || props.has('localLinks') || props.has('baseHost') ||
-        props.has('waybackPagesArchived') || props.has('itemIdentifier')) {
+      props.has('waybackPagesArchived') || props.has('itemIdentifier')) {
       this.menuSetup();
     }
   }
@@ -201,6 +201,7 @@ export default class IATopNav extends LitElement {
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
+        @moveFocusToOthers=${(e) => this.currentTab = e.detail}
       ></user-menu>
     `;
   }

package/src/lib/keyboard-navigation.js

@@ -1,3 +1,6 @@
+
+
+
 export default class KeyboardNavigation {
   /**
    * Constructor for the KeyboardNavigation class.
@@ -60,6 +63,7 @@ export default class KeyboardNavigation {
 
     if (isArrowKey) {
       this.handleArrowKey(key);
+      event.preventDefault();
     } else if (isTabKey) {
       this.handleTabKey(event);
     }
@@ -97,11 +101,13 @@ export default class KeyboardNavigation {
    * @param {KeyboardEvent} event - The keyboard event object.
    */
   handleTabKey(event) {
-    if (this.menuOption !== 'usermenu') {
+    console.log(this.menuOption)
+    if (this.menuOption) {
       const isShiftPressed = event.shiftKey;
       this.focusNextMenuItem(isShiftPressed);
     }
 
+    this.focusableElements[this.focusedIndex]?.blur();
     event.preventDefault();
   }
 

package/src/login-button.js

@@ -67,9 +67,9 @@ class LoginButton extends TrackedElement {
           ${icons.user}
         </a>
         <span>
-        <a href="${this.signupPath}" tabindex="1">Sign up</a>
+        <a href="${this.signupPath}">Sign up</a>
         |
-        <a href="${this.loginPath}" tabindex="1">Log in</a>
+        <a href="${this.loginPath}">Log in</a>
         </span>
       </div>
     `;

package/src/media-button.js

@@ -18,7 +18,6 @@ class MediaButton extends TrackedElement {
       mediatype: { type: String },
       openMenu: { type: String },
       selected: { type: Boolean },
-      selectedMenuOption: { type: String },
       followable: { type: Boolean },
     };
   }
@@ -36,16 +35,9 @@ class MediaButton extends TrackedElement {
     this.mediatype = '';
     this.openMenu = '';
     this.selected = false;
-    this.selectedMenuOption = '';
     this.followable = false;
   }
 
-  updated() {
-    console.log(this.selectedMenuOption)
-    // if (this.selectedMenuOption)
-    //   this.shadowDom.querySelector(`a.${this.mediatype}`).focus();
-  }
-
   onClick(e) {
     this.trackClick(e);
     e.preventDefault();
@@ -103,23 +95,12 @@ class MediaButton extends TrackedElement {
     `;
   }
 
-  emitHandleSubMenuKeyDown(e) {
-    this.dispatchEvent(new CustomEvent('subMenuKeyDown1', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        e
-      }
-    }));
-  }
-
   render() {
     return html`
       <a
         href="${this.href}"
         class="menu-item ${this.mediatype} ${this.buttonClass}"
         @click=${this.followable ? this.trackClick : this.onClick}
-        @keydown="${this.emitHandleSubMenuKeyDown}"
         data-event-click-tracking="${this.analyticsEvent}"
         title="${this.tooltipPrefix} ${this.mediatype} menu"
         tabindex="${this.openMenu === 'media' ? '' : '0'}"

package/src/media-menu.js

@@ -67,10 +67,6 @@ class MediaMenu extends LitElement {
       config: { type: Object },
       openMenu: { type: String },
       selectedMenuOption: { type: String },
-
-      isSubMenuOpen: { type: Boolean },
-      focusedIndex: { type: Number },
-
       currentTab: { type: Object },
     };
   }
@@ -80,95 +76,27 @@ class MediaMenu extends LitElement {
     this.config = {};
     this.openMenu = '';
     this.selectedMenuOption = '';
-
-    this.isSubMenuOpen = false;
-    this.focusedIndex = -1;
-    this.menuRef = [];
-    this.subMenuRef = [];
-
     this.currentTab = {};
-    this.focusOn = 0;
-  }
-
-  firstUpdated() {
-    this.menuRef = Array.from(this.shadowRoot.querySelectorAll('media-button'));
-    // this.subMenuRef = Array.from(this.shadowRoot.querySelectorAll('.submenu-item'));
-    // this.shadowRoot.querySelector('media-button').focus();
-    // this.addEventListener('keydown', this.handleKeyDown.bind(this));
-
-    // this.shadowRoot.querySelector('.menu-group media-button').shadowRoot.querySelector(`${this.selectedMenuOption}`);
   }
 
   updated(props) {
-    // console.log(props)
     if (props.has('currentTab')) {
-      // console.log(this.currentTab.mediatype, this.currentTab.moveTo)
-
-      // const dd = this.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('media-menu');
       const mediaButtons = Array.from(this.shadowRoot.querySelectorAll('media-button'));
-      // console.log(mediaButtons)
 
-      // let = newIndex1 = 0;
       mediaButtons.map((button, index) => {
-        // console.log(button.shadowRoot.querySelector('a.menu-item'));
-
         const linkItem = button.shadowRoot.querySelector('a.menu-item');
         if (linkItem) {
-          // console.log(linkItem)
           if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
             linkItem.classList.remove('selected');
             linkItem.blur();
 
-            // newIndex1 = this.currentTab.moveTo === 'next' ? index++ : index--;
-            // if (this.currentTab.moveTo)
-            // mediaButtons[index].shadowRoot.querySelector('a.menu-item').blur();
-            // if (this.currentTab.moveTo === 'next') {
-            //   mediaButtons[index + 1].shadowRoot.querySelector('a.menu-item').focus();
-            // } else if (this.currentTab.moveTo === 'prev') {
-              mediaButtons[this.currentTab.moveTo === 'next' ? index + 1 : index - 1].shadowRoot.querySelector('a.menu-item').focus();
-            // }
+            mediaButtons[this.currentTab.moveTo === 'next' ? index + 1 : index - 1].shadowRoot.querySelector('a.menu-item').focus();
           }
         }
       });
-
-      // console.log('updatedddddddddddd', this.selectedMenuOption, this.shadowRoot.querySelector('.menu-group'));
-
-
-      // this.shadowRoot.querySelector('.menu-group').focus();
-      // console.log(props);
-      // this.shadowRoot.querySelectorAll('media-button').shadowRoot.querySelector(`${this.selectedMenuOption}`);
-
-      // this.requestUpdate();
-      // this.updateRequest();
-      // this.menuRef = Array.from(this.shadowRoot.querySelectorAll('media-button'));
     }
   }
 
-  handleKeyDown(e) {
-    // console.log('dddddddddddd')
-    if (e.key === 'Tab') {
-      console.log(this.menuRef)
-      this.focusedIndex = (this.focusedIndex + 1) % this.menuRef.length;
-      this.submenuFocusedIndex = -1; // reset submenu focus index
-      this.menuRef[this.focusedIndex].focus();
-    }
-  }
-
-  // handleSubMenuKeydown(e) {
-  //   console.log(e);
-  //   if (e.key === 'ArrowDown') {
-  //     this.focusedIndex = (this.focusedIndex + 1) % this.subMenuRef.length;
-  //     this.subMenuRef[this.focusedIndex].focus();
-  //   } else if (e.key === 'ArrowUp') {
-  //     this.focusedIndex = (this.focusedIndex - 1 + this.subMenuRef.length) % this.subMenuRef.length;
-  //     this.subMenuRef[this.focusedIndex].focus();
-  //   } else if (e.key === 'Escape') {
-  //     this.isSubMenuOpen = false;
-  //     this.requestUpdate();
-  //     setTimeout(() => this.menuRef[0]?.focus(), 0);
-  //   }
-  // }
-
   get mediaMenuOptionsTemplate() {
     const buttons = menuSelection.map(({
       icon,
@@ -178,7 +106,6 @@ class MediaMenu extends LitElement {
       followable,
     }) => {
       const selected = this.selectedMenuOption === menu;
-      // this.focusOn = 
       return html`
         <media-button
           .config=${this.config}
@@ -191,7 +118,6 @@ class MediaMenu extends LitElement {
           .selected=${selected}
           .selectedMenuOption=${this.selectedMenuOption}
           data-mediatype="${menu}"
-          .focusOn=${this.focusOn}
         ></media-button>
       `;
     });

package/src/primary-nav.js

@@ -81,6 +81,21 @@ class PrimaryNav extends TrackedElement {
     );
   }
 
+  updated(props) {
+    const { currentTab } = this;
+    const isUserMenuTab = currentTab && currentTab.mediatype === 'usermenu';
+    if (props.has('currentTab') && isUserMenuTab) {
+      console.log(currentTab)
+      const focusElement = currentTab.moveTo === 'next'
+        ? this.shadowRoot.querySelector('a.upload')
+        : this.shadowRoot.querySelector('.media-menu-container');
+
+      if (focusElement) {
+        focusElement.focus();
+      }
+    }
+  }
+
   get userIcon() {
     const userMenuClass = this.openMenu === 'user' ? 'active' : '';
     const userMenuToolTip = this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';

package/src/styles/media-menu.js

@@ -23,10 +23,6 @@ export default css`
 
   /* Mobile view styles */
   @media (max-width: 889px) {
-    .media-menu-container {
-      // position: relative;
-    }
-
     .media-menu-inner {
       position: absolute;
       width: 100%;

package/src/styles/primary-nav.js

@@ -9,8 +9,6 @@ export default css`
 
   nav {
     position: relative;
-    display: -ms-grid;
-    // display: grid;
     display: flex;
     height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';

package/src/user-menu.js

@@ -23,7 +23,7 @@ class UserMenu extends DropdownMenu {
   }
 
   updated(props) {
-    if (props.has('open')) {
+    if (props.has('open') && this.open) {
       const container = this.shadowRoot?.querySelector('.nav-container');
 
       if (container) {