@internetarchive/ia-topnav 1.3.30 → 1.4.1-alpha-webdev8259.0

package/src/lib/keyboard-navigation.ts

@@ -1,166 +1,166 @@
-export default class KeyboardNavigation {
-  elementsContainer: HTMLElement;
-  menuOption: string;
-  focusableElements: HTMLElement[];
-  focusedIndex: number;
-
-  /**
-   * 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: HTMLElement, menuOption: string) {
-    this.elementsContainer = elementsContainer;
-    this.menuOption = menuOption;
-    this.focusableElements = this.getFocusableElements();
-    this.focusedIndex = 0; // always start from first element
-
-    if (menuOption !== 'search') {
-      this.focusableElements[this.focusedIndex]?.focus();
-    }
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  /**
-   * Gets an array of focusable elements within the container.
-   * @returns {HTMLElement[]} An array of focusable elements.
-   */
-  getFocusableElements(): HTMLElement[] {
-    const focusableTagSelectors = 'a[href], button, input, [tabindex]';
-
-    const isFocusable = (el: Element) =>
-      !el.hasAttribute('disabled') &&
-      el.getAttribute('aria-hidden') !== 'true' &&
-      el.getAttribute('tabindex') !== '-1';
-
-    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(isFocusable) as HTMLElement[];
-  }
-
-  /**
-   * Handles keyboard events and focuses the appropriate element.
-   * @param {KeyboardEvent} event - The keyboard event object.
-   */
-  handleKeyDown(event: KeyboardEvent) {
-    const target = event.composedPath()[0] as HTMLElement;
-
-    // Ignore events from editable fields
-    if (
-      target instanceof HTMLInputElement ||
-      target instanceof HTMLTextAreaElement ||
-      target.isContentEditable
-    ) {
-      return;
-    }
-
-    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: string) {
-    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
-    if (isDownOrRight) {
-      this.focusNext();
-    } else {
-      this.focusPrevious();
-    }
-  }
-
-  /**
-   * Handles the Tab key event and focuses the next or previous menu item.
-   * @param {KeyboardEvent} event - The keyboard event object.
-   */
-  handleTabKey(event: KeyboardEvent) {
-    const isShiftPressed = event.shiftKey;
-
-    this.emitFocusToOtherMenuItems(isShiftPressed);
-
-    this.focusableElements[this.focusedIndex]?.blur();
-    if (!['search'].includes(this.menuOption)) {
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * 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();
-  }
-
-  /**
-   * Focuses the other parent menu items based on the provided flag.
-   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
-   */
-  emitFocusToOtherMenuItems(isPrevious: boolean = false) {
-    this.elementsContainer.dispatchEvent(
-      new CustomEvent('focusToOtherMenuItem', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          mediatype: this.menuOption,
-          moveTo: isPrevious ? 'prev' : 'next',
-        },
-      }),
-    );
-  }
-}
+export default class KeyboardNavigation {
+  elementsContainer: HTMLElement;
+  menuOption: string;
+  focusableElements: HTMLElement[];
+  focusedIndex: number;
+
+  /**
+   * 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: HTMLElement, menuOption: string) {
+    this.elementsContainer = elementsContainer;
+    this.menuOption = menuOption;
+    this.focusableElements = this.getFocusableElements();
+    this.focusedIndex = 0; // always start from first element
+
+    if (menuOption !== 'search') {
+      this.focusableElements[this.focusedIndex]?.focus();
+    }
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  /**
+   * Gets an array of focusable elements within the container.
+   * @returns {HTMLElement[]} An array of focusable elements.
+   */
+  getFocusableElements(): HTMLElement[] {
+    const focusableTagSelectors = 'a[href], button, input, [tabindex]';
+
+    const isFocusable = (el: Element) =>
+      !el.hasAttribute('disabled') &&
+      el.getAttribute('aria-hidden') !== 'true' &&
+      el.getAttribute('tabindex') !== '-1';
+
+    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(isFocusable) as HTMLElement[];
+  }
+
+  /**
+   * Handles keyboard events and focuses the appropriate element.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleKeyDown(event: KeyboardEvent) {
+    const target = event.composedPath()[0] as HTMLElement;
+
+    // Ignore events from editable fields
+    if (
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target.isContentEditable
+    ) {
+      return;
+    }
+
+    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: string) {
+    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
+    if (isDownOrRight) {
+      this.focusNext();
+    } else {
+      this.focusPrevious();
+    }
+  }
+
+  /**
+   * Handles the Tab key event and focuses the next or previous menu item.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleTabKey(event: KeyboardEvent) {
+    const isShiftPressed = event.shiftKey;
+
+    this.emitFocusToOtherMenuItems(isShiftPressed);
+
+    this.focusableElements[this.focusedIndex]?.blur();
+    if (!['search'].includes(this.menuOption)) {
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * 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();
+  }
+
+  /**
+   * Focuses the other parent menu items based on the provided flag.
+   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+   */
+  emitFocusToOtherMenuItems(isPrevious: boolean = false) {
+    this.elementsContainer.dispatchEvent(
+      new CustomEvent('focusToOtherMenuItem', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.menuOption,
+          moveTo: isPrevious ? 'prev' : 'next',
+        },
+      }),
+    );
+  }
+}

package/src/login-button.ts

@@ -1,78 +1,78 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import icons from './assets/img/icons';
-import loginButtonCSS from './styles/login-button';
-import formatUrl from './lib/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { customElement, property, state } from 'lit/decorators.js';
-import { IATopNavConfig } from './models';
-import { defaultTopNavConfig } from './data/menus';
-
-@customElement('login-button')
-export class LoginButton extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: String }) openMenu = '';
-
-  @state() private dropdownTabIndex = '';
-
-  static get styles() {
-    return loginButtonCSS;
-  }
-
-  get signupPath() {
-    return formatUrl('/account/signup', this.baseHost);
-  }
-
-  get loginPath() {
-    return formatUrl('/login', this.baseHost);
-  }
-
-  get analyticsEvent() {
-    return `${this.config?.eventCategory}|NavLoginIcon`;
-  }
-
-  get menuOpened(): boolean {
-    return this.openMenu === 'login';
-  }
-
-  get avatarClass() {
-    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
-  }
-
-  toggleDropdown(e: Event) {
-    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">
-        <button
-          class="logged-out-menu ${this.avatarClass}"
-          @click=${this.toggleDropdown}
-          data-event-click-tracking="${this.analyticsEvent}"
-          aria-label="Toggle login menu"
-          aria-expanded="${makeBooleanString(this.menuOpened)}"
-        >
-          ${icons.user}
-        </button>
-        <span>
-          <a href="${this.signupPath}">Sign up</a>
-          |
-          <a href="${this.loginPath}">Log in</a>
-        </span>
-      </div>
-    `;
-  }
-}
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import loginButtonCSS from './styles/login-button';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { customElement, property, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('login-button')
+export class LoginButton extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+
+  @state() private dropdownTabIndex = '';
+
+  static get styles() {
+    return loginButtonCSS;
+  }
+
+  get signupPath() {
+    return formatUrl('/account/signup', this.baseHost);
+  }
+
+  get loginPath() {
+    return formatUrl('/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config?.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened(): boolean {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e: Event) {
+    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">
+        <button
+          class="logged-out-menu ${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+          aria-label="Toggle login menu"
+          aria-expanded="${makeBooleanString(this.menuOpened)}"
+        >
+          ${icons.user}
+        </button>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}