We had some discussion on the resizable container scroll interactions as part of #2701 (comment), specifically around the following two issues. It was decided this is a more global issue than one component and we should think holistically at the problem.

• Should EUI give guidance and adhere to applying tabindex=0 for any elements with an applied overflow: auto property.
• How should EUI consistently apply styling for such a cases? How can we make this not weird specifically in auto situations where the element may or may not be scrollable.

Currently the browsers treat scrollable containers differently and there is some suggestive guidance from AXE to correct it. https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable?application=AxeChrome

Likely if applied, even in EUI components, there would still need to exist guidance of some sort, since EUI would not be able to control all general downstream usages, where tabindex would need to be applied manually. Potentially we could mitigate this by introducing a small component called EuiScrollableContainer that could act as a simple utility component to apply tabindex and the proper styling selectors necessary to attack this consistently.