react-announce-a11y
Version:
Used to have the screen reader announce messages to the user. Great for things like searches, filtering, loading, and error messages.
62 lines • 2.61 kB
JavaScript
;
// ----------------------------------------------------------------
// <copyright company="Microsoft Corporation">
// Copyright (c) Microsoft Corporation. All rights reserved.
// </copyright>
// ----------------------------------------------------------------
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var lodash_1 = require("lodash");
var React = tslib_1.__importStar(require("react"));
var screenReaderOnlyStyle = {
border: '0',
clip: 'rect(0 0 0 0)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: '0',
position: 'absolute',
width: '1px',
};
var delayToEnsureAriaMessageBeingAnnounced = 500;
;
/**
* Give an announcement to the screen reader to read.
* Can be done via a prop or via a direct method using the setAnnounceMethod prop.
*/
var ReactAnnounce = /** @class */ (function (_super) {
tslib_1.__extends(ReactAnnounce, _super);
function ReactAnnounce() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
message: '',
};
_this.debounceDelay = function () { return typeof (_this.props.debounceDelay) === 'number' ? _this.props.debounceDelay : 500; };
_this.debouncePropMessage = lodash_1.debounce(function () {
_this.updateMessage(_this.props.announceMessage);
}, _this.debounceDelay());
_this.updateMessage = function (message) {
_this.setState({ message: message || '' }, function () {
return setTimeout(function () { return _this.setState({ message: '' }); }, delayToEnsureAriaMessageBeingAnnounced);
});
};
_this.announceMethod = function (message) {
_this.updateMessage(message);
};
return _this;
}
ReactAnnounce.prototype.componentDidMount = function () {
this.props.setAnnounceMethod && this.props.setAnnounceMethod(this.announceMethod);
};
ReactAnnounce.prototype.componentDidUpdate = function (prevProps) {
if (this.props.announceMessage !== prevProps.announceMessage) {
this.debouncePropMessage();
}
};
ReactAnnounce.prototype.render = function () {
return React.createElement("div", { style: screenReaderOnlyStyle, role: "status", "aria-live": this.props.politeness || "assertive" }, this.state.message);
};
return ReactAnnounce;
}(React.Component));
exports.ReactAnnounce = ReactAnnounce;
//# sourceMappingURL=ReactAnnounce.js.map