ui/AnnounceDecorator

Provides components to assist in notifying the user through ARIA alerts.

Members

AnnounceDecorator Higher-Order Component

A higher-order component that provides a function to its wrapped component which can be called to alert the user for accessibility notifications.

By default, the function is passed in the announce prop but may be customized by specifying the prop config member. In addition to the configured prop, this HoC also adds an additional child component to the passed children prop.

Example:

import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
import {Component} from 'react';

const Example = AnnounceDecorator(class extends Component {
  static propTypes = {
    // passed by AnnounceDecorator
    announce: PropTypes.func
  }

  notify = () => {
    const {announce} = this.props;
    announce('this text will be alerted to user by TTS');
  }

  render () {
    <div>
      <button onClick={this.notify}>Notify on Click</button>
    </div>
  }
});

Properties added to wrapped component

children

Node

The wrapped component's children.

An instance of ui/AnnounceDecoratorui/AnnounceDecorator.Announce will be appended to children.

Announce Component

An unstyled component with an imperative API to alert the user.

The announce() method should be used to alert the user of behavior for accessibility.

Example:

import {Announce} from '@enact/ui/AnnounceDecorator';
import {Component} from 'react';

class Example extends Component {
  notify = () => {
    if (this.announce) {
      this.announce.announce('this text will be alerted to user by TTS');
    }
  }

  setAnnounceRef = (announce) => {
    this.announce = announce;
  }

  render () {
    <div>
      <button onClick={this.notify}>Notify on Click</button>
      <Announce ref={this.setAnnounceRef} />
    </div>
  }
}

Properties

timeout

Number

Time, in milliseconds, to wait to remove the alert message.

Subsequent updates to the message before the timeout are ignored.

Default: 500