Skip to content
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

Input URL fields don't reserve space for the spinner icon #58679

Open
afercia opened this issue Feb 5, 2024 · 0 comments
Open

Input URL fields don't reserve space for the spinner icon #58679

afercia opened this issue Feb 5, 2024 · 0 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Feb 5, 2024

Description

Noticed while working on #58505

See also the reunification of these UIs proposed in #50893

Both the LinkControl input field and the URL input field for images don't reserve space for their spinner icon. As such, long text inserted in the input field is partially hidden by the spinner icon.

Generally, I'm not sure that visually placing extraneous control within an input field is ideal in the first place. The visually appearance os such a placement may look more pleasant but that's subjective and not that relevant.

The expectation is to have controls that are visually separated and can be distinguished easily, This applies to buttons and also to 'spinner' icons.

The fact that the spinner icon hides content, although it only does that temporarily, isn't ideal and should be prevented.

Screenshots:

spinner 01

spinner 02

Step-by-step reproduction instructions

  • Select some text and start inserting a link.
  • In the URL input field type some long text and wait to see the spinner icon.
  • Observe the spinner icon hides the text you entered.
  • Add an Image block and start adding a link to the image.
  • In the URL input field type some long text and wait to see the spinner icon.
  • Observe the spinner icon hides the text you entered.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. labels Feb 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant