Traverse List Web Component

The Traverse List Web Component Plugin provides a customizable list of items with keyboard navigation functionality.

📇 Table of Contents

• Installation
  • Using pnpm
  • Using npm
  • Using yarn
• Usage
  • Attributes
  • Examples
    • Basic Usage
    • Non-loopable List
    • Attribute of current
• API
  • Properties
  • Methods
• Contributing
  • Contributors
• License
• Author

Installation

You can install the Traverse List Web Component Plugin using npm:

Using pnpm

pnpm add @designbycode/traverse

Using npm

npm install @designbycode/traverse

Using yarn

yarn add @designbycode/traverse

Usage

Use the <traverse-list> element in your HTML to create the list:

<traverse-list>
    <a href="#" role="menuitem">list 1</a>
    <a href="#" role="menuitem">list 2</a>
    <a href="#" role="menuitem">list 3</a>
</traverse-list>

Attributes

• loopable (optional): Set to "false" to prevent looping through items using arrow keys. Keyboard Navigation
• Use the Arrow Up and Arrow Down keys to navigate through the list.
• Pressing Tab and Shift + Tab will also navigate up and down respectively.

Examples

Basic Usage

<traverse-list>
    <a href="#" role="menuitem">list 1</a>
    <a href="#" role="menuitem">list 2</a>
    <a href="#" role="menuitem">list 3</a>
</traverse-list>

Non-loopable List

<traverse-list loopable="false">
    <a href="#" role="menuitem">list 1</a>
    <a href="#" role="menuitem">list 2</a>
    <a href="#" role="menuitem">list 3</a>
</traverse-list>

Attribute of current

Use one of these

• true (Default)
• page
• step
• location
• date
• time
• false

// "page" | "step" | "location" | "date" | "time" | "false" | "true"
<traverse-list current="step">
    <a href="#" role="menuitem">list 1</a>
    <a href="#" role="menuitem">list 2</a>
    <a href="#" role="menuitem">list 3</a>
</traverse-list>

API

Properties

• _currentSelectedItem: The index of the currently selected item.
• _indexPointer: The index of the item with focus.
• menuItems: A collection of menu items within the component.
• _current: The value of the "current" attribute.
• _loopable: A boolean indicating whether looping is enabled.

Methods

• addEventListeners(): Adds event listeners for keyboard navigation.
• removeEventListeners(): Removes previously added event listeners.
• navigateKeys(event): Handles keyboard navigation using Arrow keys and Tab.
• moveSelectionUp(): Moves selection up within the list.
• moveSelectionDown(): Moves selection down within the list.
• markAsCurrent(): Marks the currently selected item with the "aria-current" attribute.

Contributing

Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

Contributors

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_