ui/ Announce Decorator
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. 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>
}
});
import AnnounceDecorator from '@enact/ui/AnnounceDecorator';
Properties added to wrapped component
The wrapped component's children.
An instance of ui/AnnounceDecorator.Announce will be appended to
children
.
AnnounceComponent
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>
}
}
import {Announce} from '@enact/ui/AnnounceDecorator';
Properties
Time, in milliseconds, to wait to remove the alert message.
Subsequent updates to the message before the timeout are ignored.
Default: 500