如何将 aria 属性设置为 highcharts 工具提示

Question

我有一个用 React 应用程序编写的图表 (Highcharts)，带有自定义格式的工具提示；但是，当 'tabbed' 通过点时，屏幕阅读器不会读出工具提示内容。

我写了一些 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);
        }
    }
}

我的问题是：我该如何清理它？必须有一种更有效的方法来编写此函数。

Answer 1

如果只想获取单个元素，请使用 querySelector(…) 而不是 querySelectorAll(…)[0]:

let tooltips = document.querySelectorAll('div.highcharts-tooltip')[0];
// becomes:
let tooltips = document.querySelector('div.highcharts-tooltip');

但是，根据您的代码，似乎没有必要 select div – 如果您只想要第一个 span，select 就对了离开，不存储父节点：

let tooltip = document.querySelector('div.highcharts-tooltip span');
tooltip.setAttribute('role', 'tooltip');
tooltip.setAttribute('aria-live', 'assertive');
tooltip.setAttribute('aria-label', ariaText);

为了节省几个字符并希望使长字符串更清晰，您可以使用 template literals 而不是链接 '…' + … + '…':

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 ('')

所以，你的函数可以变成：

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);
        }
    }
}

如何将 aria 属性设置为 highcharts 工具提示

How to set aria attributes to highcharts tooltips

javascript

highcharts

wai-aria