HelpBot Assistant

How can I help you?

Accessibility in Angular Dialog component

26 Feb 20268 minutes to read

The Dialog component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles used to evaluate accessibility.

The accessibility compliance for the Dialog component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Dialog is characterized by complete ARIA accessibility support, enabling screen readers and other assistive technology devices to access the component. This component is designed based on the guidelines documented in WAI-ARIA Accessibility Practices.

The Dialog component uses the Dialog role and the following ARIA properties on its elements based on their state.

Property Functionalities
aria-describedby Indicates that the dialog content description is conveyed to the user through assistive technologies.
aria-labelledby Identifies the dialog title to assistive technologies.
aria-modal Set to true for modal dialogs and false for non-modal dialogs.
aria-grabbed Set to true when the dialog is being dragged and false when dragging stops.

Keyboard interaction

The Dialog component’s keyboard interaction is designed based on WAI-ARIA Practices for dialogs.
Users can interact with the Dialog using the following shortcut keys.

Keyboard shortcuts Actions
Esc Closes the Dialog. This functionality can be controlled by using [closeOnEscape](https://ej2.syncfusion.com/angular/documentation/api/dialog/#closeonescape)
Enter When a dialog button or any input field (except text area) has focus, pressing Enter triggers the click event on the primary button. Enter does not work when the dialog content contains a text area with initial focus.
Ctrl + Enter When the dialog content contains a text area with focus, press Ctrl + Enter to trigger the click event on the primary button.
Tab Focus will be changed within the Dialog elements
Shift + Tab Moves focus to the previous focusable element within the dialog. When the first focusable element has focus, pressing Shift + Tab moves focus to the last focusable element. 
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
    <button class="e-control e-btn" style="position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
    <div #container class='root-container'></div>
      <ejs-dialog id='dialog' #ejDialog header='Feedback' [target]='targetElement'
      width='400px' [buttons]='buttons' showCloseIcon='true' height='300px'>
      <ng-template #content>
            <form>
                <div class='form-group'><label for='email'>Email:</label>
                    <input type='email' class='form-control' id='email'>
                </div>
                <div class='form-group'></div>
                <div class='form-group'>
                    <label for='comment'>Comments:</label>
                    <textarea style='resize: none;' class='form-control' rows='5' id='comment'></textarea>
                </div>
            </form>
      </ng-template>
      </ejs-dialog>
        `
})

export class AppComponent implements OnInit {
    @ViewChild('ejDialog') ejDialog: DialogComponent | any;
    // Create element reference for dialog target element.
    @ViewChild('container', { read: ElementRef }) container: ElementRef |any;

    public targetElement?: HTMLElement;

    //To get all element of the dialog component after component get initialized.
    ngOnInit() {
      this.initilaizeTarget();
    }

    // Initialize the Dialog component target element.
    public initilaizeTarget: EmitType<object> = () => {
      this.targetElement = this.container.nativeElement.parentElement;
    }
    // Hide the Dialog when click the footer button.
    public hideDialog: EmitType<object> = () => {
        this.ejDialog.hide();
    }
    // Enables the footer buttons
    public buttons: Object = [
        {
            'click': this.hideDialog.bind(this),
            // Accessing button component properties by buttonModel property
              buttonModel:{
              content:'Submit',
              isPrimary:true
            }
        }
    ];
    // Sample level code to handle the button click action
    public onOpenDialog =  (event: any): void => {
        // Call the show method to open the Dialog
        this.ejDialog.show();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also

Ensuring accessibility

The Dialog component’s accessibility is validated using accessibility-checker and axe-core tools during automated testing.

The following sample demonstrates the accessibility compliance of the Dialog component. Open the sample in a new window to evaluate the Dialog component’s accessibility with accessibility tools.

See also