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.