TableView: Screen Readers do not work in Firefox

[jnurthen]

When running TableViews in Firefox screen readers (VO, NVDA and JAWS) do not read tables correctly. All tables only show 1 row. To reproduce:

• https://react-spectrum.adobe.com/react-spectrum/TableView.html
• Start a screen reader
• Navigate to the table
• Use the browser virtual cursor table navigation to try to read the table

This is caused by the following:

• <div role="presentation" class="spectrum-Table-body_d0fc74" tabindex="-1" style="padding: 0px; flex: 1 1 0%; overflow: auto;">
• This has tabindex = -1 so FF is correctly (according to spec) ignoring the role="presentation" so it is exposing this as a section hence breaking the table hierarchy and breaking the table
• Removing tabindex=-1 does not help as the element has a scroll event on it so FF automatically adds it to the tab navigation

The only solution I can see is to add role="rowgroup" to this element and then switch the existing child role="rowgroup" to role="presentation". This seems to resolve the issue.

[snowystinger]

I chatted with @LFDanLu, this appears to break Tables with sections. This is because then we'd end up with nested rowgroups, which we understand must all be siblings. So currently this is a no-go as we'll be supporting sections soon. https://w3c.github.io/aria/#rowgroup

[LFDanLu]

@jnurthen I tried reproducing this in NVDA with Firefox, but haven't been able to get only one row announced. When I navigate to the next table with 'T' it announces the number of rows properly and I can go through the cells via the arrow keys. I did notice that it doesn't announce the row's number when you move to the next row header though, is that the breakage in NVDA?

EDIT: Correction, ctrl + alt doesn't work for navigating the cells but arrow keys do move the virtual cursor in FF NVDA. Chrome NVDA works with ctrl + alt + arrow keys

[LFDanLu]

Related: https://bugzilla.mozilla.org/show_bug.cgi?id=616594

[majornista]

Is there a way to use role="rowgroup", and role="presentation" for the child, when we have no more than one section within the table?

[majornista]

Chrome now seems to make scrolling elements with overflow and no tabbable descendants tabbable as well: https://codepen.io/mijordan/pen/mdYEjVw?editors=1111

Using an onFocus event handler to move focus, as suggested here: https://github.com/adobe/react-spectrum/issues/3633#issuecomment-1793339901, may be an approach that will allow us to remove tabIndex={-1} from the scrolling container element.