Description

Some scrollable elements in the editor UI, typically used to show long lists of items, use sticky 'headers' or 'footers' that stay in a fixed position while scrolling.

When using the keyboard or any other device that emulates a keyboard to navigate the content, this pattern exposes a typical problem with any sticky / fixed element: currently focused elements may stay hidden behind the stick header / footer.

Here's a couple animated GIFs to illustrate the issue:

1. The patterns list in the Site editor navigation panel.
2. The list of Blocks in the Preferences modal dialog.

It's also worth reminding that browsers have a different behavior with scrollable elements, where Webkit based browsers typically tend to place the element that receives focus in the middle of a scrollable element while Firefox doesn't.

Modern CSS can solve this issue by the means of scroll-padding. However, to make it work, the height of the sticky element must be known.

I'm not sure attempting to fix this problem on a case by case basis would be solidi enough. It would be great to explore a way to solve this issue programmatically.

Typically in tgeh editor the scrolable elements contain the sticky element. Detecting the rendered height of the sticky element and using that value for the scroll-padding of the scrollable element may work. I do realize it's a DOM-level solution but it wouldn't be much af a problem if implemented as an utility or a hook that can be attached to a component.

Worth also considering exploring a solution in the context of other improvements for scrollable elements, see #45809

Step-by-step reproduction instructions

• Go to the Site editor > Patterns.
• Make sure you have many patterns and a viewport height that makes the navigation panel scrollable.
• Use the keyboard to navigate the patterns in the list.
• After the list scrolls down, use Shift+Tab to navigat ebackwards.
• Observe that when reaching the top of the visible part of the scrollable list, some of the focused pattern categoris may stay hidden behing the sticky header.
• Repeat the test in the Preferences modal dialog > Blocks or any other scrollable element with a sticky / fixed header or footer.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure