diff --git a/src/js/AccessibilityUtils.js b/src/js/AccessibilityUtils.js index 657348a7..ce78f6a2 100644 --- a/src/js/AccessibilityUtils.js +++ b/src/js/AccessibilityUtils.js @@ -922,6 +922,17 @@ axs.utils.namedValues = function(obj) { return values; }; +/** +* Escapes a given ID to be used in a CSS selector +* +* @private +* @param {!String} id The ID to be escaped +* @return {String} The escaped ID +*/ +function escapeId(id) { + return id.replace(/[^a-zA-Z0-9_-]/g,function(match) { return '\\' + match; }); +} + /** Gets a CSS selector text for a DOM object. * @param {Node} obj The DOM object. * @return {string} CSS selector text for the DOM object. @@ -935,7 +946,7 @@ axs.utils.getQuerySelectorText = function(obj) { if (obj.hasAttribute) { if (obj.id) { - return '#' + obj.id; + return '#' + escapeId(obj.id); } if (obj.className) { diff --git a/test/js/utils-test.js b/test/js/utils-test.js index debc4cc8..7b04501a 100644 --- a/test/js/utils-test.js +++ b/test/js/utils-test.js @@ -121,6 +121,15 @@ test("nth-of-type does not refer to a selector but a tagName", function() { equal(lastLi, document.querySelector(selector), 'selector "' + selector + '" does not match element'); }); +test('special characters in IDs are properly escaped', function() { + var div = document.createElement('div'); + div.id = 'some.id.with.special.chars'; + this.fixture_.appendChild(div); + var selector = axs.utils.getQuerySelectorText(div); + equal(div, document.querySelector(selector), + 'selector "' + selector + '" does not match element'); +}); + module("getIdReferrers", { setup: function () {