Handheld footer bar search - Empty href attribute - Bad for PageSpeed Insights / SEO score

Kelderro commented 1 year ago

Is your feature request related to a problem? Please describe.

PageSpeed Insights reports the following when the active theme is storefront: This is caused by the handheld footer bar search. The tag that is used contains an empty href attribute which affect the SEO scoring.

Describe the solution you'd like

There are two solutions to implement this enhancement:

Removal of the href attribute. The href attribute in an tag is optional based on the information found on whatwg.org:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
Provide content for the href attribute of the search. By changing the value of the href attribute to javascript:;. This can be done by changing line 706 in the storefront-woocommerce-template-functions.php file. From:
```
echo '<a href="">' . esc_attr__( 'Search', 'storefront' ) . '</a>';
```
to
```
echo '<a href="javascript:;">' . esc_attr__( 'Search', 'storefront' ) . '</a>';
```

Describe alternatives you've considered

Change the value of the href attribute to #. This is not acceptable as this could be a valid link in HTML5.
Applying the change via a child theme. This solution would work take extra effort for users of the storefront theme. The user need to change the functions.php of their storefront child theme by adding:
```
function storefront_handheld_footer_bar_search(): void {
echo '<a href="javascript:;">' . esc_attr__('Search', 'storefront') . '</a>';
storefront_product_search();
}
```

gigitux commented 1 year ago

Hi @Kelderro , thanks for opening this issue!

Storefront is in maintenance mode and, at least for now, we will not work on this issue.

Mercadearse commented 6 months ago

Hey @Kelderro,

This is what I’ve done: Through ftp go to /themes/inc/woocommerce/storefront-woocommerce-template-functions then search for storefront_handheld_footer_bar_search probably line 715.

Modify echo '<a href=""' for echo '<a href="#"'. This way Google Pagespeed Insight mobile search error it’s solved.

However, keep in mind every time parent theme it’s updated, you got to do it again.

Best regards,

Mercadearse

woocommerce / storefront