Skip to content

Add AI Optimize focus fallback #23021

Closed
JorPV wants to merge 8 commits intotrunkfrom
jordi-pv/ai-optimize-fix-tab-focus-for-notification-element
Closed

Add AI Optimize focus fallback #23021
JorPV wants to merge 8 commits intotrunkfrom
jordi-pv/ai-optimize-fix-tab-focus-for-notification-element

Conversation

@JorPV
Copy link
Copy Markdown
Contributor

@JorPV JorPV commented Feb 24, 2026

Context

  • When AI Optimize successfully fixes an assessment, the analysis re-run and the AI Optimize button is not rendered anymore, leaving keyboard users with no focus target. This PR adds a fallback mechanism to move focus to the parent section toggle instead.

Summary

This PR can be summarized in the following changelog entry:

  • Adds a fallback focus mechanism for the AI Optimze feature.

Relevant technical choices:

  • The handleAIOptimizeFocusFallback is a plain function (not a React component) that is called from componentDidUpdate in both ReadabilityAnalysis and SeoAnalysis. Timer cleanup happens in componentWillUnmount. This avoids the problem of using hooks in class components.
  • The function receives all dependencies as parameters (focusAIButtonId, locationContext, results, fallbackElementId, timerRef), and uses dispatch() directly instead of useDispatch().
  • The fallback is only triggered when focusAIButtonId or results props actually change (checked via previousProps comparison in componentDidUpdate), avoiding unnecessary calls on unrelated re-renders.
  • An 100ms setTimeout is used to give AIOptimizeButton's useLayoutEffect a chance to handle focus first, before the fallback kicks in.
  • The focusAIButtonId prop is connected via withSelect/getFocusAIFixesButtonId in both analysis components.
  • The buttonId prop was added to the collapsible in both analysis components to ensure the fallback element ID resolves to a focusable element.
  • When Premium is not active (no AI Optimize buttons rendered), focusAIButtonId is never set, so the fallback function exits immediately on its first guard check — effectively a no-op with negligible cost.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Scenario 1: With Premium active

  • Open a post in the block editor that has SEO or readability problems with AI Optimize buttons.
  • Click an AI button for an assessment that will be resolved after the AI fix .
  • After the AI fix completes and the assessment passes, the AI button is removed. Verify that focus moves to the section's collapsible toggle button (e.g., "SEO analysis") instead of being lost.
  • Repeat the test in the metabox view (classic editor or metabox mode) and verify the same behavior.

Scenario 2: Without Premium active

  • Open a post in the block editor with Yoast SEO Free without Premium.
  • Verify that the Readability and SEO analysis panels render and function normally without errors in the browser console.
  • Verify there are no unexpected focus changes or regressions in keyboard navigation within the analysis sections.

ModalNotification changes in the UI library

  • Run the Storybook in this branch and check that the Modal Notification element positions work as expected.

Relevant test scenarios

  • Changes should be tested with the browser console open
  • Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)

Test instructions for QA when the code is in the RC

  • QA should use the same steps as above.

Impact check

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

  • AI Optimize button focus management in the sidebar and metabox for both Readability and SEO analysis sections.
  • Keyboard/screen reader accessibility after AI Optimize fixes.

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 #4372

@JorPV JorPV closed this Feb 24, 2026
@JorPV JorPV reopened this Feb 24, 2026
@JorPV JorPV changed the title Fix AI Optimize focus fallback not triggering Fix AI Optimize focus fallback not triggering after successful fix Feb 24, 2026
@JorPV JorPV added the changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog label Feb 24, 2026
@JorPV JorPV changed the title Fix AI Optimize focus fallback not triggering after successful fix Add AI Optimize focus fallback Feb 24, 2026
@JorPV JorPV requested a review from a team as a code owner February 25, 2026 08:07
Copy link
Copy Markdown
Contributor

@vraja-pro vraja-pro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AC 🚧
The current flow:

  1. I click on ai optimize button
  2. Suggestions appear in content
  3. Ai optimize button is removed
  4. Focus moves to tab while AI notification is visible.
  5. I apply suggestions, focus is lost.

Check the commnet on the Premium PR first.

@JorPV JorPV force-pushed the jordi-pv/ai-optimize-fix-tab-focus-for-notification-element branch from 8f46c2a to d5e888f Compare February 27, 2026 14:16
@JorPV JorPV closed this Mar 10, 2026
@JorPV
Copy link
Copy Markdown
Contributor Author

JorPV commented Mar 10, 2026

Solved by #23036

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants