@internetarchive/ia-topnav 1.3.5-alpha9 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha9",
+  "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,12 +77,11 @@ 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();
     }
   }
@@ -201,7 +199,6 @@ export default class IATopNav extends LitElement {
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
-        @moveFocusToOthers=${(e) => this.currentTab = e.detail}
       ></user-menu>
     `;
   }
@@ -277,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}
@@ -293,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}
@@ -311,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/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

@@ -15,7 +15,7 @@ const menuSelection = [
     icon: 'texts',
     menu: 'texts',
     href: '/details/texts',
-    label: 'Books',
+    label: 'Texts',
   },
   {
     icon: 'video',
@@ -67,7 +67,6 @@ class MediaMenu extends LitElement {
       config: { type: Object },
       openMenu: { type: String },
       selectedMenuOption: { type: String },
-      currentTab: { type: Object },
     };
   }
 
@@ -76,25 +75,6 @@ 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() {
@@ -116,7 +96,6 @@ class MediaMenu extends LitElement {
           .mediatype=${menu}
           .openMenu=${this.openMenu}
           .selected=${selected}
-          .selectedMenuOption=${this.selectedMenuOption}
           data-mediatype="${menu}"
         ></media-button>
       `;
@@ -138,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) {
@@ -81,21 +79,6 @@ 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';
@@ -169,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>`;
@@ -202,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)}
@@ -218,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

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

@@ -9,7 +9,8 @@ export default css`
 
   nav {
     position: relative;
-    display: flex;
+    display: -ms-grid;
+    display: grid;
     height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
@@ -28,7 +29,6 @@ export default css`
 
   .right-side-section {
     display: flex;
-    margin-left: auto;
     user-select: none;
   }
   button {
@@ -86,9 +86,6 @@ export default css`
     fill: var(--activeColor);
   }
 
-  .mobile-donate-link {
-    display: inline-block;
-  }
   .mobile-donate-link svg {
     height: 4rem;
     width: 4rem;
@@ -154,8 +151,7 @@ export default css`
     height: 100%;
   }
 
-  .user-menu:hover,
-  .user-menu:focus {
+  .user-menu:hover {
     color: var(--linkHoverColor);
   }
 
@@ -191,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) {
@@ -206,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') && 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">

package/src/lib/keyboard-navigation.js

@@ -1,130 +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);
-      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',
-        },
-      })
-    );
-  }
-}