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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha7",
+  "version": "1.3.5-alpha8",
   "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,6 +78,7 @@ export default class IATopNav extends LitElement {
     this.searchIn = '';
     this.selectedMenuOption = '';
     this.secondIdentitySlotMode = '';
+    this.currentTab = {};
   }
 
   updated(props) {
@@ -274,6 +276,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 +292,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,124 @@
+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',
+        },
+      })
+    );
+  }
+}

package/src/login-button.js

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

package/src/media-button.js

@@ -18,6 +18,7 @@ class MediaButton extends TrackedElement {
       mediatype: { type: String },
       openMenu: { type: String },
       selected: { type: Boolean },
+      selectedMenuOption: { type: String },
       followable: { type: Boolean },
     };
   }
@@ -35,9 +36,16 @@ 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();
@@ -95,15 +103,26 @@ 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' ? '' : '-1'}"
+        tabindex="${this.openMenu === 'media' ? '' : '0'}"
       >
         ${this.menuItem}
       </a>

package/src/media-menu.js

@@ -67,6 +67,11 @@ class MediaMenu extends LitElement {
       config: { type: Object },
       openMenu: { type: String },
       selectedMenuOption: { type: String },
+
+      isSubMenuOpen: { type: Boolean },
+      focusedIndex: { type: Number },
+
+      currentTab: { type: Object },
     };
   }
 
@@ -75,8 +80,95 @@ 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,
@@ -86,6 +178,7 @@ class MediaMenu extends LitElement {
       followable,
     }) => {
       const selected = this.selectedMenuOption === menu;
+      // this.focusOn = 
       return html`
         <media-button
           .config=${this.config}
@@ -96,7 +189,9 @@ class MediaMenu extends LitElement {
           .mediatype=${menu}
           .openMenu=${this.openMenu}
           .selected=${selected}
+          .selectedMenuOption=${this.selectedMenuOption}
           data-mediatype="${menu}"
+          .focusOn=${this.focusOn}
         ></media-button>
       `;
     });
@@ -117,7 +212,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) {
@@ -87,7 +89,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 +108,6 @@ class PrimaryNav extends TrackedElement {
         .config=${this.config}
         .dropdownOpen=${this.signedOutMenuOpen}
         .openMenu=${this.openMenu}
-        tabindex="-1"
         @signedOutMenuToggled=${this.signedOutMenuToggled}
       ></login-button>
     `;
@@ -157,7 +157,6 @@ class PrimaryNav extends TrackedElement {
     return html`
       <a href="${formatUrl('/create', this.baseHost)}"
         class="upload"
-        tabindex="1"
         @focus=${this.toggleMediaMenu}
       >
       ${icons.upload}
@@ -188,6 +187,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 +208,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

@@ -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: 0;
+      top: 4rem;
       left: 0;
       height: 0;
       width: 100%;

package/src/styles/primary-nav.js

@@ -10,7 +10,8 @@ export default css`
   nav {
     position: relative;
     display: -ms-grid;
-    display: 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 +30,7 @@ export default css`
 
   .right-side-section {
     display: flex;
+    margin-left: auto;
     user-select: none;
   }
   button {
@@ -86,6 +88,9 @@ export default css`
     fill: var(--activeColor);
   }
 
+  .mobile-donate-link {
+    display: inline-block;
+  }
   .mobile-donate-link svg {
     height: 4rem;
     width: 4rem;
@@ -151,7 +156,8 @@ export default css`
     height: 100%;
   }
 
-  .user-menu:hover {
+  .user-menu:hover,
+  .user-menu:focus {
     color: var(--linkHoverColor);
   }
 
@@ -187,6 +193,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 +208,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')) {
+      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">