[euiScreenReaderOnly] Style causing problem with drag and drop

[JasonStoltz]

Describe the bug
An issue (elastic/kibana#213708) was reported in Kibana where a particular rule in the euiScreenReaderOnly styles is causing a weird bug in the UI when placed inside an element with the draggable attribute.

Following a discussion in the #eui channel, it'd be worthwhile to consider updating euiScreenReaderOnly considering some styles are there because of browser inconsistencies that may no longer be true.

The offending part is inset-inline-start: -10000px.

The left: -10000px value was introduced here, in 2021:

• https://github.com/elastic/eui/pull/5215/files#r716861157

These issues are related:

• [euiScreenReaderOnly] Use clip to fix scrolling issues caused by absolute positioning #5130
• [EuiScreenReaderOnly] Add clip property to fix scrolling bug #5152

Then in 2022, left was replaced with its logical counterpart inset-inline-start, here:

• https://github.com/elastic/eui/pull/6125/files#diff-afbb073e705cab038fe490aac1d3f2b87d25e684156a1d06d03d14bbd8a3c9c3

I would consider adjusting these styles while:

• ensuring that the bug in [DragAndDrop] Dragging doesn't show anymore the dragged element kibana#213708 is fixed
• ensuring we don't re-introduce old bugs from the issues mentioned above (e.g. [EuiScreenReaderOnly] Revert left positioning change #5215)

Impact and severity
The problem was fixed in Kibana with a workaround, this is not urgent

Environment and versions

• EUI version:
• React version:
• Kibana version (if applicable):
• Browser:
• Operating System:

Minimum reproducible sandbox

To Reproduce

It's easily reproducible, following the instructions in the post, elastic/kibana#213708 (comment) and elastic/kibana#213708 (comment).

Expected behavior

Screenshots

Additional context

[JasonStoltz]

Pointing this as 3 points because there's quite a bit of testing involved as well as unknowns. We'll mark this as a high priority to address. We should circle back with the Kibana team to verify this fix and let them know they can remove their workaround when it's completed.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.