Enable Dialogue 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-dialogue

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.

This component exposes the content of the dialogue when javascript isn't present, so the user can get access to the information. When javascript is enabled, it behaves like a normal dialog(ue).

If you need the value returned from the value of a button, it's added to the web component element as return-value.

Usage

<enable-dialogue open-label="Open Modal" aria-label="close">
    <style>
       /* Insert any styling for content here */
    </style>
    <h1>Tabs or spaces?</h1>
    <p>Should you use tabs or spaces to indent code blocks?</p>
    <button class="enable-button" type="submit" value="wrong">Tabs</button>
    <button class="enable-button" type="submit" value="correct" style="float: right;">Spaces</button>
</enable-dialogue>

<script type="module">
    import { Dialogue } from 'enable-wc-dialogue';
</script>

Props

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

openLabel - This is the text that will appear in the modal button. closeLabel - (optional, use if close button is text) The label to be added to the close button. ariaLabel - (optional, use if close is an icon) The aria-label to be added to the close icon. modalType - (optional) If the modal only contains content, add the 'alertdialog' attribute to the modal.

Styling

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

trigger - The button that opens the modal. content - The 'dialog' container for the content.

Example

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