@designbycode/traverse
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Traverse List Web Component

NPM

npm version npm NPM npm bundle size ts GitHub stars HitCount

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

📇 Table of Contents

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

Add to javascript

import "@designbycode/traverse"

Use in html

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

Claude Myburgh

Readme

Keywords

none

Package Sidebar

Install

npm i @designbycode/traverse

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

11.9 kB

Total Files

7

Last publish

Collaborators

  • designbycode_