to include the keyboardNavigation feature in my application

test.md

• i am trying to implement accessibility in my highcharts
• i got the latest version of highcharts 5.0 since in this version only they have included accessibility for highcharts
• i have imported accessibility in my code like this import SportsGraphAccessibility from 'sports-kick/modules/accessibility';
• but to include the keyboardNavigation feature in my application I included in my example.
• can you let me know whether I have done it correctly.
• providing code below -original highchats demo can be seen here http://jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/highcharts/accessibility/advanced-accessible/ accessibility: { keyboardNavigation: { skipNullPoints: true },

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;