Make WordPress Core

Opened 10 months ago

Closed 2 months ago

Last modified 3 weeks ago

#52880 closed defect (bug) (fixed)

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

Reported by: sabernhardt Owned by: 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 10 months ago.
tabbing through the links, the feed link is invisible
rss-widget-highlighting-empty-link.webm (97.5 KB) - added by sabernhardt 10 months ago.
highlighting the empty link
52880.patch (499 bytes) - added by sabernhardt 10 months ago.
CSS option (same as Twenty Twenty)
52880.filter.patch (645 bytes) - added by sabernhardt 4 months ago.
option 2: using proposed filter

Download all attachments as: .zip

Change History (19)

@sabernhardt
10 months ago

tabbing through the links, the feed link is invisible

@sabernhardt
10 months ago

highlighting the empty link

@sabernhardt
10 months ago

CSS option (same as Twenty Twenty)

#1 @sabernhardt
10 months 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
10 months ago

  • Version changed from 5.5 to 5.6

@sabernhardt
4 months ago

option 2: using proposed filter

#3 @sabernhardt
4 months ago

  • Milestone changed from Future Release to 5.9

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


4 months ago

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


3 months ago

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


3 months ago

#7 @sabernhardt
3 months 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 months ago

#9 @sabernhardt
3 months 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 months ago

#11 @poena
3 months 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 months ago

#13 @audrasjb
2 months ago

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

Self-assigning for commit.

#14 @audrasjb
2 months 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
3 weeks ago

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