ui/ Announce Decorator
Exports the ui/AnnounceDecorator.AnnounceDecorator Higher-order Component (HOC) and the ui/AnnounceDecorator.Announce component;
import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
Members
AnnounceDecoratorHigher-Order Component
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>
}
});
import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
Properties added to wrapped component
- children
An instance of ui/AnnounceDecorator.Announce will be appended to children
Node
AnnounceClass
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>
}
}
import {Announce} from '@enact/ui/AnnounceDecorator';
Properties
- timeout
Time, in milliseconds, to wait to remove the alert message. Subsequent updates to the message before the timeout are ignored.
Default: 500
Number
ArrayBooleanFunctionModuleNumberObjectString