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-dialogdocumentation is here
id
- Property:
id - Type:
String - Required:
true - Description: The unique HTML
idattribute 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.titleto it.
titleId
- Property:
titleId - Type:
String - Required:
false - Default: Defaults to
id + '-title'. - Description: The HTML
idattribute 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-labelattribute 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
roleattribute of the dialog element, eitherdialog(default) oralertdialogto make it a modal (preventing closing on click outside of ESC key).
Events
on:instance
- Returns: An
a11y-dialoginstance when a11y-dialog is instantiated via a Sveltedispatchevent. Note that as is idiomatic in dispatched Svelte events, you need to access the instance viaevent.detailobject (see below). - Description: This event emits the
a11y-dialoginstance once the component has been instantiated. Here's an example of how to set up in your parent component (pay special note of theev.detail.instanceto 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, ornone
Server-side Rendering
This has only been tested client-side.
