Skip to content

Components: Fix label and placeholder handling in LinkControlSearchInput #70096

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Jul 16, 2025
Merged

Components: Fix label and placeholder handling in LinkControlSearchInput #70096

merged 8 commits into from
Jul 16, 2025

Conversation

im3dabasia
Copy link
Contributor

@im3dabasia im3dabasia commented May 12, 2025 •
edited
Loading

What?

This PR fixes accessibility issues in the LinkControlSearchInput component by ensuring proper handling of labels and placeholders in different scenarios.

Closes #69652

Why?

In #65458, changes were made to match the visible placeholder with the ARIA label, but this approach caused issues when the component has a visual label (when hideLabelFromVision is false), leading to overlapping text. This PR provides a more robust solution that addresses all accessibility scenarios.

How?

The solution properly handles labels and placeholders to ensure accessibility in all scenarios mentioned in the issue:

  1. When the label is visually hidden: If hideLabelFromVision is true, we use the placeholder text as the ARIA label (ensuring they match for screen readers), unless the placeholder is explicitly disabled.
  2. When consumers disable placeholders: If placeholder is explicitly set to an empty string, we respect that choice and maintain "Link" as the ARIA label regardless of hideLabelFromVision setting.
  3. When the label is visually displayed: If hideLabelFromVision is false, we consistently use "Link" as the label while maintaining the placeholder as a separate element. The placeholder uses either the provided value or falls back to the default text if not specified.

Testing Instructions

  1. Insert a paragraph and add some text.
  2. Select text and add a link via the toolbar.
  3. Save the link, then edit it again.
  4. Verify the link control shows proper label and placeholder.

@im3dabasia im3dabasia marked this pull request as ready for review May 12, 2025 09:32
@im3dabasia im3dabasia requested a review from getdave as a code owner May 12, 2025 09:32
@github-actions GitHub Actions
Copy link

github-actions bot commented May 12, 2025 •
edited
Loading

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: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@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.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor labels May 13, 2025
Mamaduka
Mamaduka reviewed May 14, 2025
View reviewed changes
@im3dabasia im3dabasia requested a review from Mamaduka May 15, 2025 09:11
@Mamaduka
Copy link
Member

@im3dabasia, I think some failing e2e tests are caused by this change.

We need to evaluate each of those, then

A) Update the text if failure is expected after this change.
B) Adjust logic if we accidentally introduced a regression.

@im3dabasia im3dabasia requested a review from ellatrix as a code owner June 3, 2025 08:51
@Mamaduka
Copy link
Member

@im3dabasia, do you mind rebasing this on top of the latest trunk? Thank you!

Mamaduka
Mamaduka approved these changes Jul 16, 2025
View reviewed changes
Copy link
Member

@Mamaduka Mamaduka 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 working on this, @im3dabasia!

@Mamaduka Mamaduka merged commit b3cda42 into WordPress:trunk Jul 16, 2025
60 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.3 milestone Jul 16, 2025
USERSATOSHI pushed a commit to USERSATOSHI/gutenberg that referenced this pull request Jul 23, 2025
@im3dabasia @Mamaduka
@t-hamano @USERSATOSHI
Components: Fix label and placeholder handling in `LinkControlSearchI…
22abe42 
…nput` (WordPress#70096)

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@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
Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

@getdave getdave Awaiting requested review from getdave getdave is a code owner

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

Assignees
No one assigned
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 21.3
Development

Successfully merging this pull request may close these issues.

LinkControlSearchInput: Explore way to provide better label and placeholder
3 participants
@im3dabasia @Mamaduka @t-hamano