[euiScreenReaderOnly] Use clip to fix scrolling issues caused by absolute positioning (#5130)

* Update .euiScreenReaderOnly to use clip

- this prevents issues with absolute positioning and scrolling containers, and works on all modern browsers supported by EUI

* Add changelog entry

* [PR feedback] Add comment with more context

Author: Constance

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.6.0`.
+**Bug fixes**
+
+- Fixed `EuiScreenReaderOnly` positioning issues within scrolling containers ([#5130](https://github.com/elastic/eui/pull/5130))
 
 ## [`37.6.0`](https://github.com/elastic/eui/tree/v37.6.0)
 

src/global_styling/mixins/_helpers.scss

@@ -106,10 +106,15 @@
 }
 
 // Hiding elements offscreen to only be read by screen reader
+// NOTE: Hidden absolute positioning can cause issues with scrolling/overflow.
+// `clip` and `left` (for Chromium browsers) are needed to prevent these issues -
+// @see https://github.com/elastic/eui/pull/5130 for more info
 @mixin euiScreenReaderOnly {
   position: absolute;
   left: -10000px;
   top: auto;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   width: 1px;
   height: 1px;
   overflow: hidden;