Accessibility - screen reader navigation & accessible data table

[GuillaumeMMM]

Description

Hello there, I was looking at the LineChart and found the following accessibility issues (especially regarding the screen reader's user experience).

• The tooltip text content is not read by the screen reader when hovering the data points with the mouse, or when navigating with keyboard arrows (It might be because StreamXYFrame re-renders on mousemove and keydown, thus the div bearing the aria-live attribute is re-created while live region elements must already be in the DOM when the content changes). On Chrome nothing happens, on Firefox the SR reads "XY Chart" for each data point.
• When navigating with the SR, AccessibleDataTable appears and is read through even if the trigger button was not clicked. SR users have to go through the table no matter what.
• AccessibleDataTable shows values X/Y in pixels, and not the data itself. I don't know if pixels could be of any use for users, so I guess it's a bug. I also think that the data table should show (or give access to) the whole data and not only the first 5 lines, otherwise I don't see the use for that table.

I used Voiceover along with Google Chrome 148.0.7778.179 & Firefox 148.0 on MacOS 26.3.1.

Steps to reproduce

import { LineChart } from "semiotic/xy"

const data = [
  { month: 1, sales: 4200 },
  { month: 2, sales: 5100 },
  { month: 3, sales: 6800 },
  { month: 4, sales: 5900 },
  { month: 5, sales: 7200 },
  { month: 6, sales: 8100 },
  { month: 7, sales: 9100 },
  { month: 8, sales: 2100 },
  { month: 9, sales: 3100 },
]

export function Chart() {
  return (
    <LineChart
      data={data}
      xAccessor="month"
      yAccessor="sales"
      xLabel="Month"
      yLabel="Sales ($)"
    />
  )
}

Semiotic version

3.6.0

React version

19.2.6

Component

LineChart

[emeeks]

Thank you, @GuillaumeMMM that's a clear bug as far as the screen reader goes. When it comes to the table, I'm of a mixed opinion. I explicitly went with the 5 rows following the model that python dataframes and jupyter notebooks uses: show a sample of the table in order to give some sense of what is in the table. There's two reasons for this:

1. It's very common for people to use this method just to get a sense of what's in the data. I wanted to expose this for accessibility purposes not to replace the chart with a table (since many charts gain their meaning via the graphical encoding not the raw values of the elements).
2. I did not want to end up in a situation where someone tries to visualize 50,000 datapoints (which Semiotic would do fine because of canvas rendering) and then watch them crash the thing because it tried to naively instantiate a table with 50,000 datapoints. That said, I think I could add pagination in a trivial manner and afford people the chance to see more than five rows if they really wanted to. This does become a data exfiltration method but I'm ideologically opposed to charting libraries that try to make data only accessible to people technically savvy enough to find it in the dev tools.

[emeeks]

@GuillaumeMMM if you get a chance could you take a look and see if #977 resolves these issues for you?