makeup-listbox

makeup-listbox

A JavaScript class that represents an ARIA listbox. No CSS provided.

The listbox class is consumed by the following modules: listbox-button, combobox.

View Demo.

HTML

The following markup structure and classnames are required. Any SVG icons can be used.

<div class="listbox" data-auto-select="true">
    <div class="listbox__options" role="listbox" tabindex="0">
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 1</span>
            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="icon.svg#icon-tick-small"></use>
                </svg>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 2</span>
            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="icon.svg#icon-tick-small"></use>
                </svg>
            </svg>
        </div>
        <div class="listbox__option" role="option" aria-selected="false">
            <span class="listbox__value">Option 3</span>
            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
                    <use xlink:href="icon.svg#icon-tick-small"></use>
                </svg>
            </svg>
        </div>
    </div>
</div>

CSS

No CSS is provided. However, the class is fully compatible with eBay Skin.

JavaScript

import Listbox from 'makeup-listbox';

document.querySelectorAll('.listbox').forEach(function(el, i) {
    const widget = new Listbox(el, config);

    el.addEventListener('makeup-listbox-change', function(e) {
        console.log(e.type, e.detail);
    });
});

Config

The constructor takes a configuration object as its second parameter.

todo

Events

makeup-listbox-change

Fired when the selected option changes.

• optionIndex: the index position of the selected option
• optionValue: the value of the selected option