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

Popovers, Menus, Selects, Comboxes, and Tooltips should not add things to the DOM if they aren't visible #36

Open
ynotdraw opened this issue Nov 2, 2020 · 0 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@ynotdraw
Copy link
Contributor

ynotdraw commented Nov 2, 2020

Summary

Popovers, Menus, Selects, Comboxes, and Tooltips currently always render a portal + display: 'none' elements in the DOM. Here's an example in a LifeOmic app with a TableModule and tooltips for multiple actions.

Screen Shot 2020-11-02 at 4 52 26 PM

As you can see from the image, some of this is the due to the way Reakit works with portals. Maybe we shouldn't portal as much or should cut back on what we do portal?

Options

  • Question: Do we need portals on all of these components?
  • Upgrade to latest version of Reakit and see if there are any improvements in this area. Maybe we are doing something wrong / not recommended as well? May be good to start a GitHub issue or a Spectrum chat about this.
  • Find another a11y solution for these types of elements that don't clutter the DOM with invisible elements and only renders them when they are displayed. The benefit of using Reakit is due to the a11y bits it provides
  • Open to other options as well, as long as we can retain the a11y (WAI-ARIA) standards
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant