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: -10000px offscreen. We now position items at just left: 0 and set a margin of -1px to accomplish the same rendering. This means that if you can set position: relative CSS 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.
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.