[euiScreenReaderOnly] Style causing problem with drag and drop

[JasonStoltz]

Describe the bug An issue (https://github.com/elastic/kibana/issues/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:

• https://github.com/elastic/eui/pull/5130
• https://github.com/elastic/eui/pull/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 https://github.com/elastic/kibana/issues/213708 is fixed
• ensuring we don't re-introduce old bugs from the issues mentioned above (e.g. https://github.com/elastic/eui/pull/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, https://github.com/elastic/kibana/issues/213708#issuecomment-2712076212 and https://github.com/elastic/kibana/issues/213708#issuecomment-2717698770.

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[bot]]

👋 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.