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

RSS block: Fix the placeholder UI labeling #61571

Closed
afercia opened this issue May 10, 2024 · 0 comments · Fixed by #61576
Closed

RSS block: Fix the placeholder UI labeling #61571

afercia opened this issue May 10, 2024 · 0 comments · Fixed by #61576
Assignees
Labels
[Block] RSS Affects the RSS Block - used to display entries from an RSS/Atom feed [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented May 10, 2024

Description

The overall labeling of the RSS block placeholder isn't ideal. Issues in order of importance:

1
The input field labeling is less than ideal. Actually, the labeling is only given by the placeholder attribute Enter URL here….
The input field doesn't have any associated <label> element or any aria-label or aria-labelledby attribute.
Browsers do use the placeholder attribute as one of the last fallbacks to calculate the accessible name. However, that's less than ideal as the placeholder attribute should only be used to provide hints about the expected format or instructions.

Actually, I'd say this is one more occurence of an unlabeled control, which proves again the base components are open to misuse. See #51740

Screenshot to illustrate the input field doesn't have any label and gets its accessile name from the placeholder attribute:

rss unlabeled

2
The button text 'Use URL' sounds a bit weird to me.
Why not to use a simpler, more intuitive text like 'Apply' or something along that line?
Is there any specific reason for the text 'Use URL'? Does it make the user experience any better?

3
The placeholder 'visual label' at the top is just 'RSS'.
It's inconsistent with similar blocks, for example the Embed block or other media embed blocks like the YouTube block use a text with the format 'Embed URL', 'YouTube URL' and so on. Screenshot:

Screenshot 2024-05-10 at 12 52 56

Note on a couple design inconsistencies:

  • Spacing between the input field and button is inconsistent with similar blocks.
  • The placeholder would benefit from a description. The Embed and other media embed placeholders do have a visible description text with instructions e.g.: Paste a link to the content you want to display on your site. The RSS block could use the actual block description to clarify that it accepts RSS feeds and also Atom feeds: Display entries from any RSS or Atom feed.

Step-by-step reproduction instructions

  • Add an RSS block.
  • Inspect the input field in your browser dev tools inspector.
  • Observe the input field doesn't have any associated <label> element or any aria-label or aria-labelledby attribute.

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). [Block] RSS Affects the RSS Block - used to display entries from an RSS/Atom feed labels May 10, 2024
@afercia afercia changed the title RSS block: FIx the placeholder UI labeling RSS block: Fix the placeholder UI labeling May 10, 2024
@afercia afercia self-assigned this May 10, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] RSS Affects the RSS Block - used to display entries from an RSS/Atom feed [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant