ember-a11y-dialog 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# ember-a11y-dialog
+
+An Ember 3.28 wrapper for [a11y-dialog](https://a11y-dialog.netlify.app/) v8.1.5 using [ember-wormhole](https://github.com/yapplabs/ember-wormhole) for the portal pattern.
+
+## Installation
+
+```bash
+ember install ember-a11y-dialog
+```
+
+## Setup
+
+Add the wormhole destination to your `application.hbs` (typically at the end):
+
+```hbs
+{{! app/templates/application.hbs }}
+{{outlet}}
+<A11yDialogWormhole />
+```
+
+## Usage
+
+### Basic Dialog
+
+```hbs
+<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)
+
+```hbs
+<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)
+
+```hbs
+<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
+
+```hbs
+<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)
+
+```hbs
+<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:
+
+```bash
+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

package/addon/components/a11y-dialog.hbs

@@ -0,0 +1,22 @@
+{{#if this.destinationElement}}
+  {{#in-element this.destinationElement}}
+    <div
+      class="ember-modal-wrapper {{this.wrapperClassValue}}"
+    >
+      <div
+        class="ember-modal-overlay modal-overlay hf-slide-in-up {{this.overlayClassValue}} {{if this.translucentOverlay 'translucent'}}"
+        {{on "click" this.handleOverlayClick}}
+      >
+        <div
+          id={{@dialogId}}
+          class="modal {{this.containerClassValue}}"
+          aria-hidden="true"
+          {{a11y-dialog-setup onClose=this.closeAction onKeyDown=this.handleKeyDown}}
+          ...attributes
+        >
+          {{yield}}
+        </div>
+      </div>
+    </div>
+  {{/in-element}}
+{{/if}}

package/addon/components/a11y-dialog.js

@@ -0,0 +1,79 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+
+export default class A11yDialogComponent extends Component {
+  get destinationElement() {
+    if (this.args.renderInPlace) {
+      return null;
+    }
+
+    const id = this.args.destinationId || "modal-overlays";
+    let element = document.getElementById(id);
+
+    if (!element) {
+      element = document.createElement("div");
+      element.id = id;
+      document.body.appendChild(element);
+    }
+
+    return element;
+  }
+
+  get closeAction() {
+    return this.args.onClose || this.args.close;
+  }
+
+  get containerClassValue() {
+    return [
+      this.args.containerClass,
+      this.args["container-class"],
+      this.args.containerClassNames,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  get overlayClassValue() {
+    return [
+      this.args.overlayClass,
+      this.args["overlay-class"],
+      this.args.overlayClassNames,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  get wrapperClassValue() {
+    return this.args.wrapperClass || this.args["wrapper-class"] || "";
+  }
+
+  get hasOverlay() {
+    return this.args.hasOverlay !== false;
+  }
+
+  get translucentOverlay() {
+    return this.args.translucentOverlay !== false;
+  }
+
+  get dataTestId() {
+    return this.args["data-test-id"] || this.args.dataTestId;
+  }
+
+  @action
+  handleOverlayClick(event) {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (this.args.onClickOverlay) {
+      this.args.onClickOverlay();
+    }
+  }
+
+  @action
+  handleKeyDown(event) {
+    console.log("handleKeyDown", event);
+    if (this.args.onKeyDown) {
+      this.args.onKeyDown(event);
+    }
+  }
+}

package/addon/modifiers/a11y-dialog-setup.js

@@ -0,0 +1,56 @@
+import Modifier from "ember-modifier";
+import { registerDestructor } from "@ember/destroyable";
+import { schedule } from "@ember/runloop";
+import A11yDialog from "a11y-dialog/dist/a11y-dialog.esm.js";
+
+function cleanup(instance) {
+  if (instance._keyDownHandler) {
+    document.body.removeEventListener("keydown", instance._keyDownHandler);
+    instance._keyDownHandler = null;
+  }
+  if (instance.dialogInstance) {
+    instance.dialogInstance.destroy();
+    instance.dialogInstance = null;
+  }
+}
+
+export default class A11yDialogSetupModifier extends Modifier {
+  dialogInstance = null;
+  namedArgs = null;
+  _keyDownHandler = null;
+
+  constructor(owner, args) {
+    console.log('A11yDialogSetupModifier constructor 666 @@@');
+    super(owner, args);
+    registerDestructor(this, cleanup);
+  }
+
+  modify(element, positional, named) {
+    this.namedArgs = named;
+
+    console.log('modify 777 @@@');
+    if (!this.dialogInstance) {
+      console.log('modify 888 @@@');
+      this.dialogInstance = new A11yDialog(element);
+
+      this.dialogInstance.on("hide", () => {
+        const { onClose } = this.namedArgs;
+        if (typeof onClose === "function") onClose();
+      });
+
+      this._keyDownHandler = (event) => {
+        const { onKeyDown } = this.namedArgs;
+        console.log("modifier keydown event", event);
+        if (typeof onKeyDown === "function") onKeyDown(event);
+      };
+      console.log("modifier keydown handler", this._keyDownHandler);
+      document.body.addEventListener("keydown", this._keyDownHandler);
+
+      schedule("afterRender", () => {
+        if (this.dialogInstance) {
+          this.dialogInstance.show();
+        }
+      });
+    }
+  }
+}

package/addon/styles/ember-a11y-dialog.css

@@ -0,0 +1,52 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.modal-overlay.translucent {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+@keyframes ember-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ember-modal-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#basic-dialog {
+  position: relative;
+  margin: 60px 0 30px;
+  width: 1140px;
+  display: flex;
+  flex-direction: column;
+  background: yellow;
+  color: #000;
+}

package/app/components/a11y-dialog.js

@@ -0,0 +1 @@
+export { default } from 'ember-a11y-dialog/components/a11y-dialog';

package/app/modifiers/a11y-dialog-setup.js

@@ -0,0 +1 @@
+export { default } from "ember-a11y-dialog/modifiers/a11y-dialog-setup";

package/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+module.exports = {
+  name: require("./package").name,
+  isDevelopingAddon() {
+    return true;
+  },
+
+  included() {
+    this._super.included.apply(this, arguments);
+  },
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "ember-a11y-dialog",
+  "version": "1.0.0",
+  "description": "Ember 3.28 wrapper for a11y-dialog using in-element for portals",
+  "files": [
+    "addon",
+    "app",
+    "index.js",
+    "README.md"
+  ],
+  "keywords": [
+    "ember-addon",
+    "a11y-dialog",
+    "modal",
+    "accessible"
+  ],
+  "license": "MIT",
+  "author": "",
+  "directories": {
+    "doc": "doc",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "ember build",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "start": "ember serve",
+    "test": "ember test"
+  },
+  "dependencies": {
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "a11y-dialog": "8.1.5",
+    "ember-auto-import": "2.7.0",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^5.1.1",
+    "ember-modifier": "^3.2.7"
+  },
+  "devDependencies": {
+    "@ember/optional-features": "^2.0.0",
+    "ember-cli": "~4.12.1",
+    "ember-load-initializers": "^2.1.2",
+    "ember-resolver": "^8.0.0",
+    "ember-source": "~3.28.0",
+    "ember-template-lint": "^5.0.0",
+    "loader.js": "^4.7.0",
+    "webpack": "^5.0.0"
+  },
+  "engines": {
+    "node": "14.* || 16.* || >= 18"
+  },
+  "ember": {
+    "edition": "octane"
+  },
+  "ember-addon": {
+    "configPath": "tests/dummy/config",
+    "demoURL": null
+  }
+}