Announcer.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /* *
  2. *
  3. * (c) 2009-2021 Øystein Moseng
  4. *
  5. * Create announcer to speak messages to screen readers and other AT.
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../../Core/Globals.js';
  14. import AST from '../../Core/Renderer/HTML/AST.js';
  15. var doc = H.doc;
  16. import DOMElementProvider from './DOMElementProvider.js';
  17. import HTMLUtilities from './HTMLUtilities.js';
  18. var setElAttrs = HTMLUtilities.setElAttrs, visuallyHideElement = HTMLUtilities.visuallyHideElement;
  19. var Announcer = /** @class */ (function () {
  20. function Announcer(chart, type) {
  21. this.chart = chart;
  22. this.domElementProvider = new DOMElementProvider();
  23. this.announceRegion = this.addAnnounceRegion(type);
  24. }
  25. Announcer.prototype.destroy = function () {
  26. this.domElementProvider.destroyCreatedElements();
  27. };
  28. Announcer.prototype.announce = function (message) {
  29. var _this = this;
  30. AST.setElementHTML(this.announceRegion, message);
  31. // Delete contents after a little while to avoid user finding the live
  32. // region in the DOM.
  33. if (this.clearAnnouncementRegionTimer) {
  34. clearTimeout(this.clearAnnouncementRegionTimer);
  35. }
  36. this.clearAnnouncementRegionTimer = setTimeout(function () {
  37. _this.announceRegion.innerHTML = '';
  38. delete _this.clearAnnouncementRegionTimer;
  39. }, 1000);
  40. };
  41. Announcer.prototype.addAnnounceRegion = function (type) {
  42. var chartContainer = this.chart.announcerContainer || this.createAnnouncerContainer();
  43. var div = this.domElementProvider.createElement('div');
  44. setElAttrs(div, {
  45. 'aria-hidden': false,
  46. 'aria-live': type
  47. });
  48. visuallyHideElement(div);
  49. chartContainer.appendChild(div);
  50. return div;
  51. };
  52. Announcer.prototype.createAnnouncerContainer = function () {
  53. var chart = this.chart;
  54. var container = doc.createElement('div');
  55. setElAttrs(container, {
  56. 'aria-hidden': false,
  57. style: 'position:relative',
  58. 'class': 'highcharts-announcer-container'
  59. });
  60. chart.renderTo.insertBefore(container, chart.renderTo.firstChild);
  61. chart.announcerContainer = container;
  62. return container;
  63. };
  64. return Announcer;
  65. }());
  66. H.Announcer = Announcer;
  67. export default Announcer;