[EuiScreenReaderOnly] Safari + VO renders absolutely positioned outline #5168
Labels
Comments
cee-chen
added a commit
to cee-chen/eui
that referenced
this issue
Sep 10, 2021
cee-chen
pushed a commit
that referenced
this issue
Sep 15, 2021
* Update .euiScreenReaderOnly to use clip - this prevents issues with absolute positioning and scrolling containers, and works on all modern browsers supported by EUI * [PR feedback] Add comment with more context * Fix screenReaderOnly CSS to only apply to check/radio inputs with labels * Clean up noLabel input CSS that was overriding previous screen reader CSS * Add changelog entry * [PR feedback] Docs & Comments & Updates styles for EuiScreenReaderOnly cee-chen#2 * [Docs] Updated Accessiblity Utility pages with more nuances about EuiScreenReaderOnly * Remove `euiScreenReaderOnly` mixin from checkbox and radio styles in favor of always having the input * Commented Sass * [EuiLink] Position relative if `target=_blank` for positioning screen reader text * Remove button/position relative documentation/example in favor of #5168 @see cee-chen#2 (comment) * Add 2nd changelog entry Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
|
This isn't something we'll address on EUI's side of things as it's a browser issue, but we can use this issue as reference in case another consumer or Kibana user complains about this. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a known browser issue that applies to only Safari+VO. It does not occur in Safari without VO enabled (e.g. while keyboard tabbing) and it does not occur in either Chrome, Firefox, or Edge.
Problem
Our EuiScreenReaderOnly CSS absolutely positions the visually hidden (but still detectable to screen readers) text in order for it to not affect rendering flow on other nearby elements.
Workaround
Prior to #5152, we positioned elements
left: -10000pxoffscreen. We now position items at justleft: 0and set a margin of-1pxto accomplish the same rendering. This means that if you can setposition: relativeCSS on any parent wrapper around your screen reader only text, and it will no longer render an outline in Safari away from its focused parent.CodeSandbox demo
Here is a CodeSandbox demo you can use to test in Safari+VO.
Screen reader usage notes
We made the positioning change in #5152 to make it easier for EUI users to add a workaround for those that want even better Safari+VO support, but if for some reason it's difficult for you to do so, it's worth keeping in mind that desktop Safari+VO usage is ~5% as of 2021, and that the actual screen reader text still works perfectly, and this is a visual bug only on a tool aimed at non (or limited) visual users.
The text was updated successfully, but these errors were encountered: