Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 2 years ago

#52880 closed defect (bug) (fixed)

Twenty Twenty-One: RSS widget has empty link (feed icon)

Reported by: sabernhardt's profile sabernhardt Owned by: audrasjb's profile audrasjb
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch has-testing-info has-dev-note
Focuses: accessibility Cc:

Description

Instead of hiding the RSS icon link, the image inside the link was hidden. So that results in an empty link.

.widget_rss a.rsswidget .rss-widget-icon {
	display: none;
}

Steps to discover:

  1. Create an RSS widget, with the Twenty Twenty-One theme active.
  2. Visit a page with that widget in a sidebar.
  3. Use the tab key to navigate to each link on the page.
  4. When you arrive at the RSS widget heading, the first link is invisible but clickable.

If using a screen reader, the speech output is unreliable:

Edge/NVDA - "feed link heading level 2"
Firefox/NVDA - "blank"
Edge/Narrator - "link"
Firefox/Narrator - "link"

Attachments (4)

rss-widget-twenty-twenty-one.webm (92.4 KB) - added by sabernhardt 3 years ago.
tabbing through the links, the feed link is invisible
rss-widget-highlighting-empty-link.webm (97.5 KB) - added by sabernhardt 3 years ago.
highlighting the empty link
52880.patch (499 bytes) - added by sabernhardt 3 years ago.
CSS option (same as Twenty Twenty)
52880.filter.patch (645 bytes) - added by sabernhardt 3 years ago.
option 2: using proposed filter

Download all attachments as: .zip

Change History (19)

@sabernhardt
3 years ago

tabbing through the links, the feed link is invisible

@sabernhardt
3 years ago

highlighting the empty link

@sabernhardt
3 years ago

CSS option (same as Twenty Twenty)

#1 @sabernhardt
3 years ago

  • Keywords has-patch added
  • Owner set to sabernhardt
  • Status changed from new to accepted

I'd prefer removing the link entirely (see #52224), but the CSS patch would hide the link the same way that Twenty Twenty does:

.widget_rss .widget-title a.rsswidget:first-of-type {
	display: none;
}

#2 @sabernhardt
3 years ago

  • Version changed from 5.5 to 5.6

@sabernhardt
3 years ago

option 2: using proposed filter

#3 @sabernhardt
3 years ago

  • Milestone changed from Future Release to 5.9

This ticket was mentioned in Slack in #core-test by mai21. View the logs.


3 years ago

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by chaion07. View the logs.


3 years ago

#7 @sabernhardt
3 years ago

  • Keywords needs-testing added

For testing the filter patch, the instructions are on ticket:52224#comment:14 (it requires the patch there, too).

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


3 years ago

#9 @sabernhardt
3 years ago

  • Keywords has-testing-info added

The filter was added in r52031, so testing 52880.filter.patch does not require an additional patch anymore.

@Boniu91 wrote a test report on ticket:52224#comment:25, though testing again after the other commit could be a good idea.

Simplified testing instructions

  1. Before applying the patch, install and activate the Classic Widgets plugin.
  2. Activate the Twenty Twenty-One theme.
  3. Go to Appearance > Widgets (or Customize > Widgets). Verify there are no error messages in the widget editor. (To see errors, you may need WP_DEBUG to be true in your wp-config.php.)
  4. Add at least one RSS widget, with any combination of settings, to the most prominent sidebar area.
  5. Visit the site (front end), view source code, and record the current markup for the widget title (h2 heading). The heading would contain two links, one with an rss-widget-feed class and the other with rss-widget-title.
  6. Apply the latest patch. Clear any browser cache or open a different browser to compare both side-by-side.
  7. Visit the site and verify there are no errors on the front end. The entire widget should still appear the same.
  8. View source code and record the updated markup for the widget title (h2 heading). It should only have the rss-widget-title link now.

This ticket was mentioned in Slack in #core-test by justinahinon. View the logs.


3 years ago

#11 @poena
3 years ago

  • Keywords commit added; needs-testing removed

Tested with trunk at 5.9-alpha-51272.
The patch still works well, the link with the icon is removed, leaving the widget title.
Thank you for the patch and detailed instructions.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


3 years ago

#13 @audrasjb
3 years ago

  • Owner changed from sabernhardt to audrasjb
  • Status changed from accepted to assigned

Self-assigning for commit.

#14 @audrasjb
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 52191:

Twenty Twenty-One: Remove RSS feed widget icon link.

Use the rss_widget_feed_link filter to disable the output of the icon on RSS feed widgets in Twenty Twenty-One. Improves accessibility by preventing invisible links.

Props sabernhardt, poena.
Fixes #52880.

#15 @sabernhardt
2 years ago

  • Keywords has-dev-note added; commit removed
Note: See TracTickets for help on using tickets.