makeup-combobox v0.3.0

makeup-combobox

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

View Demo.

HTML

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

<span class="combobox">
    <span class="combobox__control">
        <input autocomplete="off" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox1" />
        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
            <use xlink:href="../style/icon.svg#icon-dropdown"></use>
        </svg>
    </span>
    <div class="combobox__listbox">
        <div id="listbox1" class="combobox__options" role="listbox">
            <div class="combobox__option" role="option">
                <span>Option 1</span>
            </div>
            <div class="combobox__option" role="option">
                <span>Option 2</span>
            </div>
            <div class="combobox__option" role="option">
                <span>Option 3</span>
            </div>
        </div>
    </div>
</span>

For autocomplete, add aria-autocomplete="list" to the input element.

CSS

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

JavaScript

import Combobox from 'makeup-combobox';

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

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

Config

The constructor takes a configuration object as its second parameter.

todo

Events

makeup-combobox-change

Fired when a combobox option is chosen either via manual selection or automatic selection.