[@uifabric/charting LineChart] Accessibility Issue with Keyboard Navigation Between Lines

[alayala-MSFT]

Hello,

We recently received an accessibility bug related to being unable to switch focus between different lines while using keyboard navigation on a LineChart.

From what I've observed in testing, when using tab navigation to change focus to the chart, the line focused will always be the first line defined from the "data" prop to LineChart.

Using the "left" and "right" arrows while focused on a line moves the focus to the different points on the line as expected, however, there doesn't seem to be a way to focus on a different line. When clicking on a different line to move focus then pressing "left" or "right," focus goes back to points on that "first line defined" mentioned above.

However, I did notice that the pop-up when focusing a point shows the values for the various time series, not just the focused point. This is consistent with hovering behavior on points.

Is it an expected behavior of LineChart to not be able to switch focus between lines using keyboard navigation since it shows the other time series values in the popup? Should we treat it as an accessibility bug?

Thanks!

[alayala-MSFT]

I've provided an example with the image below:

This chart is filled with the following example data:

const _defaultLineChartData: IChartProps = {
    lineChartData: [
      {
        data: [
          { x: getDateDaysAgo(30), y: 0 },
          { x: getDateDaysAgo(15), y: 20 },
          { x: getDateDaysAgo(0), y: 15 }
        ],

        legend: 'Foo',
        color: 'blue'
      },
      {
        data: [
          { x: getDateDaysAgo(30), y: 30 },
          { x: getDateDaysAgo(15), y: 10 },
          { x: getDateDaysAgo(10), y: 15 },
          { x: getDateDaysAgo(0), y: 10 }
        ],

        legend: 'Bar',
        color: 'red'
      },
      {
        data: [
          { x: getDateDaysAgo(30), y: 15 },
          { x: getDateDaysAgo(15), y: 5 },
          { x: getDateDaysAgo(0), y: 20 }
        ],

        legend: 'FooBar',
        color: 'green'
      }
    ]
  }

In this example above, I can only use arrow keys to navigate the points on the blue "Foo" line. Additionally, for the red "Bar" line, there is one extra data point, but it can't be navigated to by keyboard since it's not the first line in the lineChartData and the blue "Foo" line does not have a data point for that X value

[alayala-MSFT]

I found that this issue has been fixed in newer versions of @fluentui/react-charting package for fluentV8. Using a newer version of the package fixed the issue.

[alayala-MSFT]

Hello, reopening this thread. It seems we are using fluentV7 in a number of places which still has this issue even with latest upgrade of react-charting (tested with 4.23.25 of fluent charting V7). Would it be possible to have the fix for this issue added to fluentV7 as well?

[khmakoto]

@AtishayMsft fyi