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

package/package.json

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

package/src/ia-topnav.js

@@ -62,6 +62,7 @@ export default class IATopNav extends LitElement {
       username: { type: String },
       userProfileImagePath: { type: String },
       secondIdentitySlotMode: { type: String },
+      currentTab: { type: Object },
     };
   }
 
@@ -77,11 +78,12 @@ export default class IATopNav extends LitElement {
     this.searchIn = '';
     this.selectedMenuOption = '';
     this.secondIdentitySlotMode = '';
+    this.currentTab = {};
   }
 
   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();
     }
   }
@@ -199,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>
     `;
   }
@@ -274,6 +277,7 @@ export default class IATopNav extends LitElement {
           .selectedMenuOption=${this.selectedMenuOption}
           .username=${this.username}
           .userProfileImagePath=${this.userProfileImagePath}
+          .currentTab=${this.currentTab}
           ?hideSearch=${this.hideSearch}
           @mediaTypeSelected=${this.mediaTypeSelected}
           @toggleSearchMenu=${this.toggleSearchMenu}
@@ -289,6 +293,8 @@ export default class IATopNav extends LitElement {
           .selectedMenuOption=${this.selectedMenuOption}
           .mediaSliderOpen=${this.mediaSliderOpen}
           .menus=${this.menus}
+          tabindex="${this.mediaSliderOpen ? '1' : ''}"
+          @moveFocusToOthers=${(e) => this.currentTab = e.detail}
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}

package/src/lib/keyboard-navigation.js

@@ -0,0 +1,130 @@
+
+
+
+export default class KeyboardNavigation {
+  /**
+   * Constructor for the KeyboardNavigation class.
+   * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.
+   * @param {string} menuOption - The type of menu option ('web' or 'usermenu').
+   */
+  constructor(elementsContainer, menuOption) {
+    this.elementsContainer = elementsContainer;
+    this.menuOption = menuOption;
+    this.focusableElements = this.getFocusableElements();
+    this.focusedIndex = this.getInitialFocusedIndex();
+
+    this.focusableElements[this.focusedIndex]?.focus();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  /**
+   * Returns the initial focused index based on the menu option.
+   * @returns {number} The initial focused index (0 for 'web', 1 for 'usermenu').
+   */
+  getInitialFocusedIndex() {
+    return this.menuOption === 'usermenu' ? 1 : 0;
+  }
+
+  /**
+   * Gets an array of focusable elements within the container.
+   * @returns {HTMLElement[]} An array of focusable elements.
+   */
+  getFocusableElements() {
+    const focusableTagSelectors = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+    const isDisabledOrHidden = el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
+
+    let elements;
+    if (this.menuOption === 'web') {
+      const waybackSlider = this.elementsContainer.querySelector('wayback-slider').shadowRoot;
+      const waybackSearch = waybackSlider.querySelector('wayback-search');
+      const waybackSearchElements = Array.from(waybackSearch.shadowRoot.querySelectorAll(focusableTagSelectors));
+
+      const normalElements = Array.from(waybackSlider.querySelectorAll(focusableTagSelectors));
+
+      const savePageForm = waybackSlider.querySelector('save-page-form');
+      const savePageFormElements = Array.from(savePageForm.shadowRoot.querySelectorAll(focusableTagSelectors));
+
+      elements = [...waybackSearchElements, ...normalElements, ...savePageFormElements];
+    } else {
+      elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);
+    }
+
+    return Array.from(elements).filter(isDisabledOrHidden);
+  }
+
+  /**
+   * Handles keyboard events and focuses the appropriate element.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleKeyDown(event) {
+    const { key } = event;
+    const isArrowKey = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key);
+    const isTabKey = key === 'Tab';
+
+    if (isArrowKey) {
+      this.handleArrowKey(key);
+      event.preventDefault();
+    } else if (isTabKey) {
+      this.handleTabKey(event);
+    }
+  }
+
+  /**
+   * Handles arrow key events and focuses the next or previous element.
+   * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
+   */
+  handleArrowKey(key) {
+    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
+    isDownOrRight ? this.focusNext() : this.focusPrevious();
+  }
+
+  /**
+   * Focuses the previous focusable element in the container.
+   */
+  focusPrevious() {
+    if (this.focusableElements.length === 0) return;
+    this.focusedIndex = (this.focusedIndex - 1 + this.focusableElements.length) % this.focusableElements.length;
+    this.focusableElements[this.focusedIndex]?.focus();
+  }
+
+  /**
+   * Focuses the next focusable element in the container.
+   */
+  focusNext() {
+    if (this.focusableElements.length === 0) return;
+    this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;
+    this.focusableElements[this.focusedIndex]?.focus();
+  }
+
+  /**
+   * Handles the Tab key event and focuses the next or previous menu item.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleTabKey(event) {
+    console.log(this.menuOption)
+    if (this.menuOption) {
+      const isShiftPressed = event.shiftKey;
+      this.focusNextMenuItem(isShiftPressed);
+    }
+
+    this.focusableElements[this.focusedIndex]?.blur();
+    event.preventDefault();
+  }
+
+  /**
+   * Focuses the next or previous menu item based on the provided flag.
+   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+   */
+  focusNextMenuItem(isPrevious = false) {
+    this.elementsContainer.dispatchEvent(
+      new CustomEvent('moveFocusToOthers', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.menuOption,
+          moveTo: isPrevious ? 'prev' : 'next',
+        },
+      })
+    );
+  }
+}

package/src/media-button.js

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

package/src/media-menu.js

@@ -67,6 +67,7 @@ class MediaMenu extends LitElement {
       config: { type: Object },
       openMenu: { type: String },
       selectedMenuOption: { type: String },
+      currentTab: { type: Object },
     };
   }
 
@@ -75,6 +76,25 @@ class MediaMenu extends LitElement {
     this.config = {};
     this.openMenu = '';
     this.selectedMenuOption = '';
+    this.currentTab = {};
+  }
+
+  updated(props) {
+    if (props.has('currentTab')) {
+      const mediaButtons = Array.from(this.shadowRoot.querySelectorAll('media-button'));
+
+      mediaButtons.map((button, index) => {
+        const linkItem = button.shadowRoot.querySelector('a.menu-item');
+        if (linkItem) {
+          if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
+            linkItem.classList.remove('selected');
+            linkItem.blur();
+
+            mediaButtons[this.currentTab.moveTo === 'next' ? index + 1 : index - 1].shadowRoot.querySelector('a.menu-item').focus();
+          }
+        }
+      });
+    }
   }
 
   get mediaMenuOptionsTemplate() {
@@ -96,6 +116,7 @@ class MediaMenu extends LitElement {
           .mediatype=${menu}
           .openMenu=${this.openMenu}
           .selected=${selected}
+          .selectedMenuOption=${this.selectedMenuOption}
           data-mediatype="${menu}"
         ></media-button>
       `;
@@ -117,7 +138,6 @@ class MediaMenu extends LitElement {
         <div class="overflow-clip">
           <nav
             class="media-menu-inner"
-            aria-hidden="${!this.menuOpened}"
             aria-expanded="${this.menuOpened}"
           >
             <div class="menu-group">

package/src/media-slider.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
 import './media-subnav.js';
 import mediaSliderCSS from './styles/media-slider.js';
+import KeyboardNavigation from './lib/keyboard-navigation.js';
 
 class MediaSlider extends LitElement {
   static get styles() {
@@ -26,6 +27,19 @@ class MediaSlider extends LitElement {
     this.selectedMenuOption = 'texts';
   }
 
+  updated(props) {
+    if (props.has('selectedMenuOption') && this.selectedMenuOption) {
+      const container = this.shadowRoot?.querySelector('.has-focused')?.shadowRoot;
+  
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(container, this.selectedMenuOption);
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        this.removeEventListener('keydown', this.previousKeydownListener);
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
   shouldUpdate() {
     const scrollPane = this.shadowRoot ? this.shadowRoot.querySelector('.information-menu') : null;
 
@@ -47,49 +61,49 @@ class MediaSlider extends LitElement {
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'audio' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'audio' ? 'has-focused' : 'hidden'}"
                 menu="audio"
                 .menuItems=${this.menus.audio}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'images' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'images' ? 'has-focused' : 'hidden'}"
                 menu="images"
                 .menuItems=${this.menus.images}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'software' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'software' ? 'has-focused' : 'hidden'}"
                 menu="software"
                 .menuItems=${this.menus.software}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'texts' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'texts' ? 'has-focused' : 'hidden'}"
                 menu="texts"
                 .menuItems=${this.menus.texts}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'video' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'video' ? 'has-focused' : 'hidden'}"
                 menu="video"
                 .menuItems=${this.menus.video}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'web' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'web' ? 'has-focused' : 'hidden'}"
                 menu="web"
                 .menuItems=${this.menus.web}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'more' ? '' : 'hidden'}"
+                class="${this.selectedMenuOption === 'more' ? 'has-focused' : 'hidden'}"
                 menu="more"
                 .menuItems=${this.menus.more}
               ></media-subnav>

package/src/nav-search.js

@@ -98,7 +98,6 @@ class NavSearch extends TrackedElement {
             class="search-field"
             placeholder="Search"
             autocomplete="off"
-            tabindex="2"
             value=${this.searchQuery || ''}
             @focus=${this.toggleSearchMenu}
           />

package/src/primary-nav.js

@@ -31,6 +31,7 @@ class PrimaryNav extends TrackedElement {
       userMenuOpen: { type: Boolean },
       username: { type: String },
       userProfileImagePath: { type: String },
+      currentTab: { type: Object },
     };
   }
 
@@ -44,6 +45,7 @@ class PrimaryNav extends TrackedElement {
     this.userMenuOpen = false;
     this.mediaBaseHost = 'https://archive.org';
     this.secondIdentitySlotMode = '';
+    this.currentTab = {};
   }
 
   toggleMediaMenu(e) {
@@ -79,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';
@@ -87,7 +104,6 @@ class PrimaryNav extends TrackedElement {
       <button
         class="user-menu ${userMenuClass}"
         title="${userMenuToolTip}"
-        tabindex="-1"
         @click="${this.toggleUserMenu}"
         data-event-click-tracking="${this.config.eventCategory}|NavUserMenu"
       >
@@ -107,7 +123,6 @@ class PrimaryNav extends TrackedElement {
         .config=${this.config}
         .dropdownOpen=${this.signedOutMenuOpen}
         .openMenu=${this.openMenu}
-        tabindex="-1"
         @signedOutMenuToggled=${this.signedOutMenuToggled}
       ></login-button>
     `;
@@ -157,7 +172,6 @@ class PrimaryNav extends TrackedElement {
     return html`
       <a href="${formatUrl('/create', this.baseHost)}"
         class="upload"
-        tabindex="1"
         @focus=${this.toggleMediaMenu}
       >
       ${icons.upload}
@@ -188,6 +202,15 @@ class PrimaryNav extends TrackedElement {
     const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
     return html`
       <nav class=${this.hideSearch ? 'hide-search' : nothing}>
+        <button
+          class="hamburger"
+          @click="${this.toggleMediaMenu}"
+          data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
+          title="Open main menu"
+        >
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
+        </button>
+
         <div class=${`branding ${this.secondLogoClass}`}>
           <a
             href=${formatUrl('/', this.baseHost)}
@@ -200,30 +223,20 @@ class PrimaryNav extends TrackedElement {
           >
           ${this.secondLogoSlot}
         </div>
-
-        <div class="right-side-section">
-          ${this.mobileDonateHeart}
-          ${this.searchMenu}
-          ${this.uploadButtonTemplate}
-          ${this.userStateTemplate}
-        </div>
         <media-menu
           .baseHost=${this.baseHost}
           .config=${this.config}
           ?mediaMenuAnimate="${this.mediaMenuAnimate}"
-          tabindex="${mediaMenuTabIndex}"
           .selectedMenuOption=${this.selectedMenuOption}
           .openMenu=${this.openMenu}
+          .currentTab=${this.currentTab}
         ></media-menu>
-        <button
-          class="hamburger"
-          @click="${this.toggleMediaMenu}"
-          tabindex="1"
-          data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
-          title="Open main menu"
-        >
-          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
-        </button>
+        <div class="right-side-section">
+          ${this.mobileDonateHeart}
+          ${this.userStateTemplate}
+          ${this.uploadButtonTemplate}
+          ${this.searchMenu}
+        </div>
       </nav>
     `;
   }

package/src/search-menu.js

@@ -100,7 +100,7 @@ class SearchMenu extends TrackedElement {
       }
       return html`
         <label @click="${this.selectSearchType}">
-          <input tabindex="3" form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
+          <input form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
           Search ${label}
         </label>
       `;
@@ -134,7 +134,6 @@ 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/dropdown-menu.js

@@ -92,6 +92,7 @@ export default css`
 
   @media (min-width: 890px) {
     nav {
+      display: flex;
       overflow: visible;
       top: 0;
       left: auto;
@@ -146,6 +147,7 @@ export default css`
     a:focus {
       color: var(--linkHoverColor);
       background: var(--linkColor);
+      outline: none;
     }
 
     .initial,

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%;
@@ -39,7 +35,7 @@ export default css`
     .overflow-clip {
       position: absolute;
       z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
-      top: 0;
+      top: 4rem;
       left: 0;
       height: 0;
       width: 100%;

package/src/styles/primary-nav.js

@@ -9,8 +9,7 @@ export default css`
 
   nav {
     position: relative;
-    display: -ms-grid;
-    display: grid;
+    display: flex;
     height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
@@ -29,6 +28,7 @@ export default css`
 
   .right-side-section {
     display: flex;
+    margin-left: auto;
     user-select: none;
   }
   button {
@@ -86,6 +86,9 @@ export default css`
     fill: var(--activeColor);
   }
 
+  .mobile-donate-link {
+    display: inline-block;
+  }
   .mobile-donate-link svg {
     height: 4rem;
     width: 4rem;
@@ -151,7 +154,8 @@ export default css`
     height: 100%;
   }
 
-  .user-menu:hover {
+  .user-menu:hover,
+  .user-menu:focus {
     color: var(--linkHoverColor);
   }
 
@@ -187,6 +191,13 @@ export default css`
     slot[name='opt-sec-logo'] {
       display: none;
     }
+
+    .right-side-section {
+      display: initial;
+    }
+    .right-side-section .user-info {
+      float: right;
+    }
   }
 
   @media (min-width: 890px) {
@@ -195,12 +206,8 @@ export default css`
       --userIconHeight: 3.2rem;
     }
 
-    .right-side-section {
-      display: contents;
-    }
-
     nav {
-      display: block;
+      display: flex;
       z-index: 4;
       height: 5rem;
       padding-right: 1.5rem;

package/src/user-menu.js

@@ -1,6 +1,7 @@
 import { html } from 'https://offshoot.prod.archive.org/lit.js';
 import DropdownMenu from './dropdown-menu.js';
 import userMenuCSS from './styles/user-menu.js';
+import KeyboardNavigation from './lib/keyboard-navigation.js';
 
 class UserMenu extends DropdownMenu {
   static get styles() {
@@ -21,6 +22,19 @@ class UserMenu extends DropdownMenu {
     this.username = '';
   }
 
+  updated(props) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector('.nav-container');
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(container, 'usermenu');
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        this.removeEventListener('keydown', this.previousKeydownListener);
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
   render() {
     return html`
       <div class="nav-container">