Security News
Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm
Recent coverage mislabels the latest TEA protocol spam as a worm. Here’s what’s actually happening.
By Philipp Burckhardt - Nov 14, 2025
angular-a11y-dialog
Advanced tools
Angular A11yDialog
This is a Angular wrapper component for a11y-dialog@7.3.0
Angular
Install
Note that A11yDialog is a peer dependency of AngularA11yDialog.
npm install angular-a11y-dialog a11y-dialog
Usage
In your app.module.ts application module, in addition to whatever
you already have there, setup the AngularA11yDialogModule:
import { AngularA11yDialogModule } from 'angular-a11y-dialog';
@NgModule({
...
imports: [AngularA11yDialogModule]
})
export class AppModule { }
Angular Component
If you plan to utilize the A11yDialog instance, you'll need to import it:
import { Component } from '@angular/core';
import A11yDialog from 'a11y-dialog';
@Component({
selector: 'app-root',
template: `
<h1>Dialog Test</h1>
<p>The following opens because we've assigned a dialog <code>ref</code>:</p>
<button
type="button"
data-test-id="dialogRefBtn"
(click)="openDialog()"
>
Open dialog via dialogRef
</button>
<p>The following opens because a11y-dialog uses the <code>data-a11y-dialog-show</code> data attribute:</p>
<button
type="button"
data-test-id="dataA11yBtn"
data-a11y-dialog-show="a11y-dialog"
>
Open the dialog via data attribute
</button>
<angular-a11y-dialog
id="a11y-dialog"
dialogRoot="#dialog-root"
closeButtonPosition="last"
(instance)="assignDialogInstance($event)"
>
<div closeButtonContentFirst>
<span>Close (only appears if closeButtonPosition="first" but that's the default)</span>
</div>
<ng-template #titleTemplate>
<span data-test-id="dialogTitle">A11yDialog Test</span>
</ng-template>
<div>
<p>This is some content</p>
</div>
<div closeButtonContentLast>
<span>Close (only appears if closeButtonPosition="last")</span>
</div>
</angular-a11y-dialog>
`,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angular-a11y-tester';
dialogInstance!: A11yDialog;
openDialog() {
this.dialogInstance.show();
}
assignDialogInstance(instance: A11yDialog) {
this.dialogInstance = instance;
};
}
_Note above we have two approaches to open the dialog:
- Via the button with
data-a11y-dialog-show="a11y-dialog"whichA11yDialogwill listen for. - Via the
A11yDialogintance reference.
In your index.html, add a container where your dialog will be rendered into. In this case, notice the dialog-root element.
<!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. - Usage:
<angular-a11y-dialog id="main-dialog">
<!-- ... -->
</angular-a11y-dialog>
dialogRoot
- Property:
dialogRoot - Type:
String— CSS Selector string. - Required:
true - Description: The container for the dialog to be rendered into.
- Usage:
<angular-a11y-dialog dialogRoot="#dialog-root">
<!-- ... -->
</angular-a11y-dialog>
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. - Usage:
<angular-a11y-dialog classNames="{ base: 'base-class', overlay: 'overlay-class' }">
<!-- ... -->
</angular-a11y-dialog>
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. - Usage:
<angular-a11y-dialog titleId="main-title">
<!-- ... -->
</angular-a11y-dialog>
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. - Usage:
<angular-a11y-dialog closeButtonLabel="Close this super dialog">
<!-- ... -->
</angular-a11y-dialog>
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). - Usage:
<angular-a11y-dialog role="alertdialog">
<!-- ... -->
</angular-a11y-dialog>
Events
instance
- Returns: An
a11y-dialoginstance orundefined. - Description: This event emits the
a11y-dialoginstance once the component has been initialised. When it getsdestroyed, the event returnsundefined. This is needed to call instance methods of the dialog, e.g.this.dialog.show(). - Usage:
<angular-a11y-dialog (instance)="assignDialogInstance($event)">
<!-- ... -->
</angular-a11y-dialog>
You can obtain the instance reference and use:
export class AppComponent {
dialogInstance!: A11yDialog;
openDialog() {
this.dialogInstance.show();
}
assignDialogInstance(instance: A11yDialog) {
this.dialogInstance = instance;
};
}
Slots
title
- Name:
title - Description: The title element for the dialog; mandatory in the document to provide context to assistive technology. Could be hidden with CSS (while remaining accessible).
- Usage:
<angular-a11y-dialog>
<ng-template #titleTemplate>
<span>Your title</span>
</ng-template>
<!-- ... -->
</angular-a11y-dialog>
closeButtonContentFirst
- Name:
closeButtonContentFirst - Description: The inner HTML of the close button. By default
closeButtonPositionisfirstso you will use this slot for the close button content. However, if you supplylastornoneforcloseButtonPositionthis slot will be ignored. - Usage:
<angular-a11y-dialog>
<div closeButtonContentFirst>
<span>Close (only appears if closeButtonPosition="first" but that's the default)</span>
</div>
<!-- ... -->
</angular-a11y-dialog>
closeButtonContentLast
- Name:
closeButtonContentLast - Description: The inner HTML of the close button. By default
closeButtonPositionisfirst, so unless you supplylastforcloseButtonPositionthis slot will be ignored. - Usage:
<angular-a11y-dialog closeButtonPosition="last">
<div closeButtonContentLast>
<span>Close (only appears if closeButtonPosition="last")</span>
</div>
<!-- ... -->
</angular-a11y-dialog>
closeButtonPosition
- Name:
closeButtonPosition - Default:
first - Description: One of
first,last, ornone - Usage:
<angular-a11y-dialog closeButtonPosition="last">
<div closeButtonContentLast>
<span>Close (only appears if closeButtonPosition="last")</span>
</div>
<!-- ... -->
</angular-a11y-dialog>
FAQs
Angular component wrapping for a11y-dialog
We found that angular-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 24 Feb 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
PyPI Expands Trusted Publishing to GitLab Self-Managed as Adoption Passes 25 Percent
PyPI adds Trusted Publishing support for GitLab Self-Managed as adoption reaches 25% of uploads
By Sarah Gooding - Nov 14, 2025
Research
/Security News
Malicious Chrome Extension Exfiltrates Seed Phrases, Enabling Wallet Takeover
A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.
By Kirill Boychenko - Nov 12, 2025