Search results

Accessibility in React Toast component

03 Aug 2021 / 1 minute 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.
Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
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;
Copied to clipboard
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    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;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));