Bug 1266456 - part11: a11y, stop handling aria active-descendant in autocomplete;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 07 Jul 2016 16:32:42 +0200
changeset 385567 632f473f016acfd2e3ca48f999d9291a2d7f3e58
parent 385566 7fe78b2e3c59581f752be458e8d45f402b13d4e2
child 524960 580fe910aea4b89ac24d607698d1bf2e12b1ef20
push id22536
push userjdescottes@mozilla.com
push dateFri, 08 Jul 2016 16:44:25 +0000
reviewersbgrins
bugs1266456
milestone50.0a1
Bug 1266456 - part11: a11y, stop handling aria active-descendant in autocomplete;r=bgrins Remove the feature while waiting for feedback on how to properly do accessibility when the input and the suggestions live in different frames. MozReview-Commit-ID: 588ctmyiFoI
devtools/client/shared/autocomplete-popup.js
devtools/client/webconsole/test/browser_webconsole_bug_585991_autocomplete_popup.js
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -151,18 +151,16 @@ AutocompletePopup.prototype = {
     }
     this.selectedIndex = index;
   },
 
   /**
    * Hide the autocomplete popup panel.
    */
   hidePopup: function () {
-    // Return accessibility focus to the input.
-    this._findActiveElement().removeAttribute("aria-activedescendant");
     this._tooltip.once("hidden", () => {
       this.emit("popup-closed");
     });
     this._tooltip.hide();
   },
 
   /**
    * Check if the autocomplete popup is open.
@@ -281,47 +279,16 @@ AutocompletePopup.prototype = {
       element.scrollIntoView(true);
     } else if ((top + height) > containerHeight) {
       // Element is beloew container.
       element.scrollIntoView(false);
     }
   },
 
   /**
-   * Update accessibility appropriately when the selected item is changed.
-   */
-  _updateAriaActiveDescendant: function () {
-    let activeElement = this._findActiveElement();
-    if (!activeElement) {
-      return;
-    }
-
-    if (this.selectedItem) {
-      // Focus this for accessibility so users know about the selected item.
-      let selectedElement = this.elements.get(this.selectedItem);
-      activeElement.setAttribute("aria-activedescendant", selectedElement.id);
-    } else {
-      // Return accessibility focus to the input.
-      activeElement.removeAttribute("aria-activedescendant");
-    }
-  },
-
-  /**
-   * Find the active element if it belongs in a child document of the autocomplete
-   * document.
-   */
-  _findActiveElement: function () {
-    let activeElement = this._document.activeElement;
-    while (activeElement && activeElement.contentDocument) {
-      activeElement = activeElement.contentDocument.activeElement;
-    }
-    return activeElement;
-  },
-
-  /**
    * Clear all the items from the autocomplete list.
    */
   clearItems: function () {
     // Reset the selectedIndex to -1 before clearing the list
     this.selectedIndex = -1;
     this._list.innerHTML = "";
     this.__maxLabelLength = -1;
     this.items = [];
@@ -352,17 +319,16 @@ AutocompletePopup.prototype = {
     let item = this.items[index];
     if (this.isOpen && item) {
       let element = this.elements.get(item);
 
       element.classList.add("autocomplete-selected");
       this._scrollElementIntoViewIfNeeded(element);
     }
     this._selectedIndex = index;
-    this._updateAriaActiveDescendant();
 
     if (this.isOpen && item && this.onSelectCallback) {
       // Call the user-defined select callback if defined.
       this.onSelectCallback();
     }
   },
 
   /**
--- a/devtools/client/webconsole/test/browser_webconsole_bug_585991_autocomplete_popup.js
+++ b/devtools/client/webconsole/test/browser_webconsole_bug_585991_autocomplete_popup.js
@@ -21,104 +21,79 @@ function consoleOpened(HUD) {
   let items = [
     {label: "item0", value: "value0"},
     {label: "item1", value: "value1"},
     {label: "item2", value: "value2"},
   ];
 
   let popup = HUD.jsterm.autocompletePopup;
 
-  let input = popup._findActiveElement();
-  function getActiveDescendant() {
-    let descendantId = input.getAttribute("aria-activedescendant");
-    return popup._tooltip.panel.querySelector("#" + descendantId);
-  }
-
   ok(!popup.isOpen, "popup is not open");
-  ok(!input.hasAttribute("aria-activedescendant"), "no aria-activedescendant");
 
   popup.once("popup-opened", () => {
     ok(popup.isOpen, "popup is open");
 
     is(popup.itemCount, 0, "no items");
-    ok(!input.hasAttribute("aria-activedescendant"), "no aria-activedescendant");
 
     popup.setItems(items);
 
     is(popup.itemCount, items.length, "items added");
 
     let sameItems = popup.getItems();
     is(sameItems.every(function (item, index) {
       return item === items[index];
     }), true, "getItems returns back the same items");
 
     is(popup.selectedIndex, 2, "Index of the first item from bottom is selected.");
     is(popup.selectedItem, items[2], "First item from bottom is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     popup.selectedIndex = 1;
 
     is(popup.selectedIndex, 1, "index 1 is selected");
     is(popup.selectedItem, items[1], "item1 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     popup.selectedItem = items[2];
 
     is(popup.selectedIndex, 2, "index 2 is selected");
     is(popup.selectedItem, items[2], "item2 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     is(popup.selectPreviousItem(), items[1], "selectPreviousItem() works");
 
     is(popup.selectedIndex, 1, "index 1 is selected");
     is(popup.selectedItem, items[1], "item1 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     is(popup.selectNextItem(), items[2], "selectNextItem() works");
 
     is(popup.selectedIndex, 2, "index 2 is selected");
     is(popup.selectedItem, items[2], "item2 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     ok(popup.selectNextItem(), "selectNextItem() works");
 
     is(popup.selectedIndex, 0, "index 0 is selected");
     is(popup.selectedItem, items[0], "item0 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     items.push({label: "label3", value: "value3"});
     popup.appendItem(items[3]);
 
     is(popup.itemCount, items.length, "item3 appended");
 
     popup.selectedIndex = 3;
     is(popup.selectedItem, items[3], "item3 is selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
 
     popup.removeItem(items[2]);
 
     is(popup.selectedIndex, 2, "index2 is selected");
     is(popup.selectedItem, items[3], "item3 is still selected");
-    ok(getActiveDescendant().classList.contains("autocomplete-selected"),
-      "aria-activedescendant is correct");
     is(popup.itemCount, items.length - 1, "item2 removed");
 
     popup.clearItems();
     is(popup.itemCount, 0, "items cleared");
-    ok(!input.hasAttribute("aria-activedescendant"), "no aria-activedescendant");
 
     popup.once("popup-closed", () => {
       deferred.resolve();
     });
     popup.hidePopup();
   });
 
-  popup.openPopup(input);
+  popup.openPopup(HUD.jsterm.inputNode);
 
   return deferred.promise;
 }