svelte-a11y-dialog Svelte Themes

Svelte A11y Dialog

Experimental port of a11y-dialog

Download

Svelte a11y-dialog

Experimental!

This is a Svelte wrapper component for [email protected]

Install

npm install svelte-a11y-dialog

Usage

After installing the npm package, import the SvelteA11yDialog component and optionally setup a dialog instance binding:

  import { SvelteA11yDialog } from "svelte-a11y-dialog";
  let dialogInstance;
  const assignDialogInstance = (instance) => {
    dialogInstance = instance;
  }

Then use as follows:

<button
  type="button"
  data-a11y-dialog-show="a11y-dialog"
>Open dialog</button>
<SvelteA11yDialog 
  id="a11y-dialog"
  dialogRoot="#dialog-root"
  closeButtonLabel="My close button label"
  closeButtonPosition="last"
  title="A11yDialog Test"
  titleId="uniqueTitleId"
  role="dialog"
  on:instance={assignDialogInstance}
>
  <svelte:fragment slot="closeButtonContent">
    <span>Close</span>
  </svelte:fragment> 
  <div>
    <p>This is some content</p>
  </div>
</SvelteA11yDialog>

In your main index.html, add a container where your dialog will be rendered into — dialog-root in this example:

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <div id="dialog-root"></div>
  </body>
</html>

API

The a11y-dialog documentation is here

id

  • Property: id
  • Type: String
  • Required: true
  • Description: The unique HTML id attribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog.

dialogRoot

  • Property: dialogRoot
  • Type: String — CSS Selector string.
  • Required: true
  • Description: The container for the dialog to be rendered into.

classNames

  • Property: classNames
  • Type: Object
  • Required: false
  • Default: {}
  • Description: Object of classes for each HTML element of the dialog element. Keys are: base, overlay, document, title, closeButton. See a11y-dialog docs for reference.

title

  • Property: title
  • Type: String
  • Required: true
  • Description: The title of the dialog. svelte-a11y-dialog will place this in a paragraph tag and apply the classes.title to it.

titleId

  • Property: titleId
  • Type: String
  • Required: false
  • Default: Defaults to id + '-title'.
  • Description: The HTML id attribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window.

closeButtonLabel

  • Property: closeButtonLabel
  • Type: String
  • Required: false
  • Default: 'Close this dialog window'
  • Description: The HTML aria-label attribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark.

role

  • Property: role
  • Type: String
  • Required: false
  • Default: dialog
  • Description: The role attribute of the dialog element, either dialog (default) or alertdialog to make it a modal (preventing closing on click outside of ESC key).

Events

on:instance

  • Returns: An a11y-dialog instance when a11y-dialog is instantiated via a Svelte dispatch event. Note that as is idiomatic in dispatched Svelte events, you need to access the instance via event.detail object (see below).
  • Description: This event emits the a11y-dialog instance once the component has been instantiated. Here's an example of how to set up in your parent component (pay special note of the ev.detail.instance to gain access to the passed a11y-dialog instance!):
<script>
  const assignDialogInstance = (ev) => {
    dialogInstance = ev.detail.instance;
  };

  const openDialog = () => {
    if (dialogInstance) {
      dialogInstance.show();
    }
  };
</script>

<SvelteA11yDialog on:instance={assignDialogInstance} ...etc

Slots

title

  • Name: title
  • Description: The title of the dialog, mandatory in the document to provide context to assistive technology. Could be hidden with CSS (while remaining accessible).

closeButtonContent

  • Name: closeButtonLabel
  • Default: \u00D7 (×)
  • Description: The node that is the inner HTML of the close button.

closeButtonPosition

  • Name: closeButtonPosition
  • Default: first
  • Description: One of first, last, or none

Server-side Rendering

This has only been tested client-side.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes