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

[EuiPopover] Allow content to be accessible during opening animation #5249

Merged
merged 8 commits into from
Oct 12, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Oct 6, 2021

Summary

Resolves #5247 by removing visibility: hidden from EuiPopover open animation and instead relying on opacity: 0.
This allows the contents of EuiPopover to be accessible to the node.innerText method as well as screen readers.

Main question(s) to answer: Is it important to hide the content from screen readers during the animation, or are we doing such users a disservice by delaying access to the content? If the former, how do screen readers handle visible content inside a hidden parent (#5247 (comment))?

See the EuiProgress "Progress for charts" docs section for resolution. Each label should have a title attr that matches the content.

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 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
  • Revert bf3a363

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@thompsongl thompsongl requested a review from 1Copenut October 11, 2021 16:11
@thompsongl thompsongl marked this pull request as ready for review October 11, 2021 16:11
@kibanamachine
Copy link

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

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.

I'll give @1Copenut a chance to review/test before approving, but code and staging both LGTM!

@cchaos cchaos self-requested a review October 11, 2021 17:36
Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

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

👍 LGTM! I tested this out with VoiceOver on MacOS and iOS, and NVDA (full version on trial) in Firefox and Chrome. The adjustment to remove visibility doesn't disrupt the screen reader experience and no axe browser plugin issues were detected.

@kibanamachine
Copy link

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

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.

👍 LGTM. I checked most of our popover usage in Safari. Don't forget to revert the change to the progress chart. 😉

@thompsongl thompsongl enabled auto-merge (squash) October 12, 2021 17:59
@kibanamachine
Copy link

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

@thompsongl thompsongl merged commit d3f0abf into elastic:master Oct 12, 2021
ym pushed a commit to ym/eui that referenced this pull request Oct 29, 2021
…lastic#5249)

* remove visibiliy:hidden; rely on opacity

* revert me

* more visibility removal

* CL

* Revert "revert me"

This reverts commit bf3a363.
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.

[EuiInnerText] Returns empty string inside EuiPopover
5 participants