Treegrid Example: Editorial revisions

Revised examples/treegrid/treegrid-1.html based on feedback from @annabbott and @charmarkk in issue #132.

examples/treegrid/treegrid-1.html

@@ -95,7 +95,7 @@ <h1>Treegrid Email Inbox Example</h1>
     <li><a href="../treeview/treeview-2/treeview-2a.html">Navigation Treeview using <em>computed</em> properties</a></li>
     <li><a href="../treeview/treeview-2/treeview-2b.html">Navigation Treeview using <em>declared</em> properties</a></li>
   </ul>
-  <h2>Example Useage Options</h2>
+  <h2>Example Usage Options</h2>
   <p>
     This example demonstrates three different ways of implementing the keyboard navigation specified in the treegrid pattern.
     The following links change the behavior of the navigation keys :
@@ -177,7 +177,7 @@ <h2 id="ex_label">Example</h2>
           </tr>
           <tr role="row" aria-level="3" aria-posinset="1" aria-setsize="1" aria-expanded="false" class="hidden">
              <td role="gridcell">re: Treegrids are awesome</td>
-             <td role="gridcell">Sometimes they are more like trees, otherse are more like grids</td>
+             <td role="gridcell">Sometimes they are more like trees, others are more like grids</td>
              <td role="gridcell"><a href="mailto:mari@beingpractical.com">mari@beingpractical.com</a></td>
           </tr>
           <tr role="row" aria-level="4" aria-posinset="1" aria-setsize="2" class="hidden">
@@ -200,7 +200,11 @@ <h2 id="ex_label">Example</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-
+    <p>
+      <strong>NOTE:</strong> The following table describes keyboard commands that move focus among grid cells.
+      In the examples on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
+      So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.     
+    </p>
      <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
@@ -263,9 +267,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </th>
         <td>
           <ul>
-            <li>Moves focus to the next interactive cell in the current row.</li>
-            <li>If there are no more interactive cells in the current row,
-              moves out of the treegrid.</li>
+            <li>Moves focus to the next interactive widget in the current row.</li>
+            <li>If there are no more interactive widgets in the current row, moves focus out of the treegrid.</li>
           </ul>
         </td>
       </tr>
@@ -275,8 +278,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </th>
         <td>
           <ul>
-            <li>If a cell is focused, moves focus to the previous interactive cell in the current row.</li>
-            <li>If a row is focused, moves out of the treegrid.</li>
+            <li>If a cell is focused, moves focus to the previous interactive widget in the current row.</li>
+            <li>If a row is focused, moves focus out of the treegrid.</li>
           </ul>
         </td>
       </tr>
@@ -287,7 +290,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
         <td>
           <ul>
             <li>If a row is focused, moves to the first row.</li>
-            <li>If a cell is focused, moves focus to the row's first cell.</li>
+            <li>If a cell is focused, moves focus to the first cell in the row containing focus.</li>
           </ul>
         </td>
       </tr>
@@ -298,7 +301,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
         <td>
           <ul>
             <li>If a row is focused, moves to the last row.</li>
-            <li>If a cell is focused, moves focus to the row's last cell.</li>
+            <li>If a cell is focused, moves focus to the last cell in the row containing focus.</li>
           </ul>
         </td>
       </tr>
@@ -308,9 +311,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </th>
         <td>
           <ul>
-            <li>Moves focus to the first row.</li>
-            <li>If a cell was focused, focus is kept in the same column,
-              otherwise the entire first row is focused.</li>
+            <li>If a row has focus, moves focus to the first row.</li>
+            <li>If a cell has focus, moves focus to the cell in the first row in the same column as the cell that had focus.</li>
           </ul>
         </td>
       </tr>
@@ -320,9 +322,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </th>
         <td>
           <ul>
-            <li>Moves focus to the last row.</li>
-            <li>If a cell was focused, focus is kept in the same column,
-              otherwise the entire last row is focused.</li>
+            <li>If a row has focus, moves focus to the last row.</li>
+            <li>If a cell has focus, moves focus to the cell in the last row in the same column as the cell that had focus.</li>
           </ul>
         </td>
       </tr>
@@ -332,9 +333,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </th>
         <td>
           <ul>
-            <li>Performs default action on row or cell, e.g. opens message or navigate to link.</li>
-            <li>If focus is on the cell with the expand/collapse button, and there is no other action,
-              will toggle expansion of the current row.</li>
+            <li>Performs default action associated with row or cell that has focus, e.g. opens message or navigate to link.</li>
+            <li>If focus is on the cell with the expand/collapse button, and there is no other action, will toggle expansion of the current row.</li>
           </ul>
         </td>
       </tr>