Skip to content
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.

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

[DataGrid] Fix role=presentation a11y issue #13891

Merged
merged 5 commits into from
Jul 25, 2024

Conversation

romgrk
Copy link
Contributor

@romgrk romgrk commented Jul 18, 2024

Closes #12837

The tabIndex=-1 on this element is probably a leftover from a refactor as the element doesn't need to be keyboard-focusable.

@romgrk romgrk added accessibility a11y component: data grid This is the name of the generic UI component, not the React module! labels Jul 18, 2024
@romgrk romgrk requested a review from a team July 18, 2024 17:18
@mui-bot
Copy link

mui-bot commented Jul 18, 2024

Deploy preview: https://deploy-preview-13891--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 2559c3c

@romgrk romgrk removed the request for review from a team July 18, 2024 17:25
@romgrk romgrk marked this pull request as draft July 18, 2024 17:25
@@ -583,7 +583,6 @@ export const useGridVirtualScroller = () => {
}),
getScrollerProps: () => ({
ref: scrollerRef,
tabIndex: -1,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without the explicit tabIndex here, Firefox focuses on the virtual scroller element:

Chromium:

Screen.Recording.2024-07-18.at.21.59.30.mov

Firefox:

Screen.Recording.2024-07-18.at.21.59.46.mov

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the Scrollbar may also need tabIndex: -1 to be removed?

Screenshot from 2024-07-19 10-07-35

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added aria-hidden=true for the scrollbar, same as ag-grid does, it's probably the best aria tag for that case.

@cherniavskii For the Firefox issue, wouldn't that be a Firefox bug? Can you test on Safari to see what's the behavior? If Chrome & Safari agree and Firefox disagrees, we could add the tabindex only as a workaround for FF and file an issue with them.
Looks vaguely similar to this: https://bugzilla.mozilla.org/show_bug.cgi?id=1069739

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked Chrome, Safari, and Firefox, and the issue is only reproducible in Firefox.

we could add the tabindex only as a workaround for FF and file an issue with them

Yeah, that makes sense 👍🏻

Looks vaguely similar to this: bugzilla.mozilla.org/show_bug.cgi?id=1069739

😅

Copy link
Contributor Author

@romgrk romgrk Jul 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty common lifespan for a firefox bug, they've been around for longer and have way less resources :|

Also I can't reproduce the issue in Firefox on linux/wayland.

@romgrk romgrk marked this pull request as ready for review July 25, 2024 12:10
@romgrk romgrk requested a review from cherniavskii July 25, 2024 12:19
@romgrk romgrk merged commit dde1f0d into mui:master Jul 25, 2024
15 checks passed
@romgrk romgrk deleted the fix-a11y-role-presentation branch July 25, 2024 18:44
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] AXE test fails due to invalid child role "presentation"
4 participants