![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 5 weeks ago
Last modified 3 weeks ago
#8294 new defect (bug)
Photo Directory : Button label disappears on click/focus
| Reported by: | krupajnanda | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Photo Directory | Keywords: | has-screenshots has-patch needs-testing |
| Cc: |
Description
The "Contributions" and "Favorites" button text briefly disappears when the button is clicked.
Steps to Reproduce:
- Visit https://wordpress.org/photos/author/<authoer_name>
E.g. https://wordpress.org/photos/author/krupajnanda/ - Click the Contributions button.
- Observe the button during the click/focus state.
Expected Result:
The button label ("Contributions"/"Favorites") should remain visible in all states (default, hover, focus, active).
Actual Result:
The text briefly disappears while the button is being clicked; leaving only the button background visible.
Attachments (2)
Change History (7)
#2
@
4 weeks ago
- Keywords has-patch added; needs-patch removed
I was able to reproduce this issue on my end!
When the button enters the :active or :focus state, the background turns black, but the text color doesn't update to contrast it. This makes the text momentarily invisible, leaving just the black background box.
Since these buttons are using the .is-style-button-list navigation block, we can easily fix this by explicitly setting the text color for those interaction states.
Here is the CSS patch to resolve the issue:
.wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:active,
.wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:focus {
color: #ffffff !important;
}
#3
@
4 weeks ago
- Keywords needs-testing added
Please use the existing color variables instead of hardcoded color values. This will ensure that Customizer changes are reflected automatically. Also, !important does not appear to be necessary here.
.wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:active,
.wp-block-navigation.is-style-button-list .wp-block-navigation-item__content:focus {
color: var(--wp--custom--button--outline--color--text);
}
#4
@
4 weeks ago
@mkrndmane Thanks for the feedback. You're right—using the CSS variable is cleaner and ensures customizer changes are reflected. Tested with var(--wp-custom--button--outline--color--text) and confirmed it resolves the issue.
It's Working Properly.