Fix: FSE editor sidebar item scroll accessibility issue

[Kallyan01]

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 editor UI to keep certain elements fixed while scrolling. However, this pattern causes accessibility issues where focused elements are obscured. This is particularly problematic when navigating with a keyboard, as it prevents users from seeing the currently focused item.

How?

Site Editor Issue

We resolved the issue by restructuring the DOM elements within the Site Editor to address the accessibility concerns instead of using any dynamic approach like block manager one :

1. Reorganizing DOM Structure:

   • Moved the Title and Description elements to the top of the scrollable container and made them fixed.

2. Adjusting Scrollable Area:

   • Restricted the scrollable area to the list section only, leaving the fixed elements unaffected by scrolling.

3. Default Accessibility Improvement:

   • By limiting the scrollable area to the list, this approach inherently solves the accessibility issue where focused elements were previously hidden behind sticky headers or footers.

Testing Instructions for Keyboard

Site Editor Navigation Panel:

Go to the Site Editor > Patterns.
Ensure the navigation panel has enough patterns to make it scrollable.
Use the Tab key to navigate the patterns in the list.
Scroll down and then use Shift+Tab to navigate backwards.
Confirm that focused elements are no longer hidden behind the sticky header.

Screenshots or screencast

Screen.Recording.2025-01-17.at.10.22.24.PM.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Kallyan01! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Kallyan01 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

I believe the Site Editor issue and the Block Manager issue are completely unrelated in terms of code.

In general, it's recommended to address one issue or feature per PR. Otherwise, it can be hard to predict which code affects which issue/feature.

Can this PR be focused on just one of the issues?

[Kallyan01]

@t-hamano Thanks for the feedback !
i'll remove the block manager issue changes from this PR then .
Need one advice should i create a seperate issue by myself for the Block Manager or tag the same issue in seperate PR (as the issue contains both Site Editor and Block Manager issue description )

[t-hamano]

Need one advice should i create a seperate issue by myself for the Block Manager or tag the same issue in seperate PR (as the #67959 contains both Site Editor and Block Manager issue description )

I think it's fine to just link the same issue instead of creating a new one.

[Kallyan01]

@t-hamano Thanks ! did the required changes .

Could you also review this one Block Manager PR #68800 ?