ui/AnnounceDecorator

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

import AnnounceDecorator from '@enact/ui/AnnounceDecorator';

Members

AnnounceDecoratorHigher-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.

Example:

import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
import React from 'react';

const Example = AnnounceDecorator(class extends React.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>
  }
});
import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
Properties added to wrapped component
children
Node

The wrapped component's children.

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

AnnounceClass

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 React from 'react';

class Example extends React.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>
  }
}
import {Announce} from '@enact/ui/AnnounceDecorator';
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
ArrayBooleanFunctionModuleNumberObjectString