title: Change keyboard navigation order with element outside Highcharts React
body: <p>I have a Chart component, created with Highcharts, which looks like this:</p>
  <pre><code>&lt;div className={scss.chartContainer}&gt;
                  {!hideContextMenu &amp;&amp; (
                      &lt;div className={scss.contextMenu}&gt;
                          &lt;ChartContextMenu
                              contextMenuLabel={`${contextMenuForLabel} ${defaultChartTitle}`}
                              enhancedContrastState={[a11yModeEnabled, toggleA11yMode]}
                              enhancedContrastLabel={contextMenuEnhancedContrastLabel}
                              enhancedContrastTooltip={contextMenuEnhancedContrastTooltip}
                              tableViewState={[showDataTable, setShowDataTable]}
                              tableViewLabel={contextMenuTableViewLabel}
                              tableViewTooltip={contextMenuTableViewTooltip}
                          /&gt;
                      &lt;/div&gt;
                  )}
                  &lt;HighchartsReact
                      containerProps={{
                          &quot;data-component&quot;: &quot;chart&quot;,
                          &quot;data-observe-key&quot;: props[&quot;data-observe-key&quot;],
                          className: className,
                          style: style,
                      }}
                      highcharts={Highcharts}
                      options={chartOptions}
                      ref={chartComponentRef}
                  /&gt;
              &lt;/div&gt;
  </code></pre>
  <p>Which looks like this (the <code>ChartContextMenu</code> is the cogwheel button on the right)
  <a href="https://i.stack.imgur.com/imReP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/imReP.png" alt="enter image description here" /></a></p>
  <p>Ok, so to my problem:
  Currently, in terms of accessibility, the keyboard navigation is:</p>
  <ol>
  <li>Cogwheel button</li>
  <li>Legend</li>
  <li>Series</li>
  </ol>
  <p>And that totally makes sense, because the div order (<code>ChartContextMenu</code> is before the chart), and the keyboard navigation within Highcharts is</p>
  <pre><code>keyboardNavigation: {
                  order: [&quot;legend&quot;, &quot;series&quot;],
              },
  </code></pre>
  <p><strong>But I require to change this order, making the legend as 1st, followed by the cogwheel button, and last the series.</strong>
  <strong>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</strong>
  <strong>Required order:</strong>
  <strong>1. Legend</strong>
  <strong>2. Cogwheel button</strong>
  <strong>3. Series</strong></p>
  <p>I have tried using <code>tabIndex</code> attribute within the divs to test it, but couldn't find a way to make it work..</p>
  <p><strong>Edit:</strong>
  I'm trying to follow the example from Highcharts API about Accessibility Custom Components, but I'm having some trouble with it:
  Example: <a href="https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/accessibility/custom-component" rel="nofollow noreferrer">https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/accessibility/custom-component</a></p>
  <p>My code:</p>
  <pre><code>// eslint-disable-next-line @typescript-eslint/no-explicit-any
  const HighchartsContextMenu = function (this: any, chart: any) {
      this.initBase(chart);
      return (
          &lt;&gt;
              {!hideContextMenu &amp;&amp; (
                  &lt;div className={scss.contextMenu}&gt;
                      &lt;ChartContextMenu
                          contextMenuLabel={`${contextMenuForLabel} ${defaultChartTitle}`}
                          enhancedContrastState={[a11yModeEnabled, toggleA11yMode]}
                          enhancedContrastLabel={contextMenuEnhancedContrastLabel}
                          enhancedContrastTooltip={contextMenuEnhancedContrastTooltip}
                          tableViewState={[showDataTable, setShowDataTable]}
                          tableViewLabel={contextMenuTableViewLabel}
                          tableViewTooltip={contextMenuTableViewTooltip}
                      /&gt;
                  &lt;/div&gt;
              )}
          &lt;/&gt;
      );
  };
  HighchartsContextMenu.prototype = new Highcharts.AccessibilityComponent();
  const element = (
          &lt;&gt;
              &lt;SrOnly&gt;
                  &lt;Link href={`#${skipChartAnchorId}`}&gt;{i18n.skipChart}&lt;/Link&gt;
              &lt;/SrOnly&gt;
              &lt;div className={scss.chartContainer}&gt;
                  &lt;HighchartsContextMenu /&gt;
                  &lt;HighchartsReact
                      containerProps={{
                          &quot;data-component&quot;: &quot;chart&quot;,
                          &quot;data-observe-key&quot;: props[&quot;data-observe-key&quot;],
                          className: className,
                          style: style,
                      }}
                      highcharts={Highcharts}
                      options={chartOptions}
                      ref={chartComponentRef}
                  /&gt;
              &lt;/div&gt;
  </code></pre>
  <p>in the options:</p>
  <pre><code>accessibility: {
              landmarkVerbosity: &quot;disabled&quot;,
              point: {
                  dateFormat: &quot;%B %e, %Y&quot;,
              },
              screenReaderSection: {
                  beforeChartFormat: beforeChartFormatTemplate,
                  onViewDataTableClick: undefined,
              },
              customComponents: {
                  chartContextMenu: ChartContextMenu,
              },
              keyboardNavigation: {
                  order: [&quot;legend&quot;, &quot;chartContextMenu&quot;, &quot;series&quot;],
              },
          },
  </code></pre>
  <p>The error:
  <strong><code>TypeError: this is undefined</code></strong></p>
  <p>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</p>