fix: escape special characters to be used in a query selector string

Author: joscha

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) {

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 () {