React Highchart：如何将“accessibility.enabled”选项设置为 false答案

【问题标题】：React Highchart: How set the "accessibility.enabled" option to falseReact Highchart：如何将“accessibility.enabled”选项设置为 false
【发布时间】：2023-01-31 09:21:20
【问题描述】：

我在控制台中有这个错误：

Highcharts warning: Consider including the "accessibility.js" module to make your chart more usable for people with disabilities. Set the "accessibility.enabled" option to false to remove this warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.

在文档中找不到 Set the "accessibility.enabled" option to false。

这是我传递给组件的选项：

const optionNUsersPerService = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Utenti per servizio'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            name: 'Utenti',
            colorByPoint: true,
            data: getDataUsersPerService(props.items)
        }]
    }

这是组件：

return (
        <HighchartsReact
            highcharts={Highcharts}
            options={currentOptions}
            immutable={true}
            callback={props.callback}
        />
    );

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

自 Highcharts v10.1.0 (2022-04-29) 以来添加了警告

更新日志：https://www.highcharts.com/blog/changelog/

要禁用辅助功能，请设置：

  accessibility: {
    enabled: false
  }

现场演示：http://jsfiddle.net/BlackLabel/mvnjskqr/

接口参考：https://api.highcharts.com/highcharts/accessibility.enabled

【讨论】：

【解决方案2】：

我不建议您禁用图表的可访问性，这将使依赖键盘和语音软件（如 NVDA、JAWS、VoiceOver 等）的残障用户无法访问它们。

消除此警告的另一种方法是简单地导入辅助功能模块。

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";

require("highcharts/modules/accessibility")(Highcharts);

参考：https://github.com/highcharts/highcharts-react#how-to-add-a-module

参考：https://github.com/highcharts/highcharts-react/issues/141

【讨论】：