diff --git a/examples/treegrid/js/treegrid-row-nav-primary-1.js b/examples/treegrid/js/treegrid-row-nav-primary-1.js
index ec8eb51fd0..0f7c6d27b7 100644
--- a/examples/treegrid/js/treegrid-row-nav-primary-1.js
+++ b/examples/treegrid/js/treegrid-row-nav-primary-1.js
@@ -1,8 +1,9 @@
-function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
+/* exported TreeGrid */
+function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) {
   function initAttributes () {
     // Make sure focusable elements are not in the tab order
     // They will be added back in for the active row
-    setTabIndexOfFocusableElems(treegrid, -1);
+    setTabIndexOfFocusableElems(treegridElem, -1);
 
     // Add tabindex="0" to first row, "-1" to other rows
     // We will use the roving tabindex method since aria-activedescendant
@@ -44,7 +45,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
   }
 
   function getAllRows () {
-    var nodeList = treegrid.querySelectorAll('tbody > tr');
+    var nodeList = treegridElem.querySelectorAll('tbody > tr');
     return Array.prototype.slice.call(nodeList);
   }
 
@@ -65,7 +66,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
   }
 
   function getAllNavigableRows () {
-    var nodeList = treegrid.querySelectorAll('tbody > tr:not([aria-hidden="true"])');
+    var nodeList = treegridElem.querySelectorAll('tbody > tr:not([aria-hidden="true"])');
     // Convert to array so that we can use array methods on it
     return Array.prototype.slice.call(nodeList);
   }
@@ -83,7 +84,7 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
   }
 
   function focus (elem) {
-    elem.tabIndex = -1; // Ensure focusable
+    elem.tabIndex = 0; // Ensure focusable
     elem.focus();
   }
 
@@ -98,7 +99,8 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
   // one treegrid item to another
   function onFocusIn (event) {
     var newTreeGridFocus =
-      event.target !== window && treegrid.contains(event.target) && event.target;
+      event.target !== window && treegridElem.contains(event.target)
+        && event.target;
 
     // The last row we considered focused
     var oldCurrentRow = enableTabbingInActiveRowDescendants.tabbingRow;
@@ -154,8 +156,8 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
 
   function getContainingRow (start) {
     var possibleRow = start;
-    if (treegrid.contains(possibleRow)) {
-      while (possibleRow !== treegrid) {
+    if (treegridElem.contains(possibleRow)) {
+      while (possibleRow !== treegridElem) {
         if (possibleRow.localName === 'tr') {
           return possibleRow;
         }
@@ -501,34 +503,11 @@ function onReady (treegrid, doAllowRowFocus, doStartRowFocus) {
   }
 
   initAttributes();
-  treegrid.addEventListener('keydown', onKeyDown);
-  treegrid.addEventListener('click', onClick);
-  treegrid.addEventListener('dblclick', onDoubleClick);
+  treegridElem.addEventListener('keydown', onKeyDown);
+  treegridElem.addEventListener('click', onClick);
+  treegridElem.addEventListener('dblclick', onDoubleClick);
   // Polyfill for focusin necessary for Firefox < 52
   window.addEventListener(window.onfocusin ? 'focusin' : 'focus',
     onFocusIn, true);
 }
 
-// Get an object where each field represents a URL parameter
-// e.g. { tab: 33 }
-function getQuery () {
-  if (!getQuery.cached) {
-    getQuery.cached = {};
-    const queryStr = window.location.search.substring(1);
-    const vars = queryStr.split('&');
-    for (let i = 0; i<vars.length; i++) {
-      const pair = vars[i].split('=');
-      // If first entry with this name
-      getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
-    }
-  }
-  return getQuery.cached;
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-  // Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
-  var cellParam = getQuery().cell;
-  var doAllowRowFocus = cellParam !== 'force';
-  var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
-  onReady(document.getElementById('treegrid'), doAllowRowFocus, doStartRowFocus);
-});
diff --git a/examples/treegrid/treegrid-row-nav-primary-1.html b/examples/treegrid/treegrid-row-nav-primary-1.html
index eb7829a74a..6d551b752a 100644
--- a/examples/treegrid/treegrid-row-nav-primary-1.html
+++ b/examples/treegrid/treegrid-row-nav-primary-1.html
@@ -20,7 +20,56 @@
 
 <!--  js and css for this example. -->
 <link href="css/treegrid-row-nav-primary-1.css" rel="stylesheet">
+<style>
+  /* Style the current cell focus option so user know what they're getting */
+  [aria-current] {
+    position: relative;
+    outline: 2px solid green;
+    outline-offset: 3px;
+    background-color: #fffff8;
+  }
+  [aria-current] > a::before {
+    display: inline-block;
+    position: absolute;
+    content: "Current";
+    font-size: 80%;
+    right: -3px;
+    top: -3px;
+    padding: 3px 1ch;
+    background-color: green;
+    color: white;
+    font-weight: bold;
+  }
+</style>
 <script src="js/treegrid-row-nav-primary-1.js" type="text/javascript"></script>
+<script>
+/* Init Script for TreeGrid */
+/* Get an object where each field represents a URL parameter */
+/* global TreeGrid */
+function getQuery () {
+  if (!getQuery.cached) {
+    getQuery.cached = {};
+    const queryStr = window.location.search.substring(1);
+    const vars = queryStr.split('&');
+    for (let i = 0; i<vars.length; i++) {
+      const pair = vars[i].split('=');
+      // If first entry with this name
+      getQuery.cached[pair[0]] = pair[1] && decodeURIComponent(pair[1]);
+    }
+  }
+  return getQuery.cached;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Supports url parameter ?cell=force or ?cell=start (or leave out parameter)
+  var cellParam = getQuery().cell;
+  var doAllowRowFocus = cellParam !== 'force';
+  var doStartRowFocus = doAllowRowFocus && cellParam !== 'start';
+  TreeGrid(document.getElementById('treegrid'), doAllowRowFocus, doStartRowFocus);
+  var choiceElem = document.getElementById('option-cell-focus-' + (cellParam || 'allow'));
+  choiceElem.setAttribute('aria-current', 'true');
+});
+</script>
 </head>
 <body>
   <main>
@@ -40,9 +89,9 @@ <h1>Treegrid Email Inbox Example</h1>
     This same example can be used in three ways.
   </p>
   <ul>
-    <li><a href="./treegrid-row-nav-primary-1.html">Rows are focused first, but cells can be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a tree.</li>
-    <li><a href="./treegrid-row-nav-primary-1.html?cell=start">Cells are focused first, but rows can also be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a grid.</li>
-    <li><a href="./treegrid-row-nav-primary-1.html?cell=force">Only cells can be focused</a>:<br>Useful when we we are primarily a grid, and we want to simplify the user experience by removing row navigation options.</li>
+    <li id="option-cell-focus-allow"><a href="./treegrid-row-nav-primary-1.html">Rows are focused first, but cells can be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a tree.</li>
+    <li id="option-cell-focus-start"><a href="./treegrid-row-nav-primary-1.html?cell=start">Cells are focused first, but rows can also be focused</a>:<br>Useful when we want to present the treegrid to act primarily like a grid.</li>
+    <li id="option-cell-focus-force"><a href="./treegrid-row-nav-primary-1.html?cell=force">Only cells can be focused</a>:<br>Useful when we we are primarily a grid, and we want to simplify the user experience by removing row navigation options.</li>
   </ul>
   <p>
     Note: no row-only version is provided. A row-only navigation version could be useful when the columns are guaranteed to fit horizontally (no horizontal scrolling necessary), the columns are merely for attractive presentation, as opposed to addressing any need to visit them individually. However, in this case the author can simply follow the tree pattern and present the child treeitem data in columns.
@@ -354,11 +403,11 @@ <h2>Javascript and CSS Source Code</h2>
     <ul>
       <li>
         CSS:
-        <a href="css/example_name.css" type="tex/css">example_name.css</a>
+        <a href="css/treegrid-row-nav-primary-1.css" type="tex/css">example_name.css</a>
       </li>
       <li>
         Javascript:
-        <a href="js/example_name.js" type="text/javascript">example_name.js</a>
+        <a href="js/treegrid-row-nav-primary-1.js" type="text/javascript">example_name.js</a>
       </li>
     </ul>
   </section>