fix(#4382): [Accessibility] TableView: Screen Readers do not work in Firefox

[majornista]

At present, we do not support sections in TableView; the rendered content within the ScrollView is {state.visibleViews[1]}, just the table body content. I think we can fix #4382, by using role="presentation" for the TableRowGroup returned by the renderWrapper method at

react-spectrum/packages/@react-spectrum/table/src/TableViewBase.tsx

Line 294 in f1d3a8d

parent={parent?.layoutInfo}>

, and and then replacing role="presentation" on the ScrollView at

react-spectrum/packages/@react-spectrum/table/src/TableViewBase.tsx

Line 620 in f1d3a8d

role="presentation"

with role="rowgroup" at

react-spectrum/packages/@react-spectrum/table/src/TableViewBase.tsx

Line 638 in f1d3a8d

tabIndex={isVirtualDragging ? null : -1}

.

Closes #4382

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue TableView: Screen Readers do not work in Firefox #4382.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

1. Open React-Spectrum TableView Documentation page from this PR's build https://reactspectrum.blob.core.windows.net/reactspectrum/a0c4b996b72cdb148377ab4b31a707b1862d0880/docs/react-spectrum/TableView.html
2. Run axe DevTools within the Chrome web inspector.
3. 6 Scrollable region must have keyboard access error warnings will be returned. These are known false positives because each scrolling table body with CSS overflow: auto and role="rowgroup" has tabIndex={-1}, yet each table contains focusable content.

Contrast this with the previous behavior:

1. Open React-Spectrum TableView Documentation page from https://react-spectrum.adobe.com/react-spectrum/TableView.html
2. Run axe DevTools within the Chrome web inspector.
3. The 6 Scrollable region must have keyboard access known false positives are still there.
4. In addition, 38 Certain ARIA roles must contain particular children error warnings are returned, because the scrolling table body with CSS overflow: auto has both role="presentation" and tabIndex={-1}. Browsers interpret the scrollable element as an additional generic element in the accessibility tree, which breaks the expected table structure in WAI-ARIA.

🧢 Your Project:

Adobe/Accessibility

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }