包含可访问性选项在这里它将起作用

Question

我正在研究高级图表的可访问性，我正在查看他们的示例，他们的实现与我的不同。

我在尝试从另一个模块导入图表组件。因此，如果我在此处包含可访问性选项，它是否可行或者我是否需要添加体育图表项目？

我的代码如下：

import React, {Component, PropTypes} from 'react';
import SportsGraph from 'sports-kick';
import SportsGraphMore from 'sports-kick/sports-kick-more';
import SportsGraphNoData from 'sports-kick/modules/no-data-to-display';
import SportsGraphAccessibility from 'sports-kick/modules/accessibility';

import './css/chart.css';

debugger;

export class Sports extends Component {
    static mergeVariousValues(chartVariousValues) {
        const lang = chartVariousValues.lang;
        debugger;

        return {
            ...chartVariousValues,
            lang: {
                ...lang,
                noData: (lang && lang.noData) || 'There is no data to show here yet.'
            }
        };
    }

    constructor(props) {
        super(props);

        this.refSports = this.refSports.bind(this);
        this.mergeConfigs = this.mergeConfigs.bind(this);
        this.renderSports = this.renderSports.bind(this);
    }

    componentDidMount() {
        this.renderSports(this.props);
    }

    shouldComponentUpdate(nextProps) {
        if (!nextProps.shouldUpdate || nextProps.playersOptions === this.props.playersOptions) {
            return true;
        }

        this.renderSports(nextProps);
        return false;
    }

    componentWillUnmount() {
        (this.chart && this.chart.destroy());
    }

    mergeConfigs(chartConfig) {
        const chart = chartConfig.chart;

        return {
            ...chartConfig,
            chart: {
                ...chart,
                renderTo: this.chart
            },
            credits: {
                enabled: false
            },
            noData: {
                useHTML: true
            },
            accessibility: {
                keyboardNavigation: {
                    skipNullPoints: true
                }
            }
        };
    }

    renderSports(props) {
        debugger;
        SportsGraphNoData(SportsGraph);
        SportsGraphAccessibility(SportsGraph);

        const {playersOptions, options, withMore} = props;

        (withMore && SportsGraphMore(SportsGraph));

        (options && SportsGraph.setVariousValues(Sports.mergeVariousValues(options)));

        this.chart = SportsGraph['chart'](this.mergeConfigs(playersOptions));

        const view = typeof global === 'undefined' ? window : global;
        view.requestAnimationFrame && requestAnimationFrame(() => {
            (this.chart && this.chart.redraw() && this.chart.reflow());
        });
    }

    refSports(chart) {
        this.chart = chart;
    }

    render() {
        debugger;
        console.log("simulation-tool");

        return (<div ref={this.refSports} />);
    }
}

Sports.propTypes = {
    playersOptions: PropTypes.shape({
        chart: PropTypes.object.isRequired
    }).isRequired,
    options: PropTypes.object,
    shouldUpdate: PropTypes.bool,
    withMore: PropTypes.bool
};

Sports.defaultProps = {
    shouldUpdate: true,
    withMore: false
};

export default Sports;

我打算将this fiddle中的代码包含在此文件中。

或者我是否需要添加another project文件？