Improve node selectors shown in the details table

[kdzwinel]

In is-crawlable and hreflang audits nodes listed in the details table have no selector set eg.

source: {
  type: 'node',
  snippet: `<meta name="robots" content="${artifacts.MetaRobots}" />`,
 //selector: ??
},

This causes resulting table item title to be set to 'undefined':

We should show element selector instead, just like axe-core audits do:

However, to build a full selector we'd need class+id+nodeName for given node and all its ancestors which would require more work from the gatherers.

font-size audit is in a bit better situation because we do have all the data needed from the gatherer, however, we still can't reuse getSelector from axe-core since we don't have real DOM nodes, but rather devtools protocol nodes.
I've put together a simpler alternative that would work here, but it doesn't guarantee selectors to be pretty or unique. For now we decided to show only id, class or node name of the parent element.

[patrickhulce]

Decided to do something simple here just using the class, id, and name/type attributes of the current node and not worry about parents

Function to make the nodes clickable in devtools

lighthouse/lighthouse-core/gather/gatherers/accessibility.js

Lines 53 to 73 in 8c088a6

	function getNodePath(node) {
	function getNodeIndex(node) {
	let index = 0;
	while (node = node.previousSibling) {
	// skip empty text nodes
	if (node.nodeType === Node.TEXT_NODE &&
	node.textContent.trim().length === 0) continue;
	index++;
	}
	return index;
	}
	const path = [];
	while (node && node.parentNode) {
	const index = getNodeIndex(node);
	path.push([index, node.nodeName]);
	node = node.parentNode;
	}
	path.reverse();
	return path.join(',');
	}

[brendankenny]

we fixed the undefined hover when we first added types to details-renderer in #5195, and #6683 and #8961 are taking up the mantle here, so I'm going to close.