/* * * * (c) 2009-2021 Øystein Moseng * * Accessibility component for chart container. * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ 'use strict'; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); import AccessibilityComponent from '../AccessibilityComponent.js'; import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js'; import CU from '../Utils/ChartUtilities.js'; var unhideChartElementFromAT = CU.unhideChartElementFromAT, getChartTitle = CU.getChartTitle; import H from '../../Core/Globals.js'; var doc = H.doc; import HU from '../Utils/HTMLUtilities.js'; var stripHTMLTags = HU.stripHTMLTagsFromString; /** * The ContainerComponent class * * @private * @class * @name Highcharts.ContainerComponent */ var ContainerComponent = /** @class */ (function (_super) { __extends(ContainerComponent, _super); function ContainerComponent() { return _super !== null && _super.apply(this, arguments) || this; } /* * * * Functions * * */ /* eslint-disable valid-jsdoc */ /** * Called on first render/updates to the chart, including options changes. */ ContainerComponent.prototype.onChartUpdate = function () { this.handleSVGTitleElement(); this.setSVGContainerLabel(); this.setGraphicContainerAttrs(); this.setRenderToAttrs(); this.makeCreditsAccessible(); }; /** * @private */ ContainerComponent.prototype.handleSVGTitleElement = function () { var chart = this.chart, titleId = 'highcharts-title-' + chart.index, titleContents = stripHTMLTags(chart.langFormat('accessibility.svgContainerTitle', { chartTitle: getChartTitle(chart) })); if (titleContents.length) { var titleElement = this.svgTitleElement = this.svgTitleElement || doc.createElementNS('http://www.w3.org/2000/svg', 'title'); titleElement.textContent = titleContents; titleElement.id = titleId; chart.renderTo.insertBefore(titleElement, chart.renderTo.firstChild); } }; /** * @private */ ContainerComponent.prototype.setSVGContainerLabel = function () { var chart = this.chart, svgContainerLabel = chart.langFormat('accessibility.svgContainerLabel', { chartTitle: getChartTitle(chart) }); if (chart.renderer.box && svgContainerLabel.length) { chart.renderer.box.setAttribute('aria-label', svgContainerLabel); } }; /** * @private */ ContainerComponent.prototype.setGraphicContainerAttrs = function () { var chart = this.chart, label = chart.langFormat('accessibility.graphicContainerLabel', { chartTitle: getChartTitle(chart) }); if (label.length) { chart.container.setAttribute('aria-label', label); } }; /** * Set attributes on the chart container element. * @private */ ContainerComponent.prototype.setRenderToAttrs = function () { var chart = this.chart, shouldHaveLandmark = chart.options.accessibility .landmarkVerbosity !== 'disabled', containerLabel = chart.langFormat('accessibility.chartContainerLabel', { title: getChartTitle(chart), chart: chart }); if (containerLabel) { chart.renderTo.setAttribute('role', shouldHaveLandmark ? 'region' : 'group'); chart.renderTo.setAttribute('aria-label', containerLabel); } }; /** * @private */ ContainerComponent.prototype.makeCreditsAccessible = function () { var chart = this.chart, credits = chart.credits; if (credits) { if (credits.textStr) { credits.element.setAttribute('aria-label', chart.langFormat('accessibility.credits', { creditsStr: stripHTMLTags(credits.textStr) })); } unhideChartElementFromAT(chart, credits.element); } }; /** * Empty handler to just set focus on chart * @private */ ContainerComponent.prototype.getKeyboardNavigation = function () { var chart = this.chart; return new KeyboardNavigationHandler(chart, { keyCodeMap: [], validate: function () { return true; }, init: function () { var a11y = chart.accessibility; if (a11y) { a11y.keyboardNavigation.tabindexContainer.focus(); } } }); }; /** * Accessibility disabled/chart destroyed. */ ContainerComponent.prototype.destroy = function () { this.chart.renderTo.setAttribute('aria-hidden', true); }; return ContainerComponent; }(AccessibilityComponent)); /* * * * Default Export * * */ export default ContainerComponent;