Accessibility in React Toast component
30 Jan 20233 minutes to read
The Toast component has been designed keeping in mind the WAI-ARIA specifications, by applying the prompt WAI-ARIA roles, states, and properties along with the keyboard support. Thus, making it usable for people who use assistive WAI-ARIA Accessibility supports that is achieved through the attributes. It helps to provides information about the elements in a document for assistive technology. The component implements the keyboard navigation support by following the WAI-ARIA practices and tested in major screen readers.
ARIA attributes
Class | Description |
---|---|
role |
alert: Identifies the element as the container where alert content will be added or updated. |
[Class-component]
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
toastInstance;
toastCreated() {
this.toastInstance.show();
}
render() {
return (<ToastComponent ref={toast => this.toastInstance = toast} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)}/>);
}
}
;
export default App;
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component<{}, {}> {
public toastInstance:ToastComponent;
public toastCreated(): void {
this.toastInstance.show();
}
public render() {
return (
<ToastComponent ref={ toast => this.toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={this.toastCreated = this.toastCreated.bind(this)} />
);
}
};
export default App;
[Functional-component]
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
let toastInstance;
function toastCreated() {
toastInstance.show();
}
return (<ToastComponent ref={toast => toastInstance = toast} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated.bind(this)}/>);
}
;
export default App;
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
let toastInstance:ToastComponent;
function toastCreated() {
toastInstance.show();
}
return (
<ToastComponent ref={ toast => toastInstance = toast!} title="Sample Toast Title" content="Sample Toast Content" created={toastCreated.bind(this)} />
);
};
export default App;