Treegrid example: Update to use APG Example template for documentatio…

…n (pull #710)

For issue #132 to develop treegrid example:

* Converted documentation to standard APG template format.
* Filled in documentation gaps.
* Changed treegrid label.
* removed use of aria-hidden.

examples/treegrid/css/treegrid-1.css

@@ -6,6 +6,11 @@
 }
 
 #treegrid tr {
+  display: table-row;
+  cursor: default;
+}
+
+#treegrid tbody td {
   cursor: default;
 }
 
@@ -30,18 +35,24 @@
   padding-left: 3ch;
 }
 
-#treegrid :focus {
-  background-color: hsl(230, 60%, 40%);
-  color: white;
-  outline: 0;
+#treegrid a {
+  padding-left: .25ch;
+  padding-right: .25ch;
 }
 
-#treegrid :focus a {
-  color: white;
+#treegrid tr:focus,
+#treegrid td:focus,
+#treegrid a:focus {
+  outline: 2px solid hsl(216, 94%, 70%);
+  background-color: hsl(216, 80%, 97%);
+}
+
+#treegrid a:focus {
+  border-bottom: none;
 }
 
 /* Hide collapsed rows */
-#treegrid tr[aria-hidden="true"] {
+#treegrid tr.hidden {
   display: none;
 }
 
@@ -59,6 +70,7 @@
   padding-left: 10ch;
 }
 
+
 /* Collapse/expand icons */
 #treegrid tr > td:first-child::before {
   font-family: monospace;

examples/treegrid/js/treegrid-1.js

@@ -66,7 +66,7 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) {
   }
 
   function getAllNavigableRows () {
-    var nodeList = treegridElem.querySelectorAll('tbody > tr:not([aria-hidden="true"])');
+    var nodeList = treegridElem.querySelectorAll('tbody > tr:not([class~="hidden"])');
     // Convert to array so that we can use array methods on it
     return Array.prototype.slice.call(nodeList);
   }
@@ -341,10 +341,15 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) {
         doExpandLevel[rowLevel]
         && isExpanded(nextRow);
       var willHideRow = !doExpandLevel[rowLevel];
-      var isRowHidden = nextRow.getAttribute('aria-hidden') === 'true';
+      var isRowHidden = nextRow.classList.contains('hidden');
 
       if (willHideRow !== isRowHidden) {
-        nextRow.setAttribute('aria-hidden', willHideRow);
+        if (willHideRow) {
+          nextRow.classList.add('hidden');
+        }
+        else {
+          nextRow.classList.remove('hidden');
+        }
         didChange = true;
       }
     }
@@ -366,7 +371,7 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) {
     }
   }
 
-  function getAriaExpandedElem(row) {
+  function getAriaExpandedElem (row) {
     return doAllowRowFocus ? row : getNavigableCols(row)[0];
   }