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-accordion

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 jas 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-accordion contentLabel="expanded content">
    <details>
        <summary>
            Title
        </summary>
        <div>
            /* any content can be in this block, for styling use the <style> tag. */
        </div>
    </details>
</enable-accordion>

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

Props

These props can be added/changes on the web component.

open - This identifies if the accordion should be open or closed by default.

contentLabel - (optional) The aria-label to be added to the content section.

Styling

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

trigger / expanded - The button that open and closes the accordion. When it's open, it has the 'expanded' attribute.

content - The content of the accordion.

Example

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