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]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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;