@internetarchive/ia-topnav 1.3.6 → 1.3.7-0

package/src/lib/keyboard-navigation.js

@@ -0,0 +1,128 @@
+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, [tabindex]:not([tabindex="-1"])';
+    const isDisabledOrHidden = el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
+
+    let elements;
+    if (this.menuOption === 'web') {
+      // wayback focusable elements
+      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));
+
+      // wayback save-form focusable elements
+      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 for topnav sub-nav and usermenu
+   * @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) {
+      const isShiftPressed = event.shiftKey;
+      this.focusToOtherMenuItems(isShiftPressed);
+    }
+
+    this.focusableElements[this.focusedIndex]?.blur();
+    event.preventDefault();
+  }
+
+  /**
+   * Focuses the other parent menu items based on the provided flag.
+   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+   */
+  focusToOtherMenuItems(isPrevious = false) {
+    this.elementsContainer.dispatchEvent(
+      new CustomEvent('focusToOtherMenuItem', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.menuOption,
+          moveTo: isPrevious ? 'prev' : 'next',
+        },
+      })
+    );
+  }
+}

package/src/lib/location-handler.js

@@ -1,5 +1,5 @@
-/* istanbul ignore file */
-
-export default function (url) {
-  window.location = url;
-}
+/* istanbul ignore file */
+
+export default function (url) {
+  window.location = url;
+}

package/src/lib/query-handler.js

@@ -1,7 +1,7 @@
-/* istanbul ignore file */
-
-export default {
-  performQuery(query) {
-    window.location = `https://web.archive.org/web/*/${query}`;
-  }
-};
+/* istanbul ignore file */
+
+export default {
+  performQuery(query) {
+    window.location = `https://web.archive.org/web/*/${query}`;
+  }
+};

package/src/lib/toSentenceCase.js

@@ -1,8 +1,8 @@
-const toSentenceCase = (phrase) => {
-  const words = phrase.split(' ');
-  const lastWord = words.pop();
-  const capitalizedWord = `${lastWord.substr(0, 1).toUpperCase()}${lastWord.substr(1)}`;
-  return words.length ? toSentenceCase(`${words.join(' ')}${capitalizedWord}`) : capitalizedWord;
-};
-
-export default toSentenceCase;
+const toSentenceCase = (phrase) => {
+  const words = phrase.split(' ');
+  const lastWord = words.pop();
+  const capitalizedWord = `${lastWord.substr(0, 1).toUpperCase()}${lastWord.substr(1)}`;
+  return words.length ? toSentenceCase(`${words.join(' ')}${capitalizedWord}`) : capitalizedWord;
+};
+
+export default toSentenceCase;

package/src/login-button.js

@@ -1,79 +1,79 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import loginButtonCSS from './styles/login-button.js';
-import formatUrl from './lib/formatUrl.js';
-
-class LoginButton extends TrackedElement {
-  static get styles() {
-    return loginButtonCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      openMenu: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-  }
-
-  get signupPath() {
-    return formatUrl('/account/signup', this.baseHost);
-  }
-
-  get loginPath() {
-    return formatUrl('/account/login', this.baseHost);
-  }
-
-  get analyticsEvent() {
-    return `${this.config.eventCategory}|NavLoginIcon`;
-  }
-
-  get menuOpened() {
-    return this.openMenu === 'login';
-  }
-
-  get avatarClass() {
-    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
-  }
-
-  toggleDropdown(e) {
-    e.preventDefault();
-    this.trackClick(e);
-    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
-    this.dispatchEvent(new CustomEvent('menuToggled', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        menuName: 'login'
-      }
-    }));
-  }
-
-  render() {
-    return html`
-      <div class="logged-out-toolbar">
-        <a
-          class="${this.avatarClass}"
-          @click=${this.toggleDropdown}
-          data-event-click-tracking="${this.analyticsEvent}"
-        >
-          ${icons.user}
-        </a>
-        <span>
-        <a href="${this.signupPath}">Sign up</a>
-        |
-        <a href="${this.loginPath}">Log in</a>
-        </span>
-      </div>
-    `;
-  }
-}
-
-customElements.define('login-button', LoginButton);
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import loginButtonCSS from './styles/login-button.js';
+import formatUrl from './lib/formatUrl.js';
+
+class LoginButton extends TrackedElement {
+  static get styles() {
+    return loginButtonCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      openMenu: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+  }
+
+  get signupPath() {
+    return formatUrl('/account/signup', this.baseHost);
+  }
+
+  get loginPath() {
+    return formatUrl('/account/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened() {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e) {
+    e.preventDefault();
+    this.trackClick(e);
+    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+    this.dispatchEvent(new CustomEvent('menuToggled', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        menuName: 'login'
+      }
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="logged-out-toolbar">
+        <a
+          class="${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+        >
+          ${icons.user}
+        </a>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('login-button', LoginButton);

package/src/media-button.js

@@ -1,113 +1,113 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import mediaButtonCSS from './styles/media-button.js';
-
-class MediaButton extends TrackedElement {
-  static get styles() {
-    return mediaButtonCSS;
-  }
-
-  static get properties() {
-    return {
-      config: { type: Object },
-      icon: { type: String },
-      href: { type: String },
-      label: { type: String },
-      mediatype: { type: String },
-      openMenu: { type: String },
-      selected: { type: Boolean },
-      followable: { type: Boolean },
-    };
-  }
-
-  static get icons() {
-    return icons;
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.icon = '';
-    this.href = '';
-    this.label = '';
-    this.mediatype = '';
-    this.openMenu = '';
-    this.selected = false;
-    this.followable = false;
-  }
-
-  onClick(e) {
-    this.trackClick(e);
-    e.preventDefault();
-    // On desktop viewport widths, the media subnav is always visible. To
-    // ensure the media subnav is open on mobile if the viewport is
-    // resized, the openMenu needs to be set to 'media'.
-    if (this.openMenu !== 'media') {
-      this.dispatchMenuToggledEvent();
-    }
-    this.dispatchMediaTypeSelectedEvent();
-  }
-
-  dispatchMenuToggledEvent() {
-    this.dispatchEvent(new CustomEvent('menuToggled', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        menuName: 'media'
-      }
-    }));
-  }
-
-  dispatchMediaTypeSelectedEvent() {
-    this.dispatchEvent(new CustomEvent('mediaTypeSelected', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        mediatype: this.mediatype
-      }
-    }));
-  }
-
-  get buttonClass() {
-    return this.selected ? 'selected' : '';
-  }
-
-  get tooltipPrefix() {
-    return this.selected ? 'Collapse' : 'Expand';
-  }
-
-  get iconClass() {
-    return this.selected ? 'active' : '';
-  }
-
-  get analyticsEvent() {
-    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
-  }
-
-  get menuItem() {
-    return html`
-      <span class="icon ${this.iconClass}">
-        ${MediaButton.icons[this.icon]}
-      </span>
-      <span class="label">${this.label}</span>
-    `;
-  }
-
-  render() {
-    return html`
-      <a
-        href="${this.href}"
-        class="menu-item ${this.mediatype} ${this.buttonClass}"
-        @click=${this.followable ? this.trackClick : this.onClick}
-        data-event-click-tracking="${this.analyticsEvent}"
-        title="${this.tooltipPrefix} ${this.mediatype} menu"
-      >
-        ${this.menuItem}
-      </a>
-    `;
-  }
-}
-
-customElements.define('media-button', MediaButton);
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import mediaButtonCSS from './styles/media-button.js';
+
+class MediaButton extends TrackedElement {
+  static get styles() {
+    return mediaButtonCSS;
+  }
+
+  static get properties() {
+    return {
+      config: { type: Object },
+      icon: { type: String },
+      href: { type: String },
+      label: { type: String },
+      mediatype: { type: String },
+      openMenu: { type: String },
+      selected: { type: Boolean },
+      followable: { type: Boolean },
+    };
+  }
+
+  static get icons() {
+    return icons;
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.icon = '';
+    this.href = '';
+    this.label = '';
+    this.mediatype = '';
+    this.openMenu = '';
+    this.selected = false;
+    this.followable = false;
+  }
+
+  onClick(e) {
+    this.trackClick(e);
+    e.preventDefault();
+    // On desktop viewport widths, the media subnav is always visible. To
+    // ensure the media subnav is open on mobile if the viewport is
+    // resized, the openMenu needs to be set to 'media'.
+    if (this.openMenu !== 'media') {
+      this.dispatchMenuToggledEvent();
+    }
+    this.dispatchMediaTypeSelectedEvent();
+  }
+
+  dispatchMenuToggledEvent() {
+    this.dispatchEvent(new CustomEvent('menuToggled', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        menuName: 'media'
+      }
+    }));
+  }
+
+  dispatchMediaTypeSelectedEvent() {
+    this.dispatchEvent(new CustomEvent('mediaTypeSelected', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        mediatype: this.mediatype
+      }
+    }));
+  }
+
+  get buttonClass() {
+    return this.selected ? 'selected' : '';
+  }
+
+  get tooltipPrefix() {
+    return this.selected ? 'Collapse' : 'Expand';
+  }
+
+  get iconClass() {
+    return this.selected ? 'active' : '';
+  }
+
+  get analyticsEvent() {
+    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
+  }
+
+  get menuItem() {
+    return html`
+      <span class="icon ${this.iconClass}">
+        ${MediaButton.icons[this.icon]}
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+  }
+
+  render() {
+    return html`
+      <a
+        href="${this.href}"
+        class="menu-item ${this.mediatype} ${this.buttonClass}"
+        @click=${this.followable ? this.trackClick : this.onClick}
+        data-event-click-tracking="${this.analyticsEvent}"
+        title="${this.tooltipPrefix} ${this.mediatype} menu"
+      >
+        ${this.menuItem}
+      </a>
+    `;
+  }
+}
+
+customElements.define('media-button', MediaButton);