DOMException: Failed to execute 'matches' on 'Element'

[stephenmathieson]

Attempting to run axe-core on https://eclkc.ohs.acf.hhs.gov/education-child-development yields the following error:

VM60:3472 Uncaught (in promise) DOMException: Failed to execute 'matches' on 'Element': 'a[href="  /child-screening-assessment
"] > .card__image > .card__text' is not a valid selector.
    at Object.matchesSelector (<anonymous>:3472:26)
    at <anonymous>:4002:28
    at Array.filter (<anonymous>)
    at generateSelector (<anonymous>:4001:27)
    at Object.createUniqueSelector [as getSelector] (<anonymous>:4038:14)
    at DqElement.get selector [as selector] (<anonymous>:3429:48)
    at <anonymous>:2399:51
    at Array.map (<anonymous>)
    at <anonymous>:2392:47
    at Array.map (<anonymous>)

It looks like this page contains newlines in attribute values, which causes axe-core to produce invalid selectors. Example (note the href):

<a href="  /child-screening-assessment
  " class="no-icon" rel="bookmark">
    [...]
</a>

This error occurs with axe-core versions 3.0.3 and 3.1.1, but 2.5.0 is fine.

[straker]

The bug is in the axe.utils.getSelector code where the only thing we don't escape is the href attribute.

axe-core/lib/core/utils/get-selector.js

Lines 34 to 45 in 320e633

	if (name.indexOf('href') !== -1 || name.indexOf('src') !== -1) {
	let friendly = axe.utils.getFriendlyUriEnd(node.getAttribute(name));
	if (friendly) {
	let value = encodeURI(friendly);
	if (value) {
	atnv = escapeSelector(at.name) + '$="' + value + '"';
	} else {
	return;
	}
	} else {
	atnv = escapeSelector(at.name) + '="' + node.getAttribute(name) + '"';
	}

[stephenmathieson]

Nice find, Steven!