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

[EuiDataGrid] Remove screen reader text from cell popovers #5087

Merged
merged 4 commits into from
Aug 25, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Aug 25, 2021

Summary

Fixes #4957 by rearranging elements in a way that excludes screen reader text from the scope of what is provided to the popover render function.

The Node.innerText method used by the standard json popover (as well as the custom array popover noted in the issue) does not ignore "hidden" content such as that inside EuiScreenReaderOnly. This PR removes the screen reader text from consideration while not requiring apps with custom render functions to update their methods.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

  • Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for the any docs examples

  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5087/

@thompsongl thompsongl requested review from snide and cchaos August 25, 2021 18:32
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

This LGTM, I can confirm the text no longer shows up visibly on JSON schema and but that screen readers still read out the row/column numbers. Love the elegant solution!

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

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

Works as advertised. Only negative I can think of is that this adds one more bit of dom to the datagrid soup, which might possibly effect performance when replicated over X number of cells.

@thompsongl
Copy link
Contributor Author

might possibly effect performance when replicated over X number of cells

That's a good point. After stepping away for minute, I think this could work with a Fragment, which would negate the added DOM. I'll try it.

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Yep, I can too attest that the formatting of the popover contents is now back and the screen-reader text is hidden. 🙇

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5087/

@cee-chen
Copy link
Contributor

QA still looks great with the Fragment. Really nice catch @snide @thompsongl! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiDataGrid] regression in displaying Arrays and Objects in expand behavior
5 participants