ContainerComponent.js 3.8 KB

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