@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/js/tabs/Tabs.js

@@ -0,0 +1,1091 @@
+/**
+ * @file
+ * The Tab class.
+ */
+
+import TabToggle from "./TabToggle.js";
+import {
+  isValidInstance,
+  isValidType,
+  isValidClassList,
+  isQuerySelector,
+  isValidState,
+  isValidEvent,
+} from "../validate.js";
+import { addClass, removeClass } from "../domHelpers.js";
+import { keyPress, preventEvent } from "../eventHandlers.js";
+import storage from "../storage.js";
+
+class Tabs {
+  /**
+   * The DOM elements within the tab.
+   *
+   * @protected
+   *
+   * @type {Object<HTMLElement, HTMLElement[]>}
+   *
+   * @property {HTMLElement}   tabs       - The tabs element.
+   * @property {HTMLElement}   tabList    - The tab list element.
+   * @property {HTMLElement[]} tabToggle  - An array of tab item toggles.
+   * @property {HTMLElement[]} tabContent - An array of tab item contents.
+   */
+  _dom = {
+    tabs: null,
+    tabList: null,
+    tabToggle: [],
+    tabContent: [],
+  };
+
+  /**
+   * The DOM elements within the tab that cannot be reset or generated by the tab.
+   *
+   * @protected
+   *
+   * @type {string[]}
+   */
+  _domLock = ["tab"];
+
+  /**
+   * The query selectors used by the tab.
+   *
+   * @protected
+   *
+   * @type {Object<string>}
+   *
+   * @property {string} tabList    - The query selector for the tab list.
+   * @property {string} tabToggle  - The query selector for tab toggles.
+   * @property {string} tabContent - The query selector for tab contents.
+   */
+  _selectors = {
+    tabList: "",
+    tabToggle: "",
+    tabContent: "",
+  };
+
+  /**
+   * The declared elements within the tabs.
+   *
+   * @protected
+   *
+   * @type {Object<TabToggle[]>}
+   *
+   * @property {TabToggle[]} tabToggle - The list of tab items.
+   */
+  _elements = {
+    tabToggle: [],
+  };
+
+  /**
+   * The classes to apply when the tabs are in various states.
+   *
+   * @protected
+   *
+   * @type {Object<string, string[]>}
+   *
+   * @property {string|string[]} open         - The class(es) to apply when the tab is open.
+   * @property {string|string[]} close        - The class(es) to apply when the tab is closed.
+   * @property {string|string[]} transition   - The class(es) to apply when the tab is transitioning between states.
+   * @property {string|string[]} initialize - The class(es) to apply when the tab is initializing.
+   */
+  _classes = {
+    open: "show",
+    close: "hide",
+    transition: "transitioning",
+    initialize: "initializing",
+  };
+
+  /**
+   * The duration times (in milliseconds) for various things throughout the tabs.
+   *
+   * @protected
+   *
+   * @type {Object<number>}
+   *
+   * @property {number} transition - The duration time (in milliseconds) for the transition between open and closed states.
+   * @property {number} open       - The duration time (in milliseconds) for the transition from closed to open states.
+   * @property {number} close      - The duration time (in milliseconds) for the transition from open to closed states.
+   */
+  _durations = {
+    transition: 250,
+    open: -1,
+    close: -1,
+  };
+
+  /**
+   * The current state of the tab's focus.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _focusState = "none";
+
+  /**
+   * This last event triggered on the tab.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _currentEvent = "none";
+
+  /**
+   * A flag to set if focusing a tab item toggle will automatically activate it.
+   *
+   * @protected
+   *
+   * @type {boolean}
+   */
+  _automatic = false;
+
+  /**
+   * The index of the current child node.
+   *
+   * @protected
+   *
+   * @type {number}
+   */
+  _currentChild = 0;
+
+  /**
+   * The prefix to use for CSS custom properties.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _prefix = "graupl-";
+
+  /**
+   * The key used to generate IDs throughout the tab.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _key = "";
+
+  /**
+   * errors - The list of errors found during validation.
+   *
+   * @protected
+   *
+   * @type {string[]}
+   */
+  _errors = [];
+
+  /**
+   * Constructs a new `Tab`.
+   *
+   * @param {object}             options                                     - The options for generating the tab.
+   * @param {HTMLElement}        [options.tabsElement]                       - The tab element in the DOM.
+   * @param {string}             [options.tabListSelector = .tab-list]       - The query selector string for the tab list.
+   * @param {string}             [options.tabToggleSelector = .tab-toggle]   - The query selector string for tab toggle.
+   * @param {string}             [options.tabContentSelector = .tab-content] - The query selector string for tab content.
+   * @param {?(string|string[])} [options.openClass = show]                  - The class to apply when a tab is "open".
+   * @param {?(string|string[])} [options.closeClass = hide]                 - The class to apply when a tab is "closed".
+   * @param {?(string|string[])} [options.transitionClass = null]            - The class to apply when a tab is transitioning between "open" and "closed" states.
+   * @param {number}             [options.transitionDuration = 300]          - The duration of the transition between "open" and "closed" states (in milliseconds).
+   * @param {number}             [options.openDuration = -1]                 - The duration of the transition from "closed" to "open" states (in milliseconds).
+   * @param {number}             [options.closeDuration = -1]                - The duration of the transition from "open" to "closed" states (in milliseconds).
+   * @param {boolean}            [options.automaticActivation = false]       - A flag to set if focusing a tab item toggle will automatically activate it.
+   * @param {?string}            [options.prefix = graupl-]                  - The prefix to use for CSS custom properties.
+   * @param {?string}            [options.key = null]                        - The key used to generate IDs throughout the tab.
+   * @param {?(string|string[])} [options.initializeClass = initializing]    - The class to apply when a tabs are initialzing.
+   * @param {boolean}            [options.initialize = false]                - A flag to initialize the tab immediately upon creation.
+   */
+  constructor({
+    tabsElement,
+    tabListSelector = ".tab-list",
+    tabToggleSelector = ".tab-toggle",
+    tabContentSelector = ".tab-content",
+    openClass = "show",
+    closeClass = "hide",
+    transitionClass = null,
+    transitionDuration = 300,
+    openDuration = -1,
+    closeDuration = -1,
+    automaticActivation = false,
+    prefix = "graupl-",
+    key = null,
+    initializeClass = "initializing",
+    initialize = false,
+  }) {
+    // Set DOM elements.
+    this._dom.tabs = tabsElement;
+
+    // Set DOM selectors.
+    this._selectors.tabList = tabListSelector;
+    this._selectors.tabToggle = tabToggleSelector;
+    this._selectors.tabContent = tabContentSelector;
+
+    // Set open/close classes.
+    this._classes.open = openClass || "";
+    this._classes.close = closeClass || "";
+    this._classes.transition = transitionClass || "";
+    this._classes.initialize = initializeClass || "";
+
+    // Set transition duration.
+    this._durations.transition = transitionDuration;
+    this._durations.open = openDuration;
+    this._durations.close = closeDuration;
+
+    // Set automatic activation.
+    this._automatic = automaticActivation;
+
+    // Set prefix.
+    this._prefix = prefix || "";
+
+    // Set the key.
+    this._key = key || "";
+
+    if (initialize) {
+      this.initialize();
+    }
+  }
+
+  /**
+   * Initializes the tabs.
+   */
+  initialize() {
+    try {
+      if (!this._validate()) {
+        throw new Error(
+          `Graupl Tab: cannot initialize tab. The following errors have been found:\n - ${this.errors.join(
+            "\n - "
+          )}`
+        );
+      }
+
+      addClass(this._classes.initialize, this.dom.tabs);
+
+      // Set up the DOM.
+      this._generateKey();
+      this._setDOMElements();
+      this._setIds();
+      this._setAriaAttributes();
+
+      // Create the child elements.
+      this._createChildElements();
+
+      // Handle events.
+      this._handleFocus();
+      this._handleClick();
+      this._handleKeydown();
+      this._handleKeyup();
+
+      // // Set the custom props.
+      this._setTransitionDurations();
+
+      // Set up the storage.
+      storage.initializeStorage("tabs");
+      storage.pushToStorage("tabs", this.dom.tabs.id, this);
+
+      if (
+        this.elements.tabToggle.filter((toggle) => toggle.isActive).length === 0
+      ) {
+        this.elements.tabToggle[0].show();
+      }
+
+      requestAnimationFrame(() => {
+        removeClass(this._classes.initialize, this.dom.tabs);
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * The DOM elements of the tab.
+   *
+   * @readonly
+   *
+   * @type {object}
+   *
+   * @see _dom
+   */
+  get dom() {
+    return this._dom;
+  }
+
+  /**
+   * The declared elements of the tabs.
+   *
+   * @readonly
+   *
+   * @type {object}
+   *
+   * @see _elements
+   */
+  get elements() {
+    return this._elements;
+  }
+
+  /**
+   * The selectors used for the tab and tab items.
+   *
+   * @readonly
+   *
+   * @type {boolean}
+   *
+   * @see _selectors
+   */
+  get selectors() {
+    return this._selectors;
+  }
+
+  /**
+   * The class(es) to apply when the tab is open.
+   *
+   * @type {string|string[]}
+   *
+   * @see _classes.open
+   */
+  get openClass() {
+    return this._classes.open;
+  }
+
+  set openClass(value) {
+    isValidClassList({ openClass: value });
+
+    if (this._classes.open !== value) {
+      this._classes.open = value;
+    }
+  }
+
+  /**
+   * The class(es) to apply when the tab is closed.
+   *
+   * @type {string|string[]}
+   *
+   * @see _classes.close
+   */
+  get closeClass() {
+    return this._classes.close;
+  }
+
+  set closeClass(value) {
+    isValidClassList({ closeClass: value });
+
+    if (this._classes.close !== value) {
+      this._classes.close = value;
+    }
+  }
+
+  /**
+   * The class(es) to apply when the tab is transitioning between open and closed.
+   *
+   * @type {string|string[]}
+   *
+   * @see _classes.transition
+   */
+  get transitionClass() {
+    return this._classes.transition;
+  }
+
+  set transitionClass(value) {
+    isValidClassList({ transitionClass: value });
+
+    if (this._classes.transition !== value) {
+      this._classes.transition = value;
+    }
+  }
+
+  /**
+   * The duration time (in milliseconds) for the transition between open and closed states.
+   *
+   * @type {number}
+   *
+   * @see _durations.transition
+   */
+  get transitionDuration() {
+    return this._durations.transition;
+  }
+
+  set transitionDuration(value) {
+    isValidType("number", { value });
+
+    if (this._durations.transition !== value) {
+      this._durations.transition = value;
+      this._setTransitionDurations();
+    }
+  }
+
+  /**
+   * The duration time (in milliseconds) for the transition from closed to open states.
+   *
+   * If openDuration is set to -1, the transitionDuration will be used instead.
+   *
+   * @type {number}
+   *
+   * @see _durations.open
+   */
+  get openDuration() {
+    return this._durations.open === -1
+      ? this.transitionDuration
+      : this._durations.open;
+  }
+
+  set openDuration(value) {
+    isValidType("number", { value });
+
+    if (this._durations.open !== value) {
+      this._durations.open = value;
+      this._setTransitionDurations();
+    }
+  }
+
+  /**
+   * The duration time (in milliseconds) for the transition from open to closed states.
+   *
+   * If closeDuration is set to -1, the transitionDuration will be used instead.
+   *
+   * @type {number}
+   *
+   * @see _durations.close
+   */
+  get closeDuration() {
+    return this._durations.close === -1
+      ? this.transitionDuration
+      : this._durations.close;
+  }
+
+  set closeDuration(value) {
+    isValidType("number", { value });
+
+    if (this._durations.close !== value) {
+      this._durations.close = value;
+      this._setTransitionDurations();
+    }
+  }
+
+  /**
+   * A flag to set if focusing a tab item toggle will automatically activate it.
+   *
+   * @type {boolean}
+   *
+   * @see _automatic
+   */
+  get isAutomatic() {
+    return this._automatic;
+  }
+
+  set isAutomatic(value) {
+    isValidType("boolean", { value });
+
+    if (this._automatic !== value) {
+      this._automatic = value;
+    }
+  }
+
+  /**
+   * The current index of the tab item.
+   *
+   * @readonly
+   *
+   * @type {number}
+   *
+   * @see _currentChild
+   */
+  get currentChild() {
+    return this._currentChild;
+  }
+
+  set currentChild(value) {
+    isValidType("number", { value });
+
+    if (
+      this._currentChild !== value &&
+      value >= 0 &&
+      value < this.elements.tabToggle.length
+    ) {
+      this._currentChild = value;
+    }
+  }
+  /**
+   * The currently selected tab item.
+   *
+   * @readonly
+   *
+   * @type {TabToggle}
+   */
+  get currentTabToggle() {
+    return this.elements.tabToggle[this.currentChild];
+  }
+
+  /**
+   * The current state of the tab's focus.
+   *
+   * @type {string}
+   *
+   * @see _focusState
+   */
+  get focusState() {
+    return this._focusState;
+  }
+
+  set focusState(value) {
+    isValidState({ value });
+
+    if (this._focusState !== value) {
+      this._focusState = value;
+    }
+  }
+
+  /**
+   * The last event triggered on the tabs.
+   *
+   * @type {string}
+   *
+   * @see _currentEvent
+   */
+  get currentEvent() {
+    return this._currentEvent;
+  }
+
+  set currentEvent(value) {
+    isValidEvent({ value });
+
+    if (this._currentEvent !== value) {
+      this._currentEvent = value;
+    }
+  }
+
+  /**
+   * The prefix to use for CSS custom properties.
+   *
+   * @type {string}
+   *
+   * @see _prefix
+   */
+  get prefix() {
+    return this._prefix;
+  }
+
+  set prefix(value) {
+    isValidType("string", { value });
+
+    if (this._prefix !== value) {
+      this._prefix = value;
+    }
+  }
+
+  /**
+   * The key used to generate IDs throughout the tab.
+   *
+   * @readonly
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+
+  /**
+   * An array to hold error messages.
+   *
+   * @readonly
+   *
+   * @type {string[]}
+   *
+   * @see _errors
+   */
+  get errors() {
+    return this._errors;
+  }
+
+  /**
+   * Validates all aspects of the tabs to ensure proper functionality.
+   *
+   * @protected
+   *
+   * @return {boolean} - The result of the validation.
+   */
+  _validate() {
+    let check = true;
+
+    // HTML element checks.
+    const htmlElementChecks = isValidInstance(HTMLElement, {
+      tabsElement: this.dom.tabs,
+    });
+
+    if (!htmlElementChecks) {
+      this._errors.push(htmlElementChecks.message);
+      check = false;
+    }
+
+    // Query selector checks.
+    const querySelectors = {};
+
+    for (const querySelector of Object.keys(this._selectors)) {
+      querySelectors[`${querySelector}Selector`] =
+        this._selectors[querySelector];
+    }
+
+    const querySelectorChecks = isQuerySelector(querySelectors);
+
+    if (!querySelectorChecks) {
+      this._errors.push(querySelectorChecks.message);
+      check = false;
+    }
+
+    // Class list checks.
+    const classes = {};
+
+    for (const className of Object.keys(this._classes)) {
+      if (this._classes[className] === "") {
+        continue;
+      }
+
+      classes[`${className}Class`] = this._classes[className];
+    }
+
+    const classListChecks = isValidClassList(classes);
+
+    if (!classListChecks.status) {
+      this._errors.push(classListChecks.error.message);
+      check = false;
+    }
+
+    // Duration checks.
+    const durations = {};
+
+    for (const durationName of Object.keys(this._durations)) {
+      durations[`${durationName}Duration`] = this._durations[durationName];
+    }
+
+    const durationChecks = isValidType("number", durations);
+
+    if (!durationChecks.status) {
+      this._errors.push(durationChecks.error.message);
+      check = false;
+    }
+
+    // Boolean checks.
+    const booleanCheck = isValidType("boolean", {
+      automaticActivation: this._automatic,
+    });
+
+    if (!booleanCheck.status) {
+      this._errors.push(booleanCheck.error.message);
+      check = false;
+    }
+
+    // Key check.
+    if (this._key !== "") {
+      const keyCheck = isValidType("string", { key: this._key });
+
+      if (!keyCheck.status) {
+        this._errors.push(keyCheck.error.message);
+        check = false;
+      }
+    }
+
+    // Prefix check.
+    const prefixCheck = isValidType("string", { prefix: this._prefix });
+
+    if (!prefixCheck.status) {
+      this._errors.push(prefixCheck.error.message);
+      check = false;
+    }
+
+    return check;
+  }
+
+  /**
+   * Generates a key for the tabs.
+   *
+   * @param {Object<boolean>} [options = {}]               - Options for generating the key.
+   * @param {boolean}         [options.regenerate = false] - A flag to determine if the key should be regenerated.
+   */
+  _generateKey({ regenerate = false } = {}) {
+    if (this.key === "" || regenerate) {
+      this._key = Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substring(0, 10);
+    }
+  }
+
+  /**
+   * Sets the IDs of the tab and it's children if they do not already exist.
+   *
+   * The generated IDs use the key and follow the format:
+   *  - tabs: `tabs-${key}`
+   *  - tab-list: `tab-list-${key}`
+   *
+   * @protected
+   */
+  _setIds() {
+    this.dom.tabs.id = this.dom.tabs.id || `tabs-${this.key}`;
+    this.dom.tabList.id = this.dom.tabList.id || `tab-list-${this.key}`;
+  }
+
+  /**
+   * Sets the ARIA attributes for the tablist.
+   *
+   * @protected
+   */
+  _setAriaAttributes() {
+    this.dom.tabList.setAttribute("role", "tablist");
+  }
+
+  /**
+   * Sets the transition durations of the tab as a CSS custom properties.
+   *
+   * The custom properties are:
+   *   - `--graupl-tabs-transition-duration`,
+   *   - `--graupl-tabs-open-transition-duration`, and
+   *   - `--graupl-tabs-close-transition-duration`.
+   *
+   * The prefix of `graupl-` can be changed by setting the tab's prefix value.
+   *
+   * @protected
+   */
+  _setTransitionDurations() {
+    this.dom.tabs.style.setProperty(
+      `--${this.prefix}tabs-transition-duration`,
+      `${this.transitionDuration}ms`
+    );
+
+    this.dom.tabs.style.setProperty(
+      `--${this.prefix}tabs-open-transition-duration`,
+      `${this.openDuration}ms`
+    );
+
+    this.dom.tabs.style.setProperty(
+      `--${this.prefix}tabs-close-transition-duration`,
+      `${this.closeDuration}ms`
+    );
+  }
+
+  /**
+   * Sets DOM elements.
+   *
+   * Elements listed in _domLock cannot be set using this method.
+   *
+   * @protected
+   *
+   * @param {string}                      elementType                          - The type of element to populate.
+   * @param {Object<HTMLElement,boolean>} [options = {}]                       - The options for setting the DOM element type.
+   * @param {HTMLElement}                 [options.base = this.dom.tabs] - The element used as the base for the querySelector.
+   * @param {boolean}                     [options.overwrite = true]           - A flag to set if the existing elements will be overwritten.
+   * @param {boolean}                     [options.strict = true]              - A flag to set if the elements must be direct children of the base.
+   */
+  _setDOMElementType(
+    elementType,
+    { base = this.dom.tabs, overwrite = true, strict = true } = {}
+  ) {
+    if (typeof this.selectors[elementType] === "string") {
+      if (this._domLock.includes(elementType)) {
+        throw new Error(
+          `Graupl ${this.constructor.name}: "${elementType}" element cannot be set through _setDOMElementType.`
+        );
+      }
+
+      if (base !== this.dom.tabs) isValidInstance(HTMLElement, { base });
+
+      // Get the all elements matching the selector in the base.
+      const domElements = Array.from(
+        base.querySelectorAll(this.selectors[elementType])
+      );
+
+      // Filter the elements so only direct children of the base are kept.
+      const filteredElements = domElements.filter((item) =>
+        strict ? item.parentElement === base : true
+      );
+
+      if (overwrite) {
+        if (Array.isArray(this._dom[elementType])) {
+          this._dom[elementType] = filteredElements;
+        } else {
+          this._dom[elementType] = filteredElements[0] || null;
+        }
+      } else {
+        if (Array.isArray(this._dom[elementType])) {
+          this._dom[elementType] = [
+            ...this._dom[elementType],
+            ...filteredElements,
+          ];
+        } else {
+          this._dom[elementType] = filteredElements[0] || null;
+        }
+      }
+    } else {
+      throw new Error(
+        `Graupl ${this.constructor.name}: "${elementType}" is not a valid element type.`
+      );
+    }
+  }
+
+  /**
+   * Resets DOM elements.
+   *
+   * Elements listed in _domLock cannot be reset using this method.
+   *
+   * @protected
+   *
+   * @param {string} elementType - The type of element to clear.
+   */
+  _resetDOMElementType(elementType) {
+    if (typeof this.selectors[elementType] === "string") {
+      if (this._domLock.includes(elementType)) {
+        throw new Error(
+          `Graupl ${this.constructor.name}: "${elementType}" element cannot be reset through _resetDOMElementType.`
+        );
+      }
+
+      if (Array.isArray(this._dom[elementType])) {
+        this._dom[elementType] = [];
+      } else {
+        this._dom[elementType] = null;
+      }
+    } else {
+      throw new Error(
+        `Graupl ${this.constructor.name}: "${elementType}" is not a valid element type.`
+      );
+    }
+  }
+
+  /**
+   * Sets all DOM elements within the tab.
+   *
+   * Utilizes _setDOMElementType and
+   * _resetDOMElementType.
+   *
+   * @protected
+   */
+  _setDOMElements() {
+    this._resetDOMElementType("tabList");
+    this._setDOMElementType("tabList");
+
+    if (this.dom.tabList) {
+      this._resetDOMElementType("tabToggle");
+      this._setDOMElementType("tabToggle", { base: this.dom.tabList });
+    }
+
+    this._resetDOMElementType("tabContent");
+    this._setDOMElementType("tabContent");
+  }
+
+  /**
+   * Creates and initializes all tab toggles.
+   *
+   * @protected
+   */
+  _createChildElements() {
+    this.dom.tabToggle.forEach((tabToggle, index) => {
+      const toggle = new TabToggle({
+        toggleElement: tabToggle,
+        contentElement: this.dom.tabContent[index],
+        parentTab: this,
+      });
+
+      toggle.initialize();
+
+      this._elements.tabToggle.push(toggle);
+    });
+  }
+
+  /**
+   * Handles focus events throughout the tab for proper use.
+   *
+   * - Adds a `focus` listener to every tab item so when it gains focus,
+   *   it will set the tab's current child to the index of the item.
+   *
+   * @protected
+   */
+  _handleFocus() {
+    this.elements.tabToggle.forEach((toggle, index) => {
+      toggle.dom.toggle.addEventListener("focus", () => {
+        this.currentChild = index;
+
+        if (this.isAutomatic) {
+          this.currentTabToggle.show();
+        }
+      });
+    });
+  }
+
+  /**
+   * Handles click events throughout the tab item for proper use.
+   *
+   * - Adds a `pointerup` listener to the tab item toggles that will toggle each tab item.
+   *
+   * @protected
+   */
+  _handleClick() {
+    this.elements.tabToggle.forEach((toggle, index) => {
+      toggle.dom.toggle.addEventListener("pointerup", () => {
+        this.currentChild = index;
+        toggle.show();
+      });
+    });
+  }
+
+  /**
+   * Handles keydown events throughout the tab item for proper use.
+   *
+   * This method exists to assist the _handleKeyup method.
+   *
+   * - Adds a `keydown` listener to all tab item toggles.
+   *   - Blocks propagation on "Space", "Enter", "ArrowRight", "ArrowLeft", "Home", and "End" keys.
+   */
+  _handleKeydown() {
+    this.dom.tabToggle.forEach((tabToggle) => {
+      tabToggle.addEventListener("keydown", (event) => {
+        const key = keyPress(event);
+        const ToggleKeys = [
+          "Space",
+          "Enter",
+          "ArrowRight",
+          "ArrowLeft",
+          "Home",
+          "End",
+        ];
+
+        // Prevent default behavior for space and enter keys.
+        if (ToggleKeys.includes(key)) {
+          preventEvent(event);
+        }
+      });
+    });
+  }
+
+  /**
+   * Handles keyup events throughout the tab item for proper use.
+   *
+   * Adds the follow keybindings (explanations are taken from the WAI ARIA Practices Guide Tab Pattern):
+   *
+   * - `Enter` or `Space`:
+   *   - When focus is on the tab link for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
+   *   - When focus is on the tab link for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
+   * - `Tab`: Moves focus to the next focusable element; all focusable elements in the tab are included in the page `Tab` sequence.
+   * - `Shift + Tab`: Moves focus to the previous focusable element; all focusable elements in the tab are included in the page `Tab` sequence.
+   * - `Down Arrow` (Optional): If focus is on an tab link, moves focus to the next tab link. If focus is on the last tab link, either does nothing or moves focus to the first tab link.
+   * - `Up Arrow` (Optional): If focus is on an tab link, moves focus to the previous tab link. If focus is on the first tab link, either does nothing or moves focus to the last tab link.
+   * - `Home` (Optional): When focus is on an tab link, moves focus to the first tab link.
+   * - `End` (Optional): When focus is on an tab link, moves focus to the last tab link.
+   *
+   * Note: When the above explanations mention "tab link", they are referring to the tab item toggle.
+   */
+  _handleKeyup() {
+    this.dom.tabToggle.forEach((tabToggle) => {
+      tabToggle.addEventListener("keyup", (event) => {
+        const key = keyPress(event);
+
+        switch (key) {
+          case "Space":
+          case "Enter":
+            preventEvent(event);
+            this.currentTabToggle.show();
+
+            break;
+          case "Home":
+            preventEvent(event);
+            this.focusFirstChild();
+
+            break;
+          case "End":
+            preventEvent(event);
+            this.focusLastChild();
+
+            break;
+          case "ArrowRight":
+            preventEvent(event);
+            this.focusNextChild();
+
+            break;
+          case "ArrowLeft":
+            preventEvent(event);
+            this.focusPreviousChild();
+
+            break;
+        }
+      });
+    });
+  }
+
+  /**
+   * Focus the tab's current child.
+   *
+   * @public
+   */
+  focusCurrentChild() {
+    if (this.currentChild !== -1) {
+      this.currentTabToggle.focus();
+    }
+  }
+
+  /**
+   * Focuses the tab's child at a given index.
+   *
+   * @public
+   *
+   * @param {number} index - The index of the child to focus.
+   */
+  focusChild(index) {
+    this.blurCurrentChild();
+    this.currentChild = index;
+    this.focusCurrentChild();
+  }
+
+  /**
+   * Focuses the tab's first child.
+   *
+   * @public
+   */
+  focusFirstChild() {
+    this.focusChild(0);
+  }
+
+  /**
+   * Focus the tab's last child.
+   *
+   * @public
+   */
+  focusLastChild() {
+    this.focusChild(this.elements.tabToggle.length - 1);
+  }
+
+  /**
+   * Focus the tab's next child.
+   *
+   * @public
+   */
+  focusNextChild() {
+    if (this.currentChild < this.elements.tabToggle.length - 1) {
+      this.focusChild(this.currentChild + 1);
+    } else {
+      this.focusFirstChild();
+    }
+  }
+
+  /**
+   * Focus the tab's previous child.
+   *
+   * @public
+   */
+  focusPreviousChild() {
+    if (this.currentChild > 0) {
+      this.focusChild(this.currentChild - 1);
+    } else {
+      this.focusLastChild();
+    }
+  }
+
+  /**
+   * Blurs the tab's current child.
+   *
+   * @public
+   */
+  blurCurrentChild() {
+    if (this.currentChild !== -1) {
+      this.currentTabToggle.blur();
+    }
+  }
+}
+
+export default Tabs;