1076 task list add scrollbar and fade to parent tasks and fix progress badge by vraja-pro · Pull Request #23008 · Yoast/wordpress-seo

vraja-pro · 2026-02-20T07:54:33Z

Context

Summary

This PR can be summarized in the following changelog entry:

Adds a scrollbar to the task modal when a child tasks overflows.
Fixes an unreleased bug where progress badge was disabled in the task row and produced a console error.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Go to Yoast SEO -> General -> Task List and open a task with at least 4 child tasks ( add posts with keyphrase to have child tasks)
Check check you have a scroll bar and there is a fade effect in the bottom of the modal content area.
Check scrollbar on mobile screen.
On desktop go to the task list and check there are no console errors.
Hover over the task progress badge in a row and check you get the pointer cursor and clicking on it will open the task.
In the modal check the progress badge is not clickable on a parent task modal.
Click on the child task and check the badge is clickable on the child task modal.

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.
I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/1076

coveralls · 2026-02-20T08:11:51Z

Pull Request Test Coverage Report for Build 096ea5ca1d0dd515124a3d431dea93a8a2190b4a

Details

8 of 8 (100.0%) changed or added relevant lines in 1 file are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+0.01%) to 53.849%

Totals
Change from base Build 699f00eccd04c69d4c66a6bfbcb12011766b1971:	0.01%
Covered Lines:	34196
Relevant Lines:	63623

💛 - Coveralls

Copilot

Pull request overview

This PR updates the task list UI to improve the task modal’s usability when content overflows, and adjusts the TasksProgressBadge markup to avoid nested-button console errors while keeping the badge clickable where needed.

Changes:

Make TasksProgressBadge render as a non-button element by default, with an as prop for rendering as a <button> when needed.
Update the task modal content container to allow vertical scrolling and add a bottom fade overlay.
Update/extend unit tests and snapshots to reflect the new rendered markup.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/dashboard-frontend/src/task-list/components/tasks-progress-badge.js	Switch default root element to `span` and add `as` prop support for rendering as `button`.
packages/dashboard-frontend/src/task-list/components/task-modal.js	Enable scrollable modal content area and add a sticky gradient fade; render the “parent task” badge as a button.
packages/dashboard-frontend/tests/task-list/tasks-progress-badge.test.js	Add tests around the new `as` behavior and click handling.
packages/dashboard-frontend/tests/task-list/snapshots/tasks-progress-badge.test.js.snap	Snapshot updates for default `span` rendering and new “button” snapshot.
packages/dashboard-frontend/tests/task-list/snapshots/task-row.test.js.snap	Snapshot updates reflecting progress badge no longer rendering as a button in rows.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T08:28:31Z

 	}, [ onClick, parentTaskId ] );

-	return <button onClick={ handleClick } disabled={ ! parentTaskId } className={ classNames( "yst-max-w-80 sm:yst-max-w-full yst-min-w-0 yst-truncate", className ) }>
+	return <Component onClick={ handleClick } className={ classNames( "yst-max-w-80 sm:yst-max-w-full yst-min-w-0 yst-truncate", className ) }>


The root element always gets onClick={ handleClick }, and handleClick always calls event.preventDefault() even when onClick/parentTaskId aren’t provided (so the badge is effectively non-actionable). This creates an unnecessary click handler on the default <span> and marks events as defaultPrevented for no reason. Consider only attaching the click handler (and calling preventDefault) when parentTaskId && onClick is truthy.

I decided to remove the onClick if it's not a button and disable the button if either onClick, parentId or is loading.
I also removed the prevent default because this is not is a form.

Copilot · 2026-02-20T08:28:31Z

+	return <Component onClick={ handleClick } className={ classNames( "yst-max-w-80 sm:yst-max-w-full yst-min-w-0 yst-truncate", className ) }>
 		<Badge size="large" className="yst-bg-white yst-border yst-border-slate-200 yst-ps-1.5 yst-pe-2 yst-shadow-sm yst-h-6 yst-w-full">


When rendering the badge as a <button> (via as="button"), the component doesn’t set type="button", so it may submit a surrounding form by default. Also consider setting disabled/aria-disabled when onClick or parentTaskId is missing to avoid focusable UI that does nothing.

I added a type prop.

Copilot · 2026-02-20T08:28:31Z

+		const { container } = render(
+			<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ onClick } parentTaskId="task-1" />
+		);
+		fireEvent.click( container.firstChild );
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+		expect( onClick ).toHaveBeenCalledWith( "task-1" );
+	} );
+
+	it( "does not call onClick when parentTaskId is missing", () => {
+		const onClick = jest.fn();
+		const { container } = render(
+			<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ onClick } />
+		);
+		fireEvent.click( container.firstChild );
+		expect( onClick ).not.toHaveBeenCalled();
+	} );
+
+	it( "does not call onClick when onClick is missing", () => {
+		const { container } = render(
+			<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } parentTaskId="task-1" />
+		);
+		// Should not throw when clicked without an onClick handler.
+		expect( () => fireEvent.click( container.firstChild ) ).not.toThrow();
+	} );
+
+	it( "calls event.preventDefault on click", () => {
+		const { container } = render(
+			<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ jest.fn() } parentTaskId="task-1" />
+		);
+		const event = new MouseEvent( "click", { bubbles: true, cancelable: true } );
+		jest.spyOn( event, "preventDefault" );
+		fireEvent( container.firstChild, event );


The click-behavior test renders TasksProgressBadge with onClick/parentTaskId but doesn’t set as="button", so it’s validating click behavior on a non-interactive default element. If the intent is “clickable badge should be a button for accessibility”, update this test to render with as="button" and preferably query/click via getByRole("button").

Suggested change

const { container } = render(

<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ onClick } parentTaskId="task-1" />

);

fireEvent.click( container.firstChild );

expect( onClick ).toHaveBeenCalledTimes( 1 );

expect( onClick ).toHaveBeenCalledWith( "task-1" );

} );

it( "does not call onClick when parentTaskId is missing", () => {

const onClick = jest.fn();

const { container } = render(

<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ onClick } />

);

fireEvent.click( container.firstChild );

expect( onClick ).not.toHaveBeenCalled();

} );

it( "does not call onClick when onClick is missing", () => {

const { container } = render(

<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } parentTaskId="task-1" />

);

// Should not throw when clicked without an onClick handler.

expect( () => fireEvent.click( container.firstChild ) ).not.toThrow();

} );

it( "calls event.preventDefault on click", () => {

const { container } = render(

<TasksProgressBadge completedTasks={ 2 } totalTasks={ 5 } onClick={ jest.fn() } parentTaskId="task-1" />

);

const event = new MouseEvent( "click", { bubbles: true, cancelable: true } );

jest.spyOn( event, "preventDefault" );

fireEvent( container.firstChild, event );

render(

<TasksProgressBadge

completedTasks={ 2 }

totalTasks={ 5 }

as="button"

onClick={ onClick }

parentTaskId="task-1"

/>

);

fireEvent.click( screen.getByRole( "button" ) );

expect( onClick ).toHaveBeenCalledTimes( 1 );

expect( onClick ).toHaveBeenCalledWith( "task-1" );

} );

it( "does not call onClick when parentTaskId is missing", () => {

const onClick = jest.fn();

render(

<TasksProgressBadge

completedTasks={ 2 }

totalTasks={ 5 }

as="button"

onClick={ onClick }

/>

);

fireEvent.click( screen.getByRole( "button" ) );

expect( onClick ).not.toHaveBeenCalled();

} );

it( "does not call onClick when onClick is missing", () => {

render(

<TasksProgressBadge

completedTasks={ 2 }

totalTasks={ 5 }

as="button"

parentTaskId="task-1"

/>

);

// Should not throw when clicked without an onClick handler.

expect( () => fireEvent.click( screen.getByRole( "button" ) ) ).not.toThrow();

} );

it( "calls event.preventDefault on click", () => {

render(

<TasksProgressBadge

completedTasks={ 2 }

totalTasks={ 5 }

as="button"

onClick={ jest.fn() }

parentTaskId="task-1"

/>

);

const event = new MouseEvent( "click", { bubbles: true, cancelable: true } );

jest.spyOn( event, "preventDefault" );

fireEvent( screen.getByRole( "button" ), event );

I removed the onclick if it's not a button.

JorPV · 2026-02-20T11:00:52Z

CR ✅ + AT ✅

vraja-pro added 4 commits February 19, 2026 16:15

fix badge not clickable on a row

b7b51ad

fix modal scroll

a2a6e7e

fix progress badge button

39b46c7

fix snapshot tests and adds test to progress badge

4b32229

vraja-pro added this to the feature/task-list-phase-2 milestone Feb 20, 2026

vraja-pro added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Feb 20, 2026

JorPV requested a review from Copilot February 20, 2026 08:24

Copilot started reviewing on behalf of JorPV February 20, 2026 08:25 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

vraja-pro added 2 commits February 20, 2026 11:58

fix progress badge button docs and onclick

c1e2b33

added type button so it won't submit nearby form

42d5a13

JorPV merged commit 8c08e42 into feature/task-list-phase-2 Feb 20, 2026
19 checks passed

JorPV deleted the 1076-task-list-add-scrollbar-and-fade-to-parent-tasks branch February 20, 2026 11:02

leonidasmi mentioned this pull request Feb 20, 2026

Task List Phase 2 #22972

Merged

19 tasks

vraja-pro changed the title ~~1076 task list add scrollbar and fade to parent tasks~~ 1076 task list add scrollbar and fade to parent tasks and fix progress badge Feb 20, 2026

leonidasmi modified the milestones: feature/task-list-phase-2, 27.2 Mar 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1076 task list add scrollbar and fade to parent tasks and fix progress badge#23008

1076 task list add scrollbar and fade to parent tasks and fix progress badge#23008
JorPV merged 6 commits intofeature/task-list-phase-2from
1076-task-list-add-scrollbar-and-fade-to-parent-tasks

vraja-pro commented Feb 20, 2026 •

edited

Loading

Uh oh!

coveralls commented Feb 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

vraja-pro Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

vraja-pro Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

vraja-pro Feb 20, 2026

Uh oh!

JorPV commented Feb 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		return <Component onClick={ handleClick } className={ classNames( "yst-max-w-80 sm:yst-max-w-full yst-min-w-0 yst-truncate", className ) }>
		<Badge size="large" className="yst-bg-white yst-border yst-border-slate-200 yst-ps-1.5 yst-pe-2 yst-shadow-sm yst-h-6 yst-w-full">

Conversation

vraja-pro commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

Other environments

Documentation

Quality assurance

Innovation

Uh oh!

coveralls commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 096ea5ca1d0dd515124a3d431dea93a8a2190b4a

Details

💛 - Coveralls

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

vraja-pro Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

vraja-pro Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

vraja-pro Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

JorPV commented Feb 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vraja-pro commented Feb 20, 2026 •

edited

Loading

coveralls commented Feb 20, 2026 •

edited

Loading