Query Loop Duplicate links

[DennysDionigi]

What problem does this address?

While using the query loop block [FSE Themes, Hybrid Themes, WP >= 6.5], there is the ability to set, among the many blocks inherent to the query itself: both the internal block showing the post thumbnail and the post title block, and the two can be set as post links. This feature, although convenient on the UX side to give the ability to click in both the visible name and the thumbnail itself - which has no link inner-content nor attribute, can lead to have 2 double links pointing to the same destination, thus a repetition both for screen-readers and both when navigating with the keyboard. Using the tab key in fact, the focus ends up on both twin links, first on one and then on the other one: so while navigate with keyboard, instead of having example 6 links it ends having 12 links.

The various CSS and JS tricks can help, as a light and quick solution, such as adding pointer-events:none, or putting one of the two links overlapping the other with absolute positioning, or even any js solution, but it would be at that point would be either ineffective, or not very useful, you might as well just enable one of the two links: decorative thumb link or text one.

What is your proposed solution?

So I propose adding an aria-hidden attribute, or, even better, simply a “tabindex=-1” to one of the twin elements. It would probably be better to use tabindex, since hiding or using <aria-hidden> on an interactive element, i.e., a link itself, is counter-intuitive and not very useful.

Is there any temp code?

There are many ways to fix that, via js or via php, but this thread is here to find and suggest any clean and global solution. Actually I've been working on something as the following code:

<?php 
function modify_duplicate_links_tabindex() {
    // Only process Query Loop blocks
    add_filter('render_block', function($block_content, $block) {
        if ($block['blockName'] !== 'core/query') {
            return $block_content;
        }

        $seen_urls = [];

        // Use HTML Tag Processor
        $tags = new WP_HTML_Tag_Processor($block_content);

        // Find all anchor tags
        while ($tags->next_tag('a')) {
            $url = $tags->get_attribute('href');

            if (isset($seen_urls[$url])) {
                // This is a duplicate URL, add tabindex=-1
                $tags->set_attribute('tabindex', '-1');
                // Optionally add aria-hidden="true" but won't be compliant or valid on <a> elements
                //$tags->set_attribute('aria-hidden', 'true');
            } else {
                $seen_urls[$url] = true;
            }
        }

        return $tags->get_updated_html();
    }, 10, 2);
}
add_action('init', 'modify_duplicate_links_tabindex');

But of course we can work together finding a better way.

Hi Can you explain in more detail what you mean with the thumbnail itself has no link inner-content nor attribute.

[DennysDionigi]

Hi @carolinan , while using the thumbnail as post link, that link itself has no accessible and no discernible context, basically the output is:

<figure><a href="xxx"><img></a></figure>

Which basically is a link with no clear purpose, being missing the anchor text or any aria-label that explains the meaning of that link, as explained here https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html.

and additionally here too: https://www.w3.org/WAI/WCAG21/Techniques/html/H2

So basically the actual code is a "figurative" link, additionally when using, as screen, both the figurative link and the title link, we have double links: while using the mouse click is something that is not bothersome or at any rate not a disruptive or invasive element, but when using a screen-reader or navigating with the keyboard and tab key instead, you end up sequentially on both links, thus having an unnecessary repetition.

You get a clear situation on the attachment, I've highlighted "Rerum iure asperiores numquam voluptatem quidem" where you see both the element: <figure> with its inner link and the "h2" too.

[carolinan]

@DennysDionigi I would say that description is not accurate. The alternative text on the image is the anchor text.

In the editor, the alternative text on the linked image is the block name, and the link itself is disabled. On the front, the alternative text on the linked image is the title: the name of the post, which is the target of the link.

So it does not violate "A link contains text that gives a description of the information at that URI"

[DennysDionigi]

But still gives double content while using tab, having :

<figure><a href="xxx"><img alt="xxx"></a></figure>

And just 5px close, the same <h2><a href="xxx">XXX</a></h2>, do you agree with me that's a clone?

[carolinan]

I am not saying that duplicate links are not a problem. I am saying that the link on the featured image block is accessible.

[DennysDionigi]

Yep, I mixed both issues my fault, (also my fault for the alt, because I always add aria-label, being I prefer to handle and customize) but the main point here was suggesting to add a tabindex-1 where finding cloned links inside the query loop. :)

[carolinan]

On a site, the user that is writing the content can control which blocks are linked, and they can choose to reduce the number of links. But even if the user disables the link settings and only have one link in the query loop per post, that is still problematic, since there is user testing that show that visitors often try to click on the featured image to reach the content.

For a theme developer, these links are also problematic because the theme does not control whether the displayed post has a featured image or a post title. Meaning that themes need to add a third link to the post, usually the post date or a read more link. So you have to choose between having too many links, or the visitor not being able to reach the post because there are no links to the post.

[DennysDionigi]

That's why, even a basic and starting solution, I propose something like the following:

<?php 
function modify_duplicate_links_tabindex() {
    // Only process Query Loop blocks
    add_filter('render_block', function($block_content, $block) {
        if ($block['blockName'] !== 'core/query') {
            return $block_content;
        }

        $seen_urls = [];

        // Use HTML Tag Processor
        $tags = new WP_HTML_Tag_Processor($block_content);

        // Find all anchor tags
        while ($tags->next_tag('a')) {
            $url = $tags->get_attribute('href');

            if (isset($seen_urls[$url])) {
                // This is a duplicate URL, add tabindex=-1
                $tags->set_attribute('tabindex', '-1');
            } else {
                $seen_urls[$url] = true;
            }
        }

        return $tags->get_updated_html();
    }, 10, 2);
}
add_action('init', 'modify_duplicate_links_tabindex');

Which should work for twin urls inside the loop. So date url and post title are different elements and not affected at all, instead post title and post thumb, should get patched... and should work also if... for some strange reason, error or decoration a user should have an internal loop block duplicated, this could be a fix