@internetarchive/ia-topnav 1.3.5-alpha8 → 1.3.5

package/package.json

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

package/src/data/menus.js

@@ -48,10 +48,6 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
           title: 'All Audio',
           url: `${prefix}/details/audio`,
         },
-        {
-          title: 'This Just In',
-          url: `${prefix}/search.php?query=mediatype:audio&sort=-publicdate`,
-        },
         {
           title: 'Grateful Dead',
           url: `${prefix}/details/GratefulDead`,
@@ -119,10 +115,6 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
           title: 'All Images',
           url: `${prefix}/details/image`,
         },
-        {
-          title: 'This Just In',
-          url: `${prefix}/search.php?query=mediatype:image&sort=-publicdate`,
-        },
         {
           title: 'Flickr Commons',
           url: `${prefix}/details/flickrcommons`,
@@ -212,10 +204,6 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
           title: 'All Software',
           url: `${prefix}/details/software`,
         },
-        {
-          title: 'This Just In',
-          url: `${prefix}/search.php?query=mediatype:software&sort=-publicdate`,
-        },
         {
           title: 'Old School Emulation',
           url: `${prefix}/details/tosec`,
@@ -293,32 +281,24 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
       ],
     },
     texts: {
-      heading: 'Books',
+      heading: 'Texts',
       iconLinks: [
-        {
-          title: 'Books to Borrow',
-          icon: `${prefix}/images/book-lend.png`,
-          url: `${prefix}/details/inlibrary`,
-        },
         {
           title: 'Open Library',
           icon: `${prefix}/images/widgetOL.png`,
           url: 'https://openlibrary.org/',
         },
-      ],
-      featuredLinks: [
         {
-          title: 'All Books',
-          url: `${prefix}/details/books`,
+          title: 'American Libraries',
+          icon: `${prefix}/services/img/americana`,
+          url: `${prefix}/details/americana`,
         },
+      ],
+      featuredLinks: [
         {
           title: 'All Texts',
           url: `${prefix}/details/texts`,
         },
-        {
-          title: 'This Just In',
-          url: `${prefix}/search.php?query=mediatype:texts&sort=-publicdate`,
-        },
         {
           title: 'Smithsonian Libraries',
           url: `${prefix}/details/smithsonian`,
@@ -443,10 +423,6 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
           title: 'All Video',
           url: `${prefix}/details/movies`,
         },
-        {
-          title: 'This Just In',
-          url: `${prefix}/search.php?query=mediatype:movies&sort=-publicdate`,
-        },
         {
           title: 'Prelinger Archives',
           url: `${prefix}/details/prelinger`,

package/src/dropdown-menu.js

@@ -57,7 +57,6 @@ 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/ia-topnav.js

@@ -62,7 +62,6 @@ export default class IATopNav extends LitElement {
       username: { type: String },
       userProfileImagePath: { type: String },
       secondIdentitySlotMode: { type: String },
-      currentTab: { type: Object },
     };
   }
 
@@ -78,7 +77,6 @@ export default class IATopNav extends LitElement {
     this.searchIn = '';
     this.selectedMenuOption = '';
     this.secondIdentitySlotMode = '';
-    this.currentTab = {};
   }
 
   updated(props) {
@@ -276,7 +274,6 @@ 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}
@@ -292,8 +289,6 @@ 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}
@@ -310,7 +305,6 @@ export default class IATopNav extends LitElement {
       <desktop-subnav
         .baseHost=${this.baseHost}
         .menuItems=${this.desktopSubnavMenuItems}
-        @focus=${this.closeMenus}
       ></desktop-subnav>
       <div id="close-layer" class="${this.closeLayerClass}" @click=${this.closeMenus}></div>
     `;

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,26 +95,14 @@ 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'}"
       >
         ${this.menuItem}
       </a>

package/src/media-menu.js

@@ -15,7 +15,7 @@ const menuSelection = [
     icon: 'texts',
     menu: 'texts',
     href: '/details/texts',
-    label: 'Books',
+    label: 'Texts',
   },
   {
     icon: 'video',
@@ -67,11 +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 +75,8 @@ 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();
-            // }
-          }
-        }
-      });
-
-      // 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 +86,6 @@ class MediaMenu extends LitElement {
       followable,
     }) => {
       const selected = this.selectedMenuOption === menu;
-      // this.focusOn = 
       return html`
         <media-button
           .config=${this.config}
@@ -189,9 +96,7 @@ class MediaMenu extends LitElement {
           .mediatype=${menu}
           .openMenu=${this.openMenu}
           .selected=${selected}
-          .selectedMenuOption=${this.selectedMenuOption}
           data-mediatype="${menu}"
-          .focusOn=${this.focusOn}
         ></media-button>
       `;
     });
@@ -212,6 +117,7 @@ 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,7 +1,6 @@
 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() {
@@ -27,19 +26,6 @@ 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;
 
@@ -61,49 +47,49 @@ class MediaSlider extends LitElement {
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'audio' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'audio' ? '' : 'hidden'}"
                 menu="audio"
                 .menuItems=${this.menus.audio}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'images' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'images' ? '' : 'hidden'}"
                 menu="images"
                 .menuItems=${this.menus.images}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'software' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'software' ? '' : 'hidden'}"
                 menu="software"
                 .menuItems=${this.menus.software}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'texts' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'texts' ? '' : 'hidden'}"
                 menu="texts"
                 .menuItems=${this.menus.texts}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'video' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'video' ? '' : 'hidden'}"
                 menu="video"
                 .menuItems=${this.menus.video}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'web' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'web' ? '' : 'hidden'}"
                 menu="web"
                 .menuItems=${this.menus.web}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'more' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'more' ? '' : 'hidden'}"
                 menu="more"
                 .menuItems=${this.menus.more}
               ></media-subnav>

package/src/nav-search.js

@@ -34,6 +34,13 @@ 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');
@@ -98,14 +105,13 @@ class NavSearch extends TrackedElement {
             class="search-field"
             placeholder="Search"
             autocomplete="off"
-            value=${this.searchQuery || ''}
             @focus=${this.toggleSearchMenu}
+            value=${this.searchQuery || ''}
           />
           ${this.searchInsideInput}
           <button
             type="submit"
             class="search"
-            tabindex="-1"
             data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
           >
             ${icons.search}

package/src/primary-nav.js

@@ -31,7 +31,6 @@ class PrimaryNav extends TrackedElement {
       userMenuOpen: { type: Boolean },
       username: { type: String },
       userProfileImagePath: { type: String },
-      currentTab: { type: Object },
     };
   }
 
@@ -45,7 +44,6 @@ class PrimaryNav extends TrackedElement {
     this.userMenuOpen = false;
     this.mediaBaseHost = 'https://archive.org';
     this.secondIdentitySlotMode = '';
-    this.currentTab = {};
   }
 
   toggleMediaMenu(e) {
@@ -154,11 +152,7 @@ class PrimaryNav extends TrackedElement {
   }
 
   get uploadButtonTemplate() {
-    return html`
-      <a href="${formatUrl('/create', this.baseHost)}"
-        class="upload"
-        @focus=${this.toggleMediaMenu}
-      >
+    return html`<a href="${formatUrl('/create', this.baseHost)}" class="upload">
       ${icons.upload}
       <span>Upload</span>
     </a>`;
@@ -187,15 +181,6 @@ 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)}
@@ -203,25 +188,34 @@ 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}
         </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>
-        <div class="right-side-section">
-          ${this.mobileDonateHeart}
-          ${this.userStateTemplate}
-          ${this.uploadButtonTemplate}
-          ${this.searchMenu}
-        </div>
+        <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>
       </nav>
     `;
   }

package/src/search-menu.js

@@ -29,36 +29,6 @@ class SearchMenu extends TrackedElement {
     this.selectedSearchType = '';
   }
 
-  firstUpdated() {
-    this.shadowRoot.addEventListener('keydown', e => this.handleKeyDownEvent(e));
-  }
-
-  disconnectedCallback() {
-    // Clean up event listener when the element is removed
-    this.shadowRoot.removeEventListener('keydown', e => this.handleKeyDownEvent(e));
-  }
-
-  handleKeyDownEvent(e) {
-    const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
-
-    const length = searchTypes.length - 1;
-    if (!length) return;
-
-    const searchTypeHandler = (index) => {
-      e.preventDefault();
-      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;
   }

package/src/styles/dropdown-menu.js

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

package/src/styles/media-menu.js

@@ -24,7 +24,7 @@ export default css`
   /* Mobile view styles */
   @media (max-width: 889px) {
     .media-menu-container {
-      // position: relative;
+      position: relative;
     }
 
     .media-menu-inner {
@@ -39,7 +39,7 @@ export default css`
     .overflow-clip {
       position: absolute;
       z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
-      top: 4rem;
+      top: 0;
       left: 0;
       height: 0;
       width: 100%;

package/src/styles/primary-nav.js

@@ -10,8 +10,7 @@ export default css`
   nav {
     position: relative;
     display: -ms-grid;
-    // display: grid;
-    display: flex;
+    display: grid;
     height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
@@ -30,7 +29,6 @@ export default css`
 
   .right-side-section {
     display: flex;
-    margin-left: auto;
     user-select: none;
   }
   button {
@@ -88,9 +86,6 @@ export default css`
     fill: var(--activeColor);
   }
 
-  .mobile-donate-link {
-    display: inline-block;
-  }
   .mobile-donate-link svg {
     height: 4rem;
     width: 4rem;
@@ -156,8 +151,7 @@ export default css`
     height: 100%;
   }
 
-  .user-menu:hover,
-  .user-menu:focus {
+  .user-menu:hover {
     color: var(--linkHoverColor);
   }
 
@@ -193,13 +187,6 @@ 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) {
@@ -208,8 +195,12 @@ export default css`
       --userIconHeight: 3.2rem;
     }
 
+    .right-side-section {
+      display: contents;
+    }
+
     nav {
-      display: flex;
+      display: block;
       z-index: 4;
       height: 5rem;
       padding-right: 1.5rem;

package/src/styles/search-menu.js

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

package/src/user-menu.js

@@ -1,7 +1,6 @@
 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() {
@@ -22,19 +21,6 @@ class UserMenu extends DropdownMenu {
     this.username = '';
   }
 
-  updated(props) {
-    if (props.has('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">

package/src/lib/keyboard-navigation.js

@@ -1,124 +0,0 @@
-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);
-    } 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) {
-    if (this.menuOption !== 'usermenu') {
-      const isShiftPressed = event.shiftKey;
-      this.focusNextMenuItem(isShiftPressed);
-    }
-
-    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',
-        },
-      })
-    );
-  }
-}