92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
/* *
|
|
*
|
|
* (c) 2009-2021 Øystein Moseng
|
|
*
|
|
* Create announcer to speak messages to screen readers and other AT.
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
'use strict';
|
|
import AST from '../../Core/Renderer/HTML/AST.js';
|
|
import DOMElementProvider from './DOMElementProvider.js';
|
|
import H from '../../Core/Globals.js';
|
|
var doc = H.doc;
|
|
import HU from './HTMLUtilities.js';
|
|
var addClass = HU.addClass, visuallyHideElement = HU.visuallyHideElement;
|
|
import U from '../../Core/Utilities.js';
|
|
var attr = U.attr;
|
|
/* *
|
|
*
|
|
* Class
|
|
*
|
|
* */
|
|
var Announcer = /** @class */ (function () {
|
|
/* *
|
|
*
|
|
* Constructor
|
|
*
|
|
* */
|
|
function Announcer(chart, type) {
|
|
this.chart = chart;
|
|
this.domElementProvider = new DOMElementProvider();
|
|
this.announceRegion = this.addAnnounceRegion(type);
|
|
}
|
|
/* *
|
|
*
|
|
* Functions
|
|
*
|
|
* */
|
|
Announcer.prototype.destroy = function () {
|
|
this.domElementProvider.destroyCreatedElements();
|
|
};
|
|
Announcer.prototype.announce = function (message) {
|
|
var _this = this;
|
|
AST.setElementHTML(this.announceRegion, message);
|
|
// Delete contents after a little while to avoid user finding the live
|
|
// region in the DOM.
|
|
if (this.clearAnnouncementRegionTimer) {
|
|
clearTimeout(this.clearAnnouncementRegionTimer);
|
|
}
|
|
this.clearAnnouncementRegionTimer = setTimeout(function () {
|
|
_this.announceRegion.innerHTML = AST.emptyHTML;
|
|
delete _this.clearAnnouncementRegionTimer;
|
|
}, 1000);
|
|
};
|
|
Announcer.prototype.addAnnounceRegion = function (type) {
|
|
var chartContainer = (this.chart.announcerContainer || this.createAnnouncerContainer()), div = this.domElementProvider.createElement('div');
|
|
attr(div, {
|
|
'aria-hidden': false,
|
|
'aria-live': type
|
|
});
|
|
if (this.chart.styledMode) {
|
|
addClass(div, 'highcharts-visually-hidden');
|
|
}
|
|
else {
|
|
visuallyHideElement(div);
|
|
}
|
|
chartContainer.appendChild(div);
|
|
return div;
|
|
};
|
|
Announcer.prototype.createAnnouncerContainer = function () {
|
|
var chart = this.chart, container = doc.createElement('div');
|
|
attr(container, {
|
|
'aria-hidden': false,
|
|
'class': 'highcharts-announcer-container'
|
|
});
|
|
container.style.position = 'relative';
|
|
chart.renderTo.insertBefore(container, chart.renderTo.firstChild);
|
|
chart.announcerContainer = container;
|
|
return container;
|
|
};
|
|
return Announcer;
|
|
}());
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
export default Announcer;
|