[英]How to set aria attributes to highcharts tooltips
I have a chart (Highcharts) written in a React application with custom formatted tooltips; 我有一个用自定义格式的工具提示在React应用程序中编写的图表(Highcharts); however, screen readers will not announce the tooltip content when 'tabbed' through the points.
但是,屏幕阅读器在“标记”这些要点时不会宣布工具提示内容。
I wrote some JavaScript that solves my problem and announces the tooltips on mouseOut as they should be announced without creating unnecessary elements in the DOM. 我写了一些JavaScript来解决我的问题,并在mouseOut上宣布了工具提示,因为它们应该在没有在DOM中创建不必要元素的情况下被宣布。
point: {
events: {
mouseOut: function () {
let ariaText = this.category + ', Projected Savings: $ ' + this.projectedSavingsFormatted + ', Target Savings: ' + targetSavingsFormatted + ', Time to Achieve: ' + this.timeToAcheive + ' months';
let tooltips = document.querySelectorAll('div.highcharts-tooltip')[0];
tooltips.getElementsByTagName('span')[0].setAttribute('role', 'tooltip');
tooltips.getElementsByTagName('span')[0].setAttribute('aria-live', 'assertive');
tooltips.getElementsByTagName('span')[0].setAttribute('aria-label', ariaText);
}
}
}
My question is this: How do I clean this up? 我的问题是:我该如何清理? There has to be a more efficient way to write this function.
必须有一种更有效的方式来编写此功能。
If you want to get just a single element, use querySelector(…)
instead of querySelectorAll(…)[0]
: 如果只想获取单个元素,请使用
querySelector(…)
而不是querySelectorAll(…)[0]
:
let tooltips = document.querySelectorAll('div.highcharts-tooltip')[0];
// becomes:
let tooltips = document.querySelector('div.highcharts-tooltip');
But, based on your code, it seems there is no need to select the div
– if you just want the first span
, select it right away, without storing the parent node: 但是,根据您的代码,似乎没有必要选择
div
–如果您只想要第一个span
,则立即选择它,而无需存储父节点:
let tooltip = document.querySelector('div.highcharts-tooltip span');
tooltip.setAttribute('role', 'tooltip');
tooltip.setAttribute('aria-live', 'assertive');
tooltip.setAttribute('aria-label', ariaText);
To save few characters and hopefully make the long string clearer, you can use template literals instead of chaining '…' + … + '…'
: 为了节省一些字符并希望使长字符串更清晰,您可以使用模板文字,而不是链接
'…' + … + '…'
:
let ariaText = this.category + ', Projected Savings: $ ' + this.projectedSavingsFormatted + ', Target Savings: ' + targetSavingsFormatted + ', Time to Achieve: ' + this.timeToAcheive + ' months';
// becomes:
let ariaText = `${this.category}, Projected Savings: $ ${this.projectedSavingsFormatted}, Target Savings: ${targetSavingsFormatted}, Time to Achieve: ${this.timeToAcheive} months`;
// notice the backticks (``) instead of quotes ('')
So, your function could become: 因此,您的功能可能变为:
point: {
events: {
mouseOut: function () {
let ariaText = `${this.category}, Projected Savings: $ ${this.projectedSavingsFormatted}, Target Savings: ${targetSavingsFormatted}, Time to Achieve: ${this.timeToAcheive} months`;
let tooltip = document.querySelector('div.highcharts-tooltip span');
tooltip.setAttribute('role', 'tooltip');
tooltip.setAttribute('aria-live', 'assertive');
tooltip.setAttribute('aria-label', ariaText);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.