Closes #67959

What?

Fixes an issue where focused elements in scrollable lists with sticky headers or footers can remain hidden behind those elements when navigating using a keyboard or keyboard-like devices.

Why?

Sticky headers and footers are commonly used in the UI to keep certain elements fixed while scrolling.

How?

Block Manager Issue

The issue is resolved by dynamically adjusting the scroll position of the container based on the position of sticky elements and the currently focused element. Here's how it was implemented:

1. Identify Key Elements:

   • A scrollable container is selected using document.querySelector to target the relevant modal or scrollable content.
   • Sticky elements within the scrollable container are identified using querySelectorAll.

2. Focus Handling:

   • An event listener is added to the container to monitor focusin events, which are triggered whenever an element inside the container gains focus.
   • A utility function, getActiveStickyElement, determines the currently active sticky element based on its position relative to the scrollable container.

3. Scroll Adjustment Logic:

   • When an element inside the container gains focus, its position is compared to the bottom of the sticky element.
   • If the focused element is hidden behind the sticky header/footer, the scroll position of the container is adjusted using scrollTo with the smooth behavior for a better user experience.

4. Event Listener Cleanup:

   • The event listener is removed during the cleanup phase of the useEffect hook to avoid memory leaks or unintended behavior when the component unmounts.

Testing Instructions

Testing Instructions for Keyboard

Preferences Modal Dialog:

Open the Preferences Modal Dialog > Blocks.
Ensure the list of blocks is long enough to make the panel scrollable.
Use the Tab key to navigate and then Shift+Tab to navigate backwards.
Confirm that focused elements remain visible during navigation.
Test across different browsers (e.g., Chrome, Safari, Firefox) to ensure consistent behavior.

Screenshots or screencast