[EuiPopover] Allow content to be accessible during opening animation#5249
[EuiPopover] Allow content to be accessible during opening animation#5249thompsongl merged 8 commits intoelastic:masterfrom
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5249/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5249/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5249/ |
1Copenut
left a comment
1Copenut
left a comment
There was a problem hiding this comment.
👍 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.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5249/ |
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
👍 LGTM. I checked most of our popover usage in Safari. Don't forget to revert the change to the progress chart. 😉
This reverts commit bf3a363.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5249/ |
…lastic#5249) * remove visibiliy:hidden; rely on opacity * revert me * more visibility removal * CL * Revert "revert me" This reverts commit bf3a363.
5 participants
Summary
Resolves #5247 by removing
visibility: hiddenfrom EuiPopover open animation and instead relying onopacity: 0.This allows the contents of EuiPopover to be accessible to the
node.innerTextmethod 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
visiblecontent inside ahiddenparent (#5247 (comment))?See the EuiProgress "Progress for charts" docs section for resolution. Each label should have a
titleattr that matches the content.Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobile- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Added or updated jest tests