/* *
|
*
|
* (c) 2009-2019 Øystein Moseng
|
*
|
* Accessibility component for chart legend.
|
*
|
* License: www.highcharts.com/license
|
*
|
* */
|
|
'use strict';
|
|
Object.defineProperty(exports, "__esModule", {
|
value: true
|
});
|
|
var _Globals = require('../../../parts/Globals.js');
|
|
var _Globals2 = _interopRequireDefault(_Globals);
|
|
var _AccessibilityComponent = require('../AccessibilityComponent.js');
|
|
var _AccessibilityComponent2 = _interopRequireDefault(_AccessibilityComponent);
|
|
var _KeyboardNavigationHandler = require('../KeyboardNavigationHandler.js');
|
|
var _KeyboardNavigationHandler2 = _interopRequireDefault(_KeyboardNavigationHandler);
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
/**
|
* Highlight legend item by index.
|
*
|
* @private
|
* @function Highcharts.Chart#highlightLegendItem
|
*
|
* @param {number} ix
|
*
|
* @return {boolean}
|
*/
|
_Globals2.default.Chart.prototype.highlightLegendItem = function (ix) {
|
var items = this.legend.allItems,
|
oldIx = this.highlightedLegendItemIx;
|
|
if (items[ix]) {
|
if (items[oldIx]) {
|
_Globals2.default.fireEvent(items[oldIx].legendGroup.element, 'mouseout');
|
}
|
// Scroll if we have to
|
if (items[ix].pageIx !== undefined && items[ix].pageIx + 1 !== this.legend.currentPage) {
|
this.legend.scroll(1 + items[ix].pageIx - this.legend.currentPage);
|
}
|
// Focus
|
this.setFocusToElement(items[ix].legendItem, items[ix].a11yProxyElement);
|
_Globals2.default.fireEvent(items[ix].legendGroup.element, 'mouseover');
|
return true;
|
}
|
return false;
|
};
|
|
// Keep track of pressed state for legend items
|
_Globals2.default.addEvent(_Globals2.default.Legend, 'afterColorizeItem', function (e) {
|
var chart = this.chart,
|
a11yOptions = chart.options.accessibility,
|
legendItem = e.item;
|
if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
|
legendItem.a11yProxyElement.setAttribute('aria-pressed', e.visible ? 'false' : 'true');
|
}
|
});
|
|
/**
|
* The LegendComponent class
|
*
|
* @private
|
* @class
|
* @name Highcharts.LegendComponent
|
* @param {Highcharts.Chart} chart
|
* Chart object
|
*/
|
var LegendComponent = function LegendComponent(chart) {
|
this.initBase(chart);
|
};
|
LegendComponent.prototype = new _AccessibilityComponent2.default();
|
_Globals2.default.extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */{
|
|
/**
|
* The legend needs updates on every render, in order to update positioning
|
* of the proxy overlays.
|
*/
|
onChartRender: function onChartRender() {
|
var chart = this.chart,
|
a11yOptions = chart.options.accessibility,
|
items = chart.legend && chart.legend.allItems,
|
component = this;
|
|
// Ignore render after proxy clicked. No need to destroy it, and
|
// destroying also kills focus.
|
if (component.legendProxyButtonClicked) {
|
delete component.legendProxyButtonClicked;
|
return;
|
}
|
|
// Always Remove group if exists
|
this.removeElement(this.legendProxyGroup);
|
|
// Skip everything if we do not have legend items, or if we have a
|
// color axis
|
if (!items || !items.length || chart.colorAxis && chart.colorAxis.length || !chart.options.legend.accessibility.enabled) {
|
return;
|
}
|
|
// Add proxy group
|
this.legendProxyGroup = this.addProxyGroup({
|
'aria-label': chart.langFormat('accessibility.legendLabel'),
|
'role': a11yOptions.landmarkVerbosity === 'all' ? 'region' : null
|
});
|
|
// Proxy the legend items
|
items.forEach(function (item) {
|
if (item.legendItem && item.legendItem.element) {
|
item.a11yProxyElement = component.createProxyButton(item.legendItem, component.legendProxyGroup, {
|
tabindex: -1,
|
'aria-pressed': !item.visible,
|
'aria-label': chart.langFormat('accessibility.legendItem', {
|
chart: chart,
|
itemName: component.stripTags(item.name)
|
})
|
},
|
// Consider useHTML
|
item.legendGroup.div ? item.legendItem : item.legendGroup,
|
// Additional click event (fires first)
|
function () {
|
// Keep track of when we should ignore next render
|
component.legendProxyButtonClicked = true;
|
});
|
}
|
});
|
},
|
|
/**
|
* Get keyboard navigation handler for this component.
|
* @return {Highcharts.KeyboardNavigationHandler}
|
*/
|
getKeyboardNavigation: function getKeyboardNavigation() {
|
var keys = this.keyCodes,
|
component = this,
|
chart = this.chart,
|
a11yOptions = chart.options.accessibility;
|
return new _KeyboardNavigationHandler2.default(chart, {
|
keyCodeMap: [
|
// Arrow key handling
|
[[keys.left, keys.right, keys.up, keys.down], function (keyCode) {
|
var direction = keyCode === keys.left || keyCode === keys.up ? -1 : 1;
|
|
// Try to highlight next/prev legend item
|
var res = chart.highlightLegendItem(component.highlightedLegendItemIx + direction);
|
if (res) {
|
component.highlightedLegendItemIx += direction;
|
return this.response.success;
|
}
|
|
// Failed, can we wrap around?
|
if (chart.legend.allItems.length > 1 && a11yOptions.keyboardNavigation.wrapAround) {
|
// Wrap around if we failed and have more than 1 item
|
this.init(direction);
|
return this.response.success;
|
}
|
|
// No wrap, move
|
return this.response[direction > 0 ? 'next' : 'prev'];
|
}],
|
|
// Click item
|
[[keys.enter, keys.space], function () {
|
var legendItem = chart.legend.allItems[component.highlightedLegendItemIx];
|
if (legendItem && legendItem.a11yProxyElement) {
|
_Globals2.default.fireEvent(legendItem.a11yProxyElement, 'click');
|
}
|
return this.response.success;
|
}]],
|
|
// Only run this module if we have at least one legend - wait for
|
// it - item. Don't run if the legend is populated by a colorAxis.
|
// Don't run if legend navigation is disabled.
|
validate: function validate() {
|
var legendOptions = chart.options.legend;
|
return chart.legend && chart.legend.allItems && chart.legend.display && !(chart.colorAxis && chart.colorAxis.length) && legendOptions && legendOptions.accessibility && legendOptions.accessibility.enabled && legendOptions.accessibility.keyboardNavigation && legendOptions.accessibility.keyboardNavigation.enabled;
|
},
|
|
// Focus first/last item
|
init: function init(direction) {
|
var ix = direction > 0 ? 0 : chart.legend.allItems.length - 1;
|
chart.highlightLegendItem(ix);
|
component.highlightedLegendItemIx = ix;
|
}
|
});
|
}
|
|
});
|
|
exports.default = LegendComponent;
|
