Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 6 commits into from
Jun 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f1d3a8d
Refactor Virtualizer to improve performance, stability, and complexity
devongovett May 25, 2024
9affd26
Additional performance improvements
devongovett May 29, 2024
a0c4b99
fix(#4382): [Accessibility] TableView: Screen Readers do not work in …
May 29, 2024
faa0e5c
fix(#4382): update code comments
May 29, 2024
2b34a1f
Merge branch 'main' into Issue-4382-TableView-ScrollView-tabIndex
Jun 5, 2024
a8ae0b8
Merge branch 'main' into Issue-4382-TableView-ScrollView-tabIndex
snowystinger Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions packages/@react-spectrum/table/src/TableViewBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,11 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
<TableRowGroup
key={reusableView.key}
layoutInfo={reusableView.layoutInfo}
parent={parent?.layoutInfo}>
parent={parent?.layoutInfo}
// Override the default role="rowgroup" with role="presentation",
// in favor or adding role="rowgroup" to the ScrollView with
// ref={bodyRef} in the TableVirtualizer below.
role="presentation">
{renderChildren(children)}
</TableRowGroup>
);
Expand Down Expand Up @@ -332,7 +336,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
</TableHeaderRow>
);
}

return (
<TableCellWrapper
key={reusableView.key}
Expand Down Expand Up @@ -448,7 +452,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
);

return (
<TableContext.Provider
<TableContext.Provider
value={{
state,
dragState,
Expand Down Expand Up @@ -491,7 +495,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
styleProps.className
)
}
// This should be `tableLayout` rather than `layout` so it doesn't
// This should be `tableLayout` rather than `layout` so it doesn't
// change objects and invalidate virtualizer.
layout={tableLayout}
collection={state.collection}
Expand Down Expand Up @@ -617,7 +621,6 @@ function TableVirtualizer(props) {
{state.visibleViews[0]}
</div>
<ScrollView
role="presentation"
className={
classNames(
styles,
Expand All @@ -635,6 +638,11 @@ function TableVirtualizer(props) {
)
)
}
// Firefox and Chrome make generic elements using CSS overflow 'scroll' or 'auto' tabbable,
// including them within the accessibility tree, which breaks the table structure in Firefox.
// Using tabIndex={-1} prevents the ScrollView from being tabbable, and using role="rowgroup"
// here and role="presentation" on the table body content fixes the table structure.
role="rowgroup"
tabIndex={isVirtualDragging ? null : -1}
style={{
flex: 1,
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/table/test/Table.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4190,7 +4190,7 @@ export let tableTests = () => {
);

let body = tree.getAllByRole('rowgroup')[1];
let scrollView = body.parentNode.parentNode;
let scrollView = body;

let rows = within(body).getAllByRole('row');
expect(rows).toHaveLength(34); // each row is 41px tall. table is 1000px tall. 25 rows fit. + 1/3 overscan
Expand Down