Accessibility in EJ2 TypeScript Dialog
4 Sep 20269 minutes to read
The Dialog component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Dialog component is outlined below.
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Dialog is characterized by complete ARIA accessibility support, which helps make it accessible to on-screen readers and other assistive technology devices. This component is designed with reference to the guidelines document given in WAI ARIA Accessibility Practices.
The Dialog component uses the Dialog role and the following ARIA properties on its element based on its state.
| Property | Functionalities |
|---|---|
| aria-describedby | It indicates the Dialog content description is notified to the user through assistive technologies. |
| aria-labelledby | The Dialog title is notified to the user through assistive technologies. |
| aria-modal | For a modal Dialog, its value is true; for a non-modal Dialog, its value is false. |
| aria-grabbed | When the draggable Dialog is enabled and dragging starts, its value is true; when dragging stops, its value is false. |
Keyboard interaction
The keyboard interaction of the Dialog component is designed based on WAI-ARIA Practices described for Dialog. The user can use the following shortcut keys to interact with the Dialog.
| Keyboard shortcuts | Actions |
| Esc | Closes the Dialog. This functionality can be controlled by using `closeOnEscape` |
| Enter | When a Dialog button or any input (except a textarea) is focused, pressing Enter triggers the click event of the primary button. The Enter key does not work when the Dialog content contains a textarea with initial focus; in that case, use Ctrl + Enter. |
| Ctrl + Enter | When the Dialog content contains a textarea and it is in focus state, press Ctrl + Enter to call the click event function associated with the primary button. |
| Tab | Focus moves to the next focusable element within the Dialog. |
| Shift + Tab | Focus moves to the previous focusable element within the Dialog. When the first focusable element in the Dialog is focused, pressing Shift + Tab moves the focus to the last focusable element. |
import { Dialog } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize Dialog component
let dialog: Dialog = new Dialog({
// Enables the header
header: 'Feedback',
// Dialog content
content: document.getElementById("dlgContent"),
// Enables the close icon in header
showCloseIcon: true,
// Enables the footer buttons
buttons: [{
// Accessing button component properties by buttonModel property
buttonModel: {
//Enables the primary button
isPrimary: true,
content: 'Submit',
cssClass: 'e-flat',
},
// Click the footer buttons to hide the Dialog
click: function () {
this.hide();
}
}],
// The Dialog shows within the target element
target: document.getElementById("container"),
// Dialog width
width: '400px',
// Dialog height
height: '330px',
beforeOpen: onBeforeopen
});
// Render initialized Dialog
dialog.appendTo('#dialog');
// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = (): void => {
// Call the show method to open the Dialog
dialog.show();
};
function onBeforeopen(): void {
document.getElementById('dlgContent').style.visibility = 'visible';
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Dialog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript UI Components" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button>
<div id='dialog'></div>
<form id='dlgContent' style="visibility: hidden">
<div class='form-group'><label for='email'>Email:</label>
<input type='email' class='form-control' id='email'>
</div>
<div class='form-group'>
<label for='comment'>Comments:</label>
<textarea style='resize: none;' class='form-control' rows='4' id='comment'></textarea>
</div>
</form>
</div>
</body>
</html>See Also
Ensuring accessibility
The Dialog component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Dialog component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Dialog component with accessibility tools.