ContainerComponent.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /* *
  2. *
  3. * (c) 2009-2021 Øystein Moseng
  4. *
  5. * Accessibility component for chart container.
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. import AccessibilityComponent from '../AccessibilityComponent.js';
  13. import ChartUtilities from '../Utils/ChartUtilities.js';
  14. var unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT, getChartTitle = ChartUtilities.getChartTitle;
  15. import H from '../../Core/Globals.js';
  16. var doc = H.doc;
  17. import HTMLUtilities from '../Utils/HTMLUtilities.js';
  18. var stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString;
  19. import U from '../../Core/Utilities.js';
  20. var extend = U.extend;
  21. /* eslint-disable valid-jsdoc */
  22. /**
  23. * The ContainerComponent class
  24. *
  25. * @private
  26. * @class
  27. * @name Highcharts.ContainerComponent
  28. */
  29. var ContainerComponent = function () { };
  30. ContainerComponent.prototype = new AccessibilityComponent();
  31. extend(ContainerComponent.prototype, /** @lends Highcharts.ContainerComponent */ {
  32. /**
  33. * Called on first render/updates to the chart, including options changes.
  34. */
  35. onChartUpdate: function () {
  36. this.handleSVGTitleElement();
  37. this.setSVGContainerLabel();
  38. this.setGraphicContainerAttrs();
  39. this.setRenderToAttrs();
  40. this.makeCreditsAccessible();
  41. },
  42. /**
  43. * @private
  44. */
  45. handleSVGTitleElement: function () {
  46. var chart = this.chart, titleId = 'highcharts-title-' + chart.index, titleContents = stripHTMLTags(chart.langFormat('accessibility.svgContainerTitle', {
  47. chartTitle: getChartTitle(chart)
  48. }));
  49. if (titleContents.length) {
  50. var titleElement = this.svgTitleElement =
  51. this.svgTitleElement || doc.createElementNS('http://www.w3.org/2000/svg', 'title');
  52. titleElement.textContent = titleContents;
  53. titleElement.id = titleId;
  54. chart.renderTo.insertBefore(titleElement, chart.renderTo.firstChild);
  55. }
  56. },
  57. /**
  58. * @private
  59. */
  60. setSVGContainerLabel: function () {
  61. var chart = this.chart, svgContainerLabel = chart.langFormat('accessibility.svgContainerLabel', {
  62. chartTitle: getChartTitle(chart)
  63. });
  64. if (chart.renderer.box && svgContainerLabel.length) {
  65. chart.renderer.box.setAttribute('aria-label', svgContainerLabel);
  66. }
  67. },
  68. /**
  69. * @private
  70. */
  71. setGraphicContainerAttrs: function () {
  72. var chart = this.chart, label = chart.langFormat('accessibility.graphicContainerLabel', {
  73. chartTitle: getChartTitle(chart)
  74. });
  75. if (label.length) {
  76. chart.container.setAttribute('aria-label', label);
  77. }
  78. },
  79. /**
  80. * @private
  81. */
  82. setRenderToAttrs: function () {
  83. var chart = this.chart;
  84. if (chart.options.accessibility.landmarkVerbosity !== 'disabled') {
  85. chart.renderTo.setAttribute('role', 'region');
  86. }
  87. else {
  88. chart.renderTo.removeAttribute('role');
  89. }
  90. chart.renderTo.setAttribute('aria-label', chart.langFormat('accessibility.chartContainerLabel', {
  91. title: getChartTitle(chart),
  92. chart: chart
  93. }));
  94. },
  95. /**
  96. * @private
  97. */
  98. makeCreditsAccessible: function () {
  99. var chart = this.chart, credits = chart.credits;
  100. if (credits) {
  101. if (credits.textStr) {
  102. credits.element.setAttribute('aria-label', chart.langFormat('accessibility.credits', { creditsStr: stripHTMLTags(credits.textStr) }));
  103. }
  104. unhideChartElementFromAT(chart, credits.element);
  105. }
  106. },
  107. /**
  108. * Accessibility disabled/chart destroyed.
  109. */
  110. destroy: function () {
  111. this.chart.renderTo.setAttribute('aria-hidden', true);
  112. }
  113. });
  114. export default ContainerComponent;