Bug 1441885 - Remove warnings from autocomplete-popup.js; r=jdescottes. draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Thu, 08 Mar 2018 16:20:59 +0100
changeset 765187 9a960a74c38b51c8ad549187549b383b916aa45e
parent 765132 31a33fc619562e5b326585c6864d86832dac5126
push id101995
push userbmo:nchevobbe@mozilla.com
push dateFri, 09 Mar 2018 08:40:38 +0000
reviewersjdescottes
bugs1441885
milestone60.0a1
Bug 1441885 - Remove warnings from autocomplete-popup.js; r=jdescottes. This was caused by an innerHTML assignment. Switching to replaceWith + cloneNode does the trick. MozReview-Commit-ID: 4pnIijKoJHU
devtools/client/shared/autocomplete-popup.js
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -59,19 +59,19 @@ function AutocompletePopup(toolboxDoc, o
     "devtools-monospace",
     theme + "-theme");
   // Stop this appearing as an alert to accessibility.
   this._tooltip.panel.setAttribute("role", "presentation");
 
   this._list = this._document.createElementNS(HTML_NS, "ul");
   this._list.setAttribute("flex", "1");
 
-  // The list clone will be inserted in the same document as the anchor, and will receive
-  // a copy of the main list innerHTML to allow screen readers to access the list.
-  this._listClone = this._document.createElementNS(HTML_NS, "ul");
+  // The list clone will be inserted in the same document as the anchor, and will be a
+  // copy of the main list to allow screen readers to access the list.
+  this._listClone = this._list.cloneNode();
   this._listClone.className = "devtools-autocomplete-list-aria-clone";
 
   if (options.listId) {
     this._list.setAttribute("id", options.listId);
   }
   this._list.className = "devtools-autocomplete-listbox " + theme + "-theme";
 
   this._tooltip.setContent(this._list);
@@ -383,18 +383,22 @@ AutocompletePopup.prototype = {
 
     // Make sure the list clone is in the same document as the anchor.
     let anchorDoc = this._activeElement.ownerDocument;
     if (!this._listClone.parentNode || this._listClone.ownerDocument !== anchorDoc) {
       anchorDoc.documentElement.appendChild(this._listClone);
     }
 
     // Update the clone content to match the current list content.
-    // eslint-disable-next-line no-unsanitized/property
-    this._listClone.innerHTML = this._list.innerHTML;
+    const clone = this._list.cloneNode(true);
+    clone.className = "devtools-autocomplete-list-aria-clone";
+    this._listClone.replaceWith(clone);
+
+    // We also need to update the reference.
+    this._listClone = clone;
 
     this._activeElement.setAttribute("aria-activedescendant", id);
   },
 
   /**
    * Clear the aria-activedescendant attribute on the current active element.
    */
   _clearActiveDescendant: function () {