Enable Accordion Web Component

This webcomponent follows the open-wc recommendations.

Preamble

Enable webcomponents are very opinionated components for a reason. They were developed for 2 reasons:

1. To be accessible
2. To help developers learn how to code with accessibility in mind.

It's important to match the example implementations and only deviate when the component allows it. If you don't follow the examples, there's a good chance it won't work :)

Installation

npm i enable-wc-combobox

Note - You must be using a local server that can resolve node_modules internally. We recommend using web-dev-server (https://modern-web.dev/docs/dev-server/overview/) which has a flag --node-resolve that will resolve the imports automatically. When you're ready to deply to production, you can bundle it with the project compiler.

Usage

<enable-combobox instructions-id="fruit__desc">
    <label id="fruit__label" for="fruit" class="combobox-label">
        Enter a Fruit or Vegetable
    </label>
    <input id="fruit" name="fruit" type="text" list="fruits" aria-describedby="fruit__desc">
    <div class="sr-only" id="fruit__desc">
        As you type, use the up and down arrow keys to choose the autocomplete
        items.
    </div>
     
    <datalist id="fruits">
        <option id="Apple" value="Apple">Apple</option>
        <option id="Artichoke" value="Artichoke">Artichoke</option>
        <option id="Asparagus" value="Asparagus">Asparagus</option>
        <option id="Banana" value="Banana">Banana</option>
        <option id="Beets" value="Beets">Beets</option>
        <option id="Bell-pepper" value="Bell pepper">Bell pepper</option>
        <option id="Broccoli" value="Broccoli">Broccoli</option>
        <option id="Brussels-sprout" value="Brussels sprout">
          Brussels sprout
        </option>
        <option id="Cabbage" value="Cabbage">Cabbage</option>
        <option id="Carrot" value="Carrot">Carrot</option>
        <option id="Cauliflower" value="Cauliflower">Cauliflower</option>
        <option id="Celery" value="Celery">Celery</option>
        <option id="Chard" value="Chard">Chard</option>
        <option id="Chicory" value="Chicory">Chicory</option>
        <option id="Corn" value="Corn">Corn</option>
        <option id="Cucumber" value="Cucumber">Cucumber</option>
        <option id="Daikon" value="Daikon">Daikon</option>
        <option id="Date" value="Date">Date</option>
        <option id="Edamame" value="Edamame">Edamame</option>
        <option id="Eggplant" value="Eggplant">Eggplant</option>
        <option id="Elderberry" value="Elderberry">Elderberry</option>
        <option id="Fennel" value="Fennel">Fennel</option>
        <option id="Fig" value="Fig">Fig</option>
        <option id="Garlic" value="Garlic">Garlic</option>
        <option id="Grape" value="Grape">Grape</option>
        <option id="Honeydew-melon" value="Honeydew melon">
          Honeydew melon
        </option>
        <option id="Iceberg-lettuce" value="Iceberg lettuce">
          Iceberg lettuce
        </option>
        <option id="Jerusalem-artichoke" value="Jerusalem artichoke">
          Jerusalem artichoke
        </option>
        <option id="Kale" value="Kale">Kale</option>
        <option id="Kiwi" value="Kiwi">Kiwi</option>
        <option id="Leek" value="Leek">Leek</option>
        <option id="Lemon" value="Lemon">Lemon</option>
        <option id="Mango" value="Mango">Mango</option>
        <option id="Mangosteen" value="Mangosteen">Mangosteen</option>
        <option id="Melon" value="Melon">Melon</option>
        <option id="Mushroom" value="Mushroom">Mushroom</option>
        <option id="Nectarine" value="Nectarine">Nectarine</option>
        <option id="Okra" value="Okra">Okra</option>
        <option id="Olive" value="Olive">Olive</option>
        <option id="Onion" value="Onion">Onion</option>
        <option id="Orange" value="Orange">Orange</option>
        <option id="Parship" value="Parship">Parship</option>
        <option id="Pea" value="Pea">Pea</option>
        <option id="Pear" value="Pear">Pear</option>
        <option id="Pineapple" value="Pineapple">Pineapple</option>
        <option id="Potato" value="Potato">Potato</option>
        <option id="Pumpkin" value="Pumpkin">Pumpkin</option>
        <option id="Quince" value="Quince">Quince</option>
        <option id="Radish" value="Radish">Radish</option>
        <option id="Rhubarb" value="Rhubarb">Rhubarb</option>
        <option id="Shallot" value="Shallot">Shallot</option>
        <option id="Spinach" value="Spinach">Spinach</option>
        <option id="Squash" value="Squash">Squash</option>
        <option id="Strawberry" value="Strawberry">Strawberry</option>
        <option id="Sweet-potato" value="Sweet potato">Sweet potato</option>
        <option id="Tomato" value="Tomato">Tomato</option>
        <option id="Turnip" value="Turnip">Turnip</option>
        <option id="Ugli-fruit" value="Ugli fruit">Ugli fruit</option>
        <option id="Victoria-plum" value="Victoria plum">
          Victoria plum
        </option>
        <option id="Watercress" value="Watercress">Watercress</option>
        <option id="Watermelon" value="Watermelon">Watermelon</option>
        <option id="Yam" value="Yam">Yam</option>
        <option id="Zucchi" value="Zucchi">Zucchi</option>
    </datalist>
</enable-combobox>

<script type="module">
    import { Combobox } from '@enable-webcomponents/combobox';
</script>

Props

These props can be added/changes on the web component. NOTE: If you're using this component in a form, the value of the selection is available on the component tag as 'value'.

instructions-id - A reference to the id of the instructions.

Styling

The components use 'parts' to style individual elements. The accordion supports the following parts:

label - The label that's associated to the the input. input - The text input for the component. clear - The clear button that appears when there are results. container - The outer element that conatin all the children. list - The unordered list () that appears when there are results. item - The list item () that appears when there are results.

Example

enable-combobox::part(<part-name>) {
    /* add styles here */
}