From 38f7e00eb2b1d98c178c51b4ca1548afcd1ccd52 Mon Sep 17 00:00:00 2001
From: Joscha Feth <jfeth@atlassian.com>
Date: Wed, 16 Dec 2015 15:57:51 +1100
Subject: [PATCH] fix: escape special characters to be used in a query selector
 string

---
 src/js/AccessibilityUtils.js | 13 ++++++++++++-
 test/js/utils-test.js        |  9 +++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

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