Fix: FSE editor sidebar item scroll accessibility issue #68165

Kallyan01 · 2024-12-20T06:39:47Z

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 :

Reorganizing DOM Structure:
- Moved the Title and Description elements to the top of the scrollable container and made them fixed.
Adjusting Scrollable Area:
- Restricted the scrollable area to the list section only, leaving the fixed elements unaffected by scrolling.
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

- Restructured the dom elements and removed sticky - Moved description to title component and made it fixed

github-actions · 2024-12-20T06:40:31Z

👋 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 · 2025-01-17T18:45:24Z

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 <kallyansin@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

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 · 2025-01-21T06:53:15Z

@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 · 2025-01-21T07:33:09Z

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 · 2025-01-21T08:26:13Z

@t-hamano Thanks ! did the required changes .

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

t-hamano

Hi @Kallyan01,

I removed unnecessary props and styles from the SidebarNavigationScreen component in #68972. Can you resolve the conflicts in this PR?

In addition, you may want to revert the following changes that are not related to this PR:

packages/block-library/src/image/block.json
packages/block-library/src/post-content/block.json

t-hamano · 2025-01-31T04:07:40Z

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

 	background: $gray-900;
 	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
-	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
+	z-index: z-index(".edit-site-sidebar-navigation-screen__sticky-title-section");
+	min-height: 183px !important;


How was this value derived?

@t-hamano sorry for the late reply ! Was busy with some other work !
I have derived the min-height value from main design menu area ! The reason behind using it is to make it the UI consistant throughout and avoid spacing related issues once we have scroll element (sometimes it reduces the spacings automatically )

Below image is the ref from where i have chose 183 value !

Does this work when the header title and description get long? For example, the Navigation screen may have a long navigation name.

t-hamano · 2025-02-18T03:38:53Z

From my quick testing, if we only want menu items to be scrollable, we should be able to solve this with CSS alone, without changing the DOM structure.

Below is one approach, although it's not complete. Here's a diff from the trunk branch:

diff

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
index fd50d757f2..b3160b4c85 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
@@ -1,7 +1,11 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
+       overflow-y: auto;
        margin-bottom: $grid-unit-30;
-       margin-left: -$grid-unit-20;
-       margin-right: -$grid-unit-20;
+       margin-left: ($grid-unit-30 + $grid-unit-05) * -1;
+       margin-right: ($grid-unit-30 + $grid-unit-05) * -1;
+       @include custom-scrollbars-on-hover(transparent, $gray-700);
+       scrollbar-gutter: stable;
+       padding: var(--wp-admin-border-width-focus) $grid-unit-20 0;
 
        &:last-of-type {
                border-bottom: 0;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index c4ee3f2659..76a9b16e8b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -10,6 +10,7 @@
        // This allows the footer section to be sticky at the bottom of the viewport.
        flex-grow: 1;
        margin-bottom: $grid-unit-20;
+       height: 100%;
        &.has-footer {
                margin-bottom: 0;
        }
@@ -17,6 +18,9 @@
 
 .edit-site-sidebar-navigation-screen__content {
        padding: 0 $grid-unit-20;
+       display: flex;
+       flex-flow: column;
+       flex: 1;
 
        .components-text {
                color: $gray-400;
@@ -37,6 +41,16 @@
        z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus__content {
+       overflow-y: auto;
+       overflow-x: hidden;
+       @include custom-scrollbars-on-hover(transparent, $gray-700);
+       scrollbar-gutter: stable;
+       margin-left: ($grid-unit-30 + $grid-unit-05) * -1;
+       margin-right: ($grid-unit-30 + $grid-unit-05) * -1;
+       padding: 0 $grid-unit-20;
+}
+
 .edit-site-sidebar-navigation-screen__title {
        flex-grow: 1;
        overflow-wrap: break-word;
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index d2f3e450cc..317256a75e 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -32,9 +32,6 @@
 }
 
 .edit-site-sidebar__screen-wrapper {
-       overflow-x: auto;
-       @include custom-scrollbars-on-hover(transparent, $gray-700);
-       scrollbar-gutter: stable;
        display: flex;
        flex-direction: column;
        height: 100%;

The focused element should always be visually positioned in the correct position, whether it's a pattern screen or a navigation screen.

ea29c19a05811f325fecc7f4012a2b7f.mp4

@afercia @ciampo Any other good ideas?

afercia · 2025-02-18T08:03:14Z

@t-hamano thanks for your exploration.
On one hand, it would be nice to let browsers do their job and use a CSS based approach. However, it's worth reminding that Webkit browsers and Firefox behave differently, where Webkit tends to place the focused element in the middle of the scrollable while Firefox doesn't. As such, any CSS solution should be tested at least in Firefox as well.

On the other hand, it would be best to have a more generic solution that can be used on other scrollables as well, not just this specific case.

ciampo · 2025-02-18T10:37:45Z

I don't have much time to test the proposed code changes on my machine, but in principle I agree that a CSS solution should be viable, and should also be our preferred option — either by using scrolll-padding, or by tweaking layouts and scrolling containers.

it would be best to have a more generic solution that can be used on other scrollables as well, not just this specific case.

In principle, absolutely. In practice, as also discussed in #67959, IMO it would be difficult to craft a generic enough solution that performs well in all scenarios. Preventing the issue at the source (by avoiding certain layouts) or applying scroll-padding as needed seem, to me, better trade-offs. (Of course, I'd be very happy to be proven wrong!)

afercia · 2025-02-19T15:13:08Z

Preventing the issue at the source (by avoiding certain layouts) ...

Absolutely. That would mean avoiding any sticky / fixed headers or footers within scrollable elements. I would love design to avoid those layouts but I'm not sure they would agree.

t-hamano · 2025-03-19T09:59:08Z

Sorry for the late reply.

it would be difficult to craft a generic enough solution that performs well in all scenarios. Preventing the issue at the source (by avoiding certain layouts) or applying scroll-padding as needed seem, to me, better trade-offs.

I agree with this opinion.

In Gutenberg trunk, the sidebar implementation should be fairly consistent on both desktop and mobile (See #69413 for more details).

Based on the approach mentioned in this comment, we should be able to fix the issue with some simpler CSS.

Kallyan01 added 2 commits December 20, 2024 02:21

Fix: FSE editor sidebar item scroll accessibility issue

68027f3

- Restructured the dom elements and removed sticky - Moved description to title component and made it fixed

Fix: Height issue on sticky title section

0ba2623

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Dec 20, 2024

Kallyan01 marked this pull request as ready for review January 17, 2025 18:45

Kallyan01 requested review from ellatrix, artemiomorales, ajitbohra and fabiankaegy as code owners January 17, 2025 18:45

fabiankaegy requested review from Mamaduka, t-hamano and carolinan January 20, 2025 20:55

fabiankaegy added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels Jan 20, 2025

t-hamano reviewed Jan 21, 2025

View reviewed changes

Kallyan01 added 2 commits January 21, 2025 13:36

fix: padding issue in fse editor list

0037a2b

fix: safari siteeditor scrollbar style fix

2246cc2

Kallyan01 force-pushed the fix/fse-gutenberg-scrollable-ui-a11y-fix branch from 4443530 to 2246cc2 Compare January 21, 2025 08:19

Kallyan01 requested a review from t-hamano January 21, 2025 08:26

afercia mentioned this pull request Jan 23, 2025

Try scroll-padding for any scrollable UI #67959

Open

6 tasks

t-hamano mentioned this pull request Jan 31, 2025

Quality: Remove unused props and styles from SidebarNavigationScreen #68972

Merged

t-hamano reviewed Jan 31, 2025

View reviewed changes

t-hamano mentioned this pull request Feb 26, 2025

Site Editor Sidebar: Header moves when scrolling through lists in mobile layout #69328

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: FSE editor sidebar item scroll accessibility issue #68165

Fix: FSE editor sidebar item scroll accessibility issue #68165

Kallyan01 commented Dec 20, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 20, 2024

Uh oh!

github-actions bot commented Jan 17, 2025 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

Kallyan01 commented Jan 21, 2025

Uh oh!

t-hamano commented Jan 21, 2025

Uh oh!

Kallyan01 commented Jan 21, 2025

Uh oh!

t-hamano left a comment

Uh oh!

t-hamano Jan 31, 2025

Uh oh!

Kallyan01 Feb 17, 2025 •

edited

Loading

Uh oh!

t-hamano Feb 18, 2025

Uh oh!

t-hamano commented Feb 18, 2025

Uh oh!

afercia commented Feb 18, 2025

Uh oh!

ciampo commented Feb 18, 2025

Uh oh!

afercia commented Feb 19, 2025

Uh oh!

t-hamano commented Mar 19, 2025

Uh oh!

Uh oh!

Fix: FSE editor sidebar item scroll accessibility issue #68165

Are you sure you want to change the base?

Fix: FSE editor sidebar item scroll accessibility issue #68165

Conversation

Kallyan01 commented Dec 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Site Editor Issue

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Dec 20, 2024

Uh oh!

github-actions bot commented Jan 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Kallyan01 commented Jan 21, 2025

Uh oh!

t-hamano commented Jan 21, 2025

Uh oh!

Kallyan01 commented Jan 21, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Jan 31, 2025

Choose a reason for hiding this comment

Uh oh!

Kallyan01 Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Feb 18, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Feb 18, 2025

Uh oh!

afercia commented Feb 18, 2025

Uh oh!

ciampo commented Feb 18, 2025

Uh oh!

afercia commented Feb 19, 2025

Uh oh!

t-hamano commented Mar 19, 2025

Uh oh!

Uh oh!

Kallyan01 commented Dec 20, 2024 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

Kallyan01 Feb 17, 2025 •

edited

Loading