ui/AnnounceDecorator

ui/AnnounceDecorator.AnnounceDecorator is a Higher-order Component that passes 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.

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>
  }
});

ui/AnnounceDecorator.Announce provides an imperative API, announce, to alert the user of behavior for accessibility.

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>
  }
}