Accessibility in React Dialog component
24 Jan 202416 minutes to read
The Dialog component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG 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 characterized with complete ARIA Accessibility support which helps to accessible by on-screen readers and other assistive technology devices. This component designed with the reference of the guidelines document given in WAI ARAI Accessibility Practices.
The Dialog component uses the Dialog role and following ARIA properties to 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 modal dialog it’s value is true and non-modal dialog its value is false |
| aria-grabbed | Enable the draggable Dialog and starts dragging it is value is true and stopping the drag its value is false |
Keyboard interaction
Keyboard interaction of Dialog component has designed based on WAI-ARIA Practices described for Dialog. 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`](https://ej2.syncfusion.com/react/documentation/api/dialog/#closeonescape) |
| Enter | When the Dialog button or any input (except text area) is in focus state, when pressing the Enter key, the click event associated with the primary button or button will trigger. Enter key is not working when the Dialog content contains any text area with initial focus |
| Ctrl + Enter | When the Dialog content contains text area and it is in focus state, and press the Ctrl + Enter key to call the click event function associated with primary button |
| Tab | Focus will be changed within the Dialog elements |
| Shift + Tab | The Focus will be changed previous focusable element within the Dialog elements. When focusing a first focusable element in the Dialog, then press the shift + tab key, it will change the focus to last focusable element |
[Class-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
dialogInstance;
buttons = [{
buttonModel: {
content: 'Submit',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
this.dialogInstance.hide();
}
}];
handleClick() {
this.dialogInstance.show();
}
render() {
return (<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
<DialogComponent width='400px' target='#dialog-target' header='Feedback' showCloseIcon={true} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
<form>
<div className='form-group'>
<label htmlFor='email'> Email:</label>
<input type='email' className='form-control' id='email'/>
</div>
<div className='form-group'>
<label htmlFor='comment'>Comments:</label>
<textarea className='form-control' id='comment'/>
</div>
</form>
</DialogComponent>
</div>);
}
}
export default App;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
public dialogInstance: DialogComponent;
public buttons: any = [{
buttonModel: {
content: 'Submit',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
this.dialogInstance.hide();
}
}];
public handleClick() {
this.dialogInstance.show();
}
public render() {
return (
<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
<DialogComponent width='400px' target='#dialog-target' header='Feedback' showCloseIcon={true} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
<form>
<div className='form-group'>
<label htmlFor='email'> Email:</label>
<input type='email' className='form-control' id='email'/>
</div>
<div className='form-group'>
<label htmlFor='comment'>Comments:</label>
<textarea className='form-control' id='comment'/>
</div>
</form>
</DialogComponent>
</div>);
}
}
export default App;[Functional-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
let dialogInstance;
let buttons = [{
buttonModel: {
content: 'Submit',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
dialogInstance.hide();
}
}];
function handleClick() {
dialogInstance.show();
}
return (<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
<DialogComponent width='400px' target='#dialog-target' header='Feedback' showCloseIcon={true} buttons={buttons} ref={dialog => dialogInstance = dialog}>
<form>
<div className='form-group'>
<label htmlFor='email'> Email:</label>
<input type='email' className='form-control' id='email'/>
</div>
<div className='form-group'>
<label htmlFor='comment'>Comments:</label>
<textarea className='form-control' id='comment'/>
</div>
</form>
</DialogComponent>
</div>);
}
export default App;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
let dialogInstance: DialogComponent;
let buttons: any = [{
buttonModel: {
content: 'Submit',
cssClass: 'e-flat',
isPrimary: true,
},
'click': () => {
dialogInstance.hide();
}
}];
function handleClick() {
dialogInstance.show();
}
return (
<div className="App" id='dialog-target'>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={ handleClick.bind(this)}>Open</button>
<DialogComponent width='400px' target='#dialog-target' header='Feedback' showCloseIcon={true} buttons={buttons} ref={dialog => dialogInstance = dialog!}>
<form>
<div className='form-group'>
<label htmlFor='email'> Email:</label>
<input type='email' className='form-control' id='email'/>
</div>
<div className='form-group'>
<label htmlFor='comment'>Comments:</label>
<textarea className='form-control' id='comment'/>
</div>
</form>
</DialogComponent>
</div>
);
}
export default App;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.