Skip to content

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

Merged
thompsongl merged 4 commits intoelastic:masterfrom
thompsongl:4957-datagrid
Aug 25, 2021
Merged

[EuiDataGrid] Remove screen reader text from cell popovers#5087
thompsongl merged 4 commits intoelastic:masterfrom
thompsongl:4957-datagrid

Conversation

@thompsongl
Copy link
Copy Markdown
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
Copy Markdown

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

@thompsongl thompsongl requested review from cchaos and snide August 25, 2021 18:32
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown

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

@cee-chen
Copy link
Copy Markdown
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