CloudCannon
Feature Request: Make Entire Search Result Item Clickable in PagefindUI
Feature Request: It would be beneficial if PagefindUI allowed the entire search result item to be clickable, rather than just the title. This enhancement would make the user experience more intuitive, as users often expect that clicking anywhere within a search result will navigate them to the linked page.
Use Case: Currently, only the header of each search result is a link, which can make the search results less intuitive to interact with. Allowing the entire result to be wrapped in a link would improve usability, particularly for mobile users or those with accessibility needs, by expanding the clickable area and reducing the need for precise clicking.
Suggested Implementation:
An option in the PagefindUI configuration to enable a wrapper link around the entire result, or alternatively, allowing for customization of the result template to wrap all elements in an <a> tag pointing to the result URL.
Thank you for considering this feature! It would greatly enhance the flexibility and usability of the PagefindUI component.
👋 @mseele
Yes, this one comes up a fair bit! I like the path of customizing result templates — it's something the modular UI does — I'll have a think about whether the Default UI can do the same.
(Long term I have been wanting to re-ship the default UI as a prebuilt collection of modules from the modular UI, which would also provide a pathway to this 🤔)
A search result item can contain additional links (see the MDN example) so I don't think entire items can be made a click target for the page by default; maybe there could be a parameter for sites that know the page title will always be the only link.
When the whole item can be a click target, wrapping it all in a link is not good way to achieve that; all the contained text would become the name of the link which is bad experience for people using assistive technologies like screen readers and voice control software. Additionally, any semantics contained within the item would be, at best, harder to discover.
Instead of wrapping the whole item in a link, a better approach is to use a technique common for creating clickable cards, aka block links, using a pseudo-element. The pseudo-element is added to the page title link and positioned to cover the entire item so pointer clicks anywhere on the item activates the link but the keyboard and screen reader experience is not affected.
A downside to this approach is the pseudo-element prevents pointer selection of text within the item. The article Block Links: The Search for a Perfect Solution includes JavaScript for detecting pointer selection to get around this issue but I don't know if there are any problems with that in practice.
