Table Roles in SVGs Do Not Support Table Navigation with Firefox

[aardrian]

Steps to reproduce:

Using Firefox:

1. Visit https://cdpn.io/aardrian/debug/xxqYyaa.
2. Press 2 to navigate to the heading "3. SVG with Table Roles".
3. Press T to navigate to the table that immediately follows that heading.
4. Navigate into the table and then move among cells using Ctrl + Alt + arrow key.

Actual behavior:

NVDA reports "Not in a table cell".

Expected behavior:

I can navigate the SVG as any other well-formed HTML table.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

NVDA 2021.1

Windows version:

Windows 10

Name and version of other software in use when reproducing the issue:

Firefox 91

Other information about your system:

Other questions

Does the issue still occur after restarting your computer?

Yes.

Have you tried any other versions of NVDA? If so, please report their behaviors.

No.

If add-ons are disabled, is your problem still occurring?

Yes.

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

Yes.

Bunches More Detail

Even though Firefox recognizes the table roles in its accessibility tree, NVDA does not navigate the SVGs as tables.

Sample code in Codepen (in case easier to use):
https://codepen.io/aardrian/pen/xxqYyaa

NVDA has no problem navigating a construct of <div>s with table roles as if it was a table. Example:

<div role="table" aria-labelledby="RoleCaption">
  <div role="caption" id="RoleCaption">Party Expenses by Month in Gold Pieces</div>
  <div role="row">
    <div role="columnheader">Expense Type</div>
    <div role="columnheader">January</div>
    <div role="columnheader">February</div>
    <div role="columnheader">March</div>
    <div role="columnheader">April</div>
    <div role="columnheader">May</div>
    <div role="columnheader">June</div>
  </div>

Each SVG has table roles that follow a similar structure.

<svg viewBox="0 0 150 120" xmlns="http://www.w3.org/2000/svg" role="table" aria-labelledby="ex-01_c" id="ex-01">
  <style>
   [...]
  </style>
  <text x="50" y="5" id="ex-01_c" role="caption">Party Expenses by Month in Gold Pieces</text>
  <g role="row">
    <text x="0" y="105" text-anchor="middle" role="columnheader" class="visually-hidden">Expense Type</text>
    <text x="30" y="105" text-anchor="middle" role="columnheader" id="ex-01_m01">January</text>
    <text x="50" y="105" text-anchor="middle" role="columnheader" id="ex-01_m02">February</text>
    <text x="70" y="105" text-anchor="middle" role="columnheader" id="ex-01_m03">March</text>
    <text x="90" y="105" text-anchor="middle" role="columnheader" id="ex-01_m04">April</text>
    <text x="110" y="105" text-anchor="middle" role="columnheader" id="ex-01_m05">May</text>
    <text x="130" y="105" text-anchor="middle" role="columnheader" id="ex-01_m06">June</text>
  </g>

The Firefox accessibility inspector recognizes the structure as a table:

When I navigate native or <div> tables on the page by pressing T, I hear the table, its caption, and a count of rows and columns:

Party Expenses by Month in Gold Pieces table with 6 rows and 7 columns Party Expenses by Month in Gold Pieces caption

When I navigate to the SVGs with table roles by pressing T, I do not get a count of rows and columns:

Party Expenses by Month in Gold Pieces table Party Expenses by Month in Gold Pieces caption

With a regular table or <div> tables, pressing down arrow drops me into the first cell:

row 1 column 1 Expense Type

The SVG drops me into the first cell, but does not tell me the row or column position:

column header Expense Type

When I use Ctrl + Alt + arrow key to move down or to the right, I am told I am not in a cell:

Not in a table cell

I discovered this while doing some research and prototyping for Fizz Studio, where they are hoping to leverage table roles in SVGs to impart structural relationships and navigation to data visualizations.

[Adriani90]

cc: @jcsteh, @MarcoZehe

[jcsteh]

Oof. This is definitely a Firefox bug. I filed it as https://bugzilla.mozilla.org/show_bug.cgi?id=1728676. See that bug if you're interested in the technical details.

[aardrian]

Oof on me for not digging deeply enough. Thanks for doing that.

[jcsteh]

In fairness, it would have been difficult for you to dig that deep without other tools or an understanding of the NVDA Python console. The Firefox A11y Inspector doesn't show the table interfaces.

[aardrian]

Nice of you to say, but I could have tried through inspect.exe or tried Accessibility Insights to see what was exposed. But I'll take the pass.

[Adriani90]

This was fixed in Firefox 116. Closing as works for me.