How to fix Lighthouse error: "Warning: Links are not crawlable" - lighthouse

Question

I tested my website on lighthouse and I got this error does anyone knows how to fix it?
Links are not crawlable
This is my code share social media button
<a class="crunchify-link crunchify-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=&t="
title="Share on Facebook"
rel="noopener"
target="_blank"
onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"
>
<div class="facebook-ic"></div>
</a>

Answer 1

Why did you get this warning?
Lighthouse tests for onclick="window.open to try and catch anchors that are activated by JavaScript instead of a href, as this is bad for SEO and accessibility.
Fixes / suggestions
If your href was valid I would say you could safely ignore this but it is not valid (empty "u" and "t" parameters).
Fix your href so that it is valid (build it server-side to populate the u and t parameters), you will still get the warning but it can be safely ignored then.
Although saying that if you fix the URL then target="_blank" will open the sharer in a new tab so that would be sufficient without the need for any JavaScript.
To remove the error you should move the event handler into a JavaScript file rather than using inline onclick handlers.
This will remove the warning after looking at the audit source code and is a good practice.
You can do this easily with target.addEventListener.
Quick example of event listeners
const el = document.getElementById("fbLink");
el.addEventListener("click", sharerFunction, false);
function sharerFunction(e){
e.preventDefault();
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL));
alert("link will not open due to sandbox permissions, but check console it does fire");
}
<a href="https://facebook.com" id="fbLink" ....**other stuff here**....>Facebook icon</a>
Relevant part of audit source code for reference
As mentioned earlier the source code for the crawlable-anchors test shows what is tested for, anything returning true is a fail, notice how the hasClickHandler test returns null as that is considered ok (I believe, it is late I may have misread the code!).
const windowLocationRegExp = /window\.location=/;
const windowOpenRegExp = /window\.open\(/;
const javaScriptVoidRegExp = /javascript:void(\(|)0(\)|)/;
if (rawHref.startsWith('file:')) return true;
if (windowLocationRegExp.test(onclick)) return true;
if (windowOpenRegExp.test(onclick)) return true;
const hasClickHandler = listeners.some(({type}) => type === 'click');
if (hasClickHandler || name.length > 0) return;
if (rawHref === '') return true;
if (javaScriptVoidRegExp.test(rawHref)) return true;