Skip to content
automagica11y

Quickstart

Quickstart

Section titled “Quickstart”

This guide walks through a minimal toggle and a dialog powered by contexts. Build once, scale to any framework. If you want the full mental model, the Contexts guide maps how the registry layers semantics and behaviors on top of toggle.

1. Add the markup

Section titled “1. Add the markup”
<button data-automagica11y-toggle="#details">Details</button>
<section id="details" hidden>
  Plain toggle example.
</section>


<button data-automagica11y-context="dialog" data-automagica11y-target="#quickstart-dialog">
  Launch dialog
</button>
<div id="quickstart-dialog" role="dialog" hidden>
  <h2 id="quickstart-title">Context-driven dialog</h2>
  <p>Roles, aria-modal, focus trapping, and dismissal all come for free.</p>
  <button data-automagica11y-dialog-close>Close</button>
</div>

2. Load the library

Section titled “2. Load the library”
<script type="module">
  import 'automagica11y';
</script>

The import auto-initializes every supported pattern on the current document.

3. Test it in the playground

Section titled “3. Test it in the playground”

Toggle + dialog

Contexts layer semantics on top of toggle behaviors.

View source