0

I have a Chart component, created with Highcharts, which looks like this:

<div className={scss.chartContainer}>
                {!hideContextMenu && (
                    <div className={scss.contextMenu}>
                        <ChartContextMenu
                            contextMenuLabel={`${contextMenuForLabel} ${defaultChartTitle}`}
                            enhancedContrastState={[a11yModeEnabled, toggleA11yMode]}
                            enhancedContrastLabel={contextMenuEnhancedContrastLabel}
                            enhancedContrastTooltip={contextMenuEnhancedContrastTooltip}
                            tableViewState={[showDataTable, setShowDataTable]}
                            tableViewLabel={contextMenuTableViewLabel}
                            tableViewTooltip={contextMenuTableViewTooltip}
                        />
                    </div>
                )}
                <HighchartsReact
                    containerProps={{
                        "data-component": "chart",
                        "data-observe-key": props["data-observe-key"],
                        className: className,
                        style: style,
                    }}
                    highcharts={Highcharts}
                    options={chartOptions}
                    ref={chartComponentRef}
                />
            </div>

Which looks like this (the ChartContextMenu is the cogwheel button on the right) enter image description here

Ok, so to my problem: Currently, in terms of accessibility, the keyboard navigation is:

  1. Cogwheel button
  2. Legend
  3. Series

And that totally makes sense, because the div order (ChartContextMenu is before the chart), and the keyboard navigation within Highcharts is

keyboardNavigation: {
                order: ["legend", "series"],
            },

But I require to change this order, making the legend as 1st, followed by the cogwheel button, and last the series. How can I change this order? Like, I need to put a div that is outside the actual chart in the middle of the chart order Required order: 1. Legend 2. Cogwheel button 3. Series

I have tried using tabIndex attribute within the divs to test it, but couldn't find a way to make it work..

Edit: I'm trying to follow the example from Highcharts API about Accessibility Custom Components, but I'm having some trouble with it: Example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/accessibility/custom-component

My code:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const HighchartsContextMenu = function (this: any, chart: any) {
    this.initBase(chart);
    return (
        <>
            {!hideContextMenu && (
                <div className={scss.contextMenu}>
                    <ChartContextMenu
                        contextMenuLabel={`${contextMenuForLabel} ${defaultChartTitle}`}
                        enhancedContrastState={[a11yModeEnabled, toggleA11yMode]}
                        enhancedContrastLabel={contextMenuEnhancedContrastLabel}
                        enhancedContrastTooltip={contextMenuEnhancedContrastTooltip}
                        tableViewState={[showDataTable, setShowDataTable]}
                        tableViewLabel={contextMenuTableViewLabel}
                        tableViewTooltip={contextMenuTableViewTooltip}
                    />
                </div>
            )}
        </>
    );
};
HighchartsContextMenu.prototype = new Highcharts.AccessibilityComponent();
const element = (
        <>
            <SrOnly>
                <Link href={`#${skipChartAnchorId}`}>{i18n.skipChart}</Link>
            </SrOnly>
            <div className={scss.chartContainer}>
                <HighchartsContextMenu />
                <HighchartsReact
                    containerProps={{
                        "data-component": "chart",
                        "data-observe-key": props["data-observe-key"],
                        className: className,
                        style: style,
                    }}
                    highcharts={Highcharts}
                    options={chartOptions}
                    ref={chartComponentRef}
                />
            </div>

in the options:

accessibility: {
            landmarkVerbosity: "disabled",
            point: {
                dateFormat: "%B %e, %Y",
            },
            screenReaderSection: {
                beforeChartFormat: beforeChartFormatTemplate,
                onViewDataTableClick: undefined,
            },
            customComponents: {
                chartContextMenu: ChartContextMenu,
            },
            keyboardNavigation: {
                order: ["legend", "chartContextMenu", "series"],
            },
        },

The error: TypeError: this is undefined

Also, talking about the example, they create some functions extending Highcharts to config the button.. but since it's a custom component, do I have to do that as well? I'm kinda lost on this one

Alvaro Silva
  • 23
  • 7
  • You need to add your component as an `accessibility.customComponents` . Then you will be able to use it in `keyboardNavigation.order` . Demo JS: https://jsfiddle.net/BlackLabel/t86yn2uj/ . API Reference: https://api.highcharts.com/highcharts/accessibility.customComponents If you will need help with implementation in React , please reproduce your config into the simplified demo, that I could work on. Regards! – magdalena Aug 29 '22 at 11:23
  • @magdalena this is awesome! it's probably exactly what I need, but I'm running into some typescript issues, not sure if it's the correct way to do it, because it's not creating a simple button like the example from Highcharts API.. I'll edit the post to add my current solution and problem – Alvaro Silva Aug 31 '22 at 22:27
  • To use React components you have to convert them to HTML by using `renderToString` or `renderToStaticMarkup` methods, or use portals and render components into already existing chart elements. Docs: https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element Useful thread: https://github.com/highcharts/highcharts-react/issues/23 – magdalena Sep 01 '22 at 13:39

0 Answers0