Bug 1295564 - fixing aria-activedescendant handling in breadcrumbs when they are unchecked. r=bgrins

MozReview-Commit-ID: OzhA1o8ja9

devtools/client/inspector/breadcrumbs.js

@@ -545,8 +545,12 @@ HTMLBreadcrumbs.prototype = {
   handleFocus: function (event) {
     event.stopPropagation();
 
-    this.outer.setAttribute("aria-activedescendant",
-      this.nodeHierarchy[this.currentIndex].button.id);
+    let node = this.nodeHierarchy[this.currentIndex];
+    if (node) {
+      this.outer.setAttribute("aria-activedescendant", node.button.id);
+    } else {
+      this.outer.removeAttribute("aria-activedescendant");
+    }
 
     this.outer.focus();
   },
@@ -665,6 +669,9 @@ HTMLBreadcrumbs.prototype = {
       if (this.hadFocus) {
         this.nodeHierarchy[index].button.focus();
       }
+    } else {
+      // Unset active active descendant when all buttons are unselected.
+      this.outer.removeAttribute("aria-activedescendant");
     }
     this.currentIndex = index;
   },

devtools/client/inspector/test/browser_inspector_breadcrumbs.js

@@ -68,6 +68,7 @@ add_task(function* () {
   }
 
   yield testPseudoElements(inspector, container);
+  yield testComments(inspector, container);
 });
 
 function* testPseudoElements(inspector, container) {
@@ -91,3 +92,41 @@ function* testPseudoElements(inspector, container) {
   is(container.childNodes[3].textContent, "::after",
      "::before shows up in breadcrumb");
 }
+
+function* testComments(inspector, container) {
+  info("Checking for comment elements");
+
+  let breadcrumbs = inspector.breadcrumbs;
+  let checkedButtonIndex = 2;
+  let button = container.childNodes[checkedButtonIndex];
+
+  let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  button.click();
+  yield onBreadcrumbsUpdated;
+
+  is(breadcrumbs.currentIndex, checkedButtonIndex, "New button is selected");
+  ok(breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must be set");
+
+  let comment = [...inspector.markup._containers].find(([node]) =>
+    node.nodeType === Ci.nsIDOMNode.COMMENT_NODE)[0];
+
+  let onInspectorUpdated = inspector.once("inspector-updated");
+  inspector.selection.setNodeFront(comment);
+  yield onInspectorUpdated;
+
+  is(breadcrumbs.currentIndex, -1,
+    "When comment is selected no breadcrumb should be checked");
+  ok(!breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must not be set");
+
+  onInspectorUpdated = inspector.once("inspector-updated");
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  button.click();
+  yield Promise.all([onInspectorUpdated, onBreadcrumbsUpdated]);
+
+  is(breadcrumbs.currentIndex, checkedButtonIndex,
+    "Same button is selected again");
+  ok(breadcrumbs.outer.hasAttribute("aria-activedescendant"),
+    "Active descendant must be set again");
+}

devtools/client/inspector/test/doc_inspector_breadcrumbs.html

@@ -64,6 +64,7 @@
       <link />
     </article>
     <div id='pseudo-container'></div>
+    <!-- This is a comment node -->
     <svg id="vector" viewBox="0 0 10 10">
       <clipPath id="clip">
         <rect id="rectangle" x="0" y="0" width="10" height="5"></rect>