enable-wc-accordion
v0.1.1
Published
An accessible version of the accordion based on the Enable components
Downloads
2
Maintainers
Readme
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:
- To be accessible
- 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 */
}