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