ember-a11y-dialog

An Ember 3.28 wrapper for a11y-dialog v8.1.5 using ember-wormhole for the portal pattern.

Installation

ember install ember-a11y-dialog

Setup

Add the wormhole destination to your application.hbs (typically at the end):

{{! app/templates/application.hbs }}
{{outlet}}
<A11yDialogWormhole />

Usage

Basic Dialog

<A11yDialogOpener @dialogId="my-dialog" class="btn">
  Open Dialog
</A11yDialogOpener>

<A11yDialog @dialogId="my-dialog" @title="Hello World">
  <p>Dialog content here.</p>
</A11yDialog>

Controlled Dialog (programmatic open/close)

<button {{on "click" this.openDialog}}>Open</button>

<A11yDialog
  @dialogId="my-dialog"
  @title="Controlled"
  @isOpen={{this.isOpen}}
  @onReady={{this.onDialogReady}}
  @onShow={{this.onShow}}
  @onHide={{this.onHide}}
>
  <p>Content</p>
</A11yDialog>

Named Blocks (custom layout)

<A11yDialog @dialogId="custom-dialog" @isOpen={{this.isOpen}} @onHide={{this.close}}>
  <:header as |h|>
    <h2 id={{h.titleId}}>Custom Title</h2>
    <button data-a11y-dialog-hide aria-label="Close">&times;</button>
  </:header>
  <:body>
    <p>Custom body content</p>
  </:body>
  <:footer>
    <button data-a11y-dialog-hide>Cancel</button>
    <button {{on "click" this.confirm}}>OK</button>
  </:footer>
</A11yDialog>

Alert Dialog

<A11yDialog
  @dialogId="confirm-delete"
  @title="Are you sure?"
  @alertDialog={{true}}
  @isOpen={{this.showConfirm}}
  @onHide={{this.cancelDelete}}
>
  <p>This cannot be undone.</p>
</A11yDialog>

Render In Place (no portal)

<A11yDialog @dialogId="inline" @title="Inline" @renderInPlace={{true}}>
  <p>No wormhole — renders inline.</p>
</A11yDialog>

API

<A11yDialog>

| Argument | Type | Default | Description | |----------|------|---------|-------------| | @dialogId | string | 'a11y-dialog' | Unique ID for the dialog element | | @title | string | — | Dialog title (used with default header) | | @isOpen | boolean | — | Controlled open state | | @alertDialog | boolean | false | Use role="alertdialog" (overlay doesn't close) | | @renderInPlace | boolean | false | Skip ember-wormhole, render inline | | @destinationId | string | 'a11y-dialog-wormhole' | Wormhole destination element ID | | @closeButtonLabel | string | 'Close dialog' | Aria label for default close button | | @class | string | — | Additional CSS class on the dialog container | | @onReady | function | — | Called with the a11y-dialog instance after setup | | @onShow | function | — | Called when dialog opens | | @onHide | function | — | Called when dialog closes |

<A11yDialogOpener>

| Argument | Type | Default | Description | |----------|------|---------|-------------| | @dialogId | string | 'a11y-dialog' | ID of dialog to open |

<A11yDialogWormhole>

| Argument | Type | Default | Description | |----------|------|---------|-------------| | @destinationId | string | 'a11y-dialog-wormhole' | ID of the wormhole destination div |

Playground

A standalone Vite playground is available for quick testing of the dialog patterns:

cd playground
nvm use 22
npm install
npm run dev

Compatibility

• Ember.js 3.28+
• Node.js 14+ (16+ for playground)
• a11y-dialog 8.1.5
• ember-wormhole 0.6.x