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 :)

The example provided, will work without javascript enabled, but won't be fully accessible. The web component adds required attributes to make is compatible with all browser and screen reader combinations.

Installation

npm i enable-wc-switch

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-switch on-label="on" off-label="off">
    <input id="checkbox" type="checkbox" />
    <label for="checkbox">Speaker Power</label>
</enable-switch>

Props

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

isChecked - This identifies if the switch is should be on or off by default. onLabel - The aria-label to be added to the switch when it's 'on'. offLabel - The aria-label to be added to the switch when it's 'off'.

Styling

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

input - The input styling for the switch. label - The label for the switch. status - The status message (e.g. - off) below the switch.

Example enable-switch::part() { /* add styles here */ }