Show reasons why nodes are ignored in accessibility sidebar

Source/devtools/front_end/accessibility/AccessibilitySidebarView.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.ThrottledElementsSidebarView}
  */
 WebInspector.AccessibilitySidebarView = function()
 {
@@ skipping 39 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 WebInspector.AXNodeSubPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Accessibility Node"));
 
     this.registerRequiredCSS("accessibility/accessibilityNode.css");
 
-    this._computedNameElement = this.bodyElement.createChild("div", "ax-computed-name");
+    this._computedNameElement = this.bodyElement.createChild("div", "ax-computed-name hidden");
 
-    this._infoElement = createElementWithClass("div", "info hidden");
-    this._infoElement.textContent = WebInspector.UIString("No Accessibility Node");
-    this.bodyElement.appendChild(this._infoElement);
+    this._noNodeInfo = createElementWithClass("div", "info");
+    this._noNodeInfo.textContent = WebInspector.UIString("No accessibility node");
+    this.bodyElement.appendChild(this._noNodeInfo);
+
+    this._ignoredInfo = createElementWithClass("div", "ax-ignored-info hidden");
+    this._ignoredInfo.textContent = WebInspector.UIString("Accessibility node not exposed");
+    this.bodyElement.appendChild(this._ignoredInfo);
 
     this._treeOutline = new TreeOutlineInShadow('monospace');
     this._treeOutline.registerRequiredCSS("accessibility/accessibilityNode.css");
     this._treeOutline.registerRequiredCSS("components/objectValue.css");
+    this._treeOutline.element.classList.add("hidden");
     this.bodyElement.appendChild(this._treeOutline.element);
+
+    this._ignoredReasonsTree = new TreeOutlineInShadow();
+    this._ignoredReasonsTree.element.classList.add("hidden");
+    this._ignoredReasonsTree.registerRequiredCSS("accessibility/accessibilityNode.css");
+    this._ignoredReasonsTree.registerRequiredCSS("components/objectValue.css");
+    this.bodyElement.appendChild(this._ignoredReasonsTree.element);
 };
 
 
 WebInspector.AXNodeSubPane.prototype = {
     /**
      * @param {!WebInspector.Throttler.FinishCallback} callback
      */
     doUpdate: function(callback)
     {
         /**
@@ skipping 37 matching lines @@
      * @param {?AccessibilityAgent.AXNode} axNode
      */
     _setAXNode: function(axNode)
     {
         if (this._axNode === axNode)
             return;
         this._axNode = axNode;
 
         var treeOutline = this._treeOutline;
         treeOutline.removeChildren();
+        var ignoredReasons = this._ignoredReasonsTree;
+        ignoredReasons.removeChildren();
+
+        var target = this.parentView().parentView().node().target();
 
         if (!axNode) {
             this._computedNameElement.classList.add("hidden");
             treeOutline.element.classList.add("hidden");
-            this._infoElement.classList.remove("hidden");
+            this._ignoredInfo.classList.add("hidden");
+            ignoredReasons.element.classList.add("hidden");
+
+            this._noNodeInfo.classList.remove("hidden");
+            return;
+        } else if (axNode.ignored) {
+            console.log('ignored node:', axNode);
+            this._computedNameElement.classList.add("hidden");
+            this._noNodeInfo.classList.add("hidden");
+            treeOutline.element.classList.add("hidden");
+
+            this._ignoredInfo.classList.remove("hidden");
+            ignoredReasons.element.classList.remove("hidden");
+            function addIgnoredReason(property) {
+                ignoredReasons.appendChild(new WebInspector.AXNodeIgnoredReasonTreeElement(property, target));
+            }
+            var ignoredReasonsArray = /** @type {!Array.<!Object>} */(axNode.ignoredReasons);
+            for (var reason of ignoredReasonsArray) {
+                console.log("ignoredReason: ", reason);
+                addIgnoredReason(reason);
+            }
+            if (!ignoredReasons.firstChild())
+                ignoredReasons.element.classList.add("hidden");
             return;
         }
+        this._ignoredInfo.classList.add("hidden");
+        ignoredReasons.element.classList.add("hidden");
+        this._noNodeInfo.classList.add("hidden");
+
         this._computedNameElement.classList.remove("hidden");
         treeOutline.element.classList.remove("hidden");
-        this._infoElement.classList.add("hidden");
-
-        var target = this.parentView().parentView().node().target();
 
         this._computedNameElement.removeChildren();
         if (axNode.name && axNode.name.value)
             this._computedNameElement.textContent = axNode.name.value;
 
         function addProperty(property)
         {
             treeOutline.appendChild(new WebInspector.AXNodePropertyTreeElement(property, target));
         }
 
         addProperty({name: "role", value: axNode.role});
 
         for (var propertyName of ["description", "help", "value"]) {
             if (propertyName in axNode)
                 addProperty({name: propertyName, value: axNode[propertyName]});
         }
 
         var propertyMap = {};
-        for (var property of axNode.properties)
+        var propertiesArray = /** @type {!Array.<!Object>} */ (axNode.properties);
+        for (var property of propertiesArray)
             propertyMap[property.name] = property;
 
         for (var propertySet of [AccessibilityAgent.AXWidgetAttributes, AccessibilityAgent.AXWidgetStates, AccessibilityAgent.AXGlobalStates, AccessibilityAgent.AXLiveRegionAttributes, AccessibilityAgent.AXRelationshipAttributes]) {
             for (var propertyKey in propertySet) {
                 var property = propertySet[propertyKey];
                 if (property in propertyMap)
                     addProperty(propertyMap[property]);
             }
         }
     },
@@ skipping 192 matching lines @@
 WebInspector.AXNodePropertyTreeElement.TypeStyles = {
     boolean: "object-value-boolean",
     booleanOrUndefined: "object-value-boolean",
     tristate: "object-value-boolean",
     number: "object-value-number",
     integer: "object-value-number",
     string: "object-value-string",
     role: "ax-role",
     internalRole: "ax-internal-role"
 };
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {!AccessibilityAgent.AXProperty} property
+ * @param {!WebInspector.Target} target
+ */
+WebInspector.AXNodeIgnoredReasonTreeElement = function(property, target)
+{
+    this._property = property;
+    this._target = target;
+
+    // Pass an empty title, the title gets made later in onattach.
+    TreeElement.call(this, "");
+    this.toggleOnClick = true;
+    this.selectable = false;
+}
+
+WebInspector.AXNodeIgnoredReasonTreeElement.prototype = {
+    /**
+     * @override
+     */
+    onattach: function()
+    {
+        this._update();

[pfeldman, 2015/04/29 13:59:22]

Inline this method?

[aboxhall, 2015/04/29 19:08:11]

Done.

+    },
+
+
+    _update: function()
+    {
+        this.listItemElement.removeChildren();
+
+        this._reasonElement = WebInspector.AXNodeIgnoredReasonTreeElement.createReasonElement(this._property.name);
+        this.listItemElement.appendChild(this._reasonElement);
+
+        var value = this._property.value;
+        if (value.type === "idref") {
+            this._valueElement = WebInspector.AXNodePropertyTreeElement.createRelationshipValueElement(value, this._target);
+            this.listItemElement.appendChild(this._valueElement);
+        }
+    },
+
+    __proto__: TreeElement.prototype
+};
+
+/**
+ * @param {?string} reason
+ * @return {!Element}
+ */
+WebInspector.AXNodeIgnoredReasonTreeElement.createReasonElement = function(reason)
+{
+    var reasonElement = createElementWithClass("span", "ax-reason");
+    switch(reason) {
+    case "activeModalDialog":
+        reasonElement.innerHTML = "Element is hidden by active modal dialog: ";

[pfeldman, 2015/04/29 13:59:22]

Never ever ever ever use innerHTML =, should be textContent =.

[aboxhall, 2015/04/29 19:08:11]

Done.

+        break;
+    case "ancestorDisallowsChild":
+        reasonElement.innerHTML = "Element is not permitted as child of ";
+        break;
+    // http://www.w3.org/TR/wai-aria/roles#childrenArePresentational
+    case "ancestorIsLeafNode":
+        reasonElement.innerHTML = "Ancestor's children are all presentational: "
+        break;
+    case "ariaHidden":
+        reasonElement.innerHTML = "Element is <span class='source-code'>aria-hidden</span>."
+        break;
+    case "ariaHiddenRoot":
+        reasonElement.innerHTML = "<span class='source-code'>aria-hidden</span> is <span class='source-code'>true</span> on ancestor: "
+        break;
+    case "emptyAlt":
+        reasonElement.innerHTML = "Element has empty alt text."
+        break;
+    case "emptyText":
+        reasonElement.innerHTML = "No text content.";
+        break;
+    case "inert":
+        reasonElement.innerHTML = "Element is inert.";
+        break;
+    case "inheritsPresentation":
+        reasonElement.innerHTML = "Element inherits presentational role from ";
+        break;
+    case "labelContainer":
+        reasonElement.innerHTML = "Part of label element: ";
+        break;
+    case "labelFor":
+        reasonElement.innerHTML = "Label for ";
+        break;
+    case "notRendered":
+        reasonElement.innerHTML = "Element is not rendered.";
+        break;
+    case "notVisible":
+        reasonElement.innerHTML = "Element is not visible.";
+        break;
+    case "presentationRole":
+        reasonElement.innerHTML = "Element has <span clas=\"source-code\">role=presentation</span>.";
+        break;
+    case "probablyPresentational":
+        reasonElement.innerHTML = "Element is presentational.";
+        break;
+    case "staticTextUsedAsNameFor":
+        reasonElement.innerHTML = "Static text node is used as name for ";
+        break;
+    case "uninteresting":
+        reasonElement.innerHTML = "Element not interesting for accessibility."
+        break;
+    }
+
+    return reasonElement;
+}