Security News
Meet Socket at Black Hat Europe and BSides London 2025
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
By Anders Søndergaard - Nov 11, 2025
svelte-a11y-dialog
Advanced tools
Svelte a11y-dialog
Experimental!
This is a Svelte wrapper component for a11y-dialog@7.3.0
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.
FAQs
Svelte component wrapping for a11y-dialog
We found that svelte-a11y-dialog demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 18 Mar 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
By Sarah Gooding - Nov 08, 2025
Research
/Security News
9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
By Kush Pandya - Nov 06, 2025