Skip to content

Fix: Font Library Modal: Focus outline not displaying correctly #70667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 10, 2025

Conversation

prasadkarmalkar
Copy link
Contributor

What?

Closes #70656

Why?

Fixes Font Library Modal: Focus outline not displaying correctly

How?

Add the position property as relative for the font list item to make its outline visible.

Before After
Screenshot 2025-07-09 at 9 16 15 PM Screenshot 2025-07-09 at 9 13 51 PM

Copy link

github-actions bot commented Jul 9, 2025

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

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

@shail-mehta shail-mehta added [Type] Bug An existing feature does not function as intended [Feature] Font Library labels Jul 9, 2025
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

We recommend not using CSS classname with .components- prefix as much as possible.

Fortunately, this button already has its own classname .font-library-modal__font-card. Therefore, we should be able to solve this problem by adding &:focus { position: relative; } here:

@prasadkarmalkar
Copy link
Contributor Author

Hi @t-hamano , Thanks for the suggestion! I have made the update as recommended. Let me know if there's anything else you'd like me to adjust.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit 7e14d21 into WordPress:trunk Jul 10, 2025
60 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.3 milestone Jul 10, 2025
cbravobernal pushed a commit that referenced this pull request Jul 15, 2025
* Enhance focus styles for buttons in font library modal

* Refactor focus styles in font library modal

Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Font Library [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font Library Modal: Focus outline not displaying correctly
3 participants