From 61b428dd4d4a41fd5cadc6dc3e4a64f9396431be Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 11 Jul 2018 02:40:48 -0700
Subject: [PATCH] Layout Grid Examples: Fix problems described in issue 758

modified examples/grid/LayoutGrids.html
to fix the following problems described in issue #758.

Problem 1: tabindex="-1" is not only applied to span elements. It is applied to div as well.

Resolution 1:
Updated documentation of tabindex.
Made it consistent with descriptions of roving tabindex in other examples.
Added documentation of tabindex=0 as well.

Problem 2: The definition of the word "cell" is not consistent between the attribute table and the keyboard table.

Resolution 2: Added a note above the keyboard table describing how cell is used.
---
 examples/grid/LayoutGrids.html | 36 ++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)
diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html
index e5e35f987e..2ffa1bd1ee 100644
--- a/examples/grid/LayoutGrids.html
+++ b/examples/grid/LayoutGrids.html
@@ -447,6 +447,11 @@ <h2>Other Features</h2>
   </section>
   <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>
@@ -636,17 +641,20 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         <tr>
           <th scope="row"><code>gridcell</code></th>
           <td></td>
-          <td><code>span</code></td>
+          <td><code>span, div</code></td>
           <td>Identifies the element containing the content for a single cell.</td>
         </tr>
         <tr>
           <td></td>
           <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
-          <td><code>span</code></td>
+          <td><code>span, div</code></td>
           <td>
             <ul>
-              <li>Makes the cell focusable.</li>
-              <li>Applied only to cells that do not contain an interactive widget that consumes arrow keys, such as a link or button.</li>
+              <li>Makes the cell focusable and excludes it from the page <kbd>Tab</kbd> sequence.</li>
+              <li>Applied to all cells that do not contain an interactive widget that consumes arrow keys, such as a link or button.</li>
+              <li>Changed dynamically to <code>0</code> by the JavaScript when the cell is to be included in the page <kbd>Tab</kbd> sequence.</li>
+              <li>At any given time, only one of the cells or widgets within the grid is in the page <kbd>Tab</kbd> sequence.</li>
+              <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
             </ul>
           </td>
         </tr>
@@ -656,8 +664,24 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           <td>Widgets inside cells</td>
           <td>
             <ul>
-              <li>Makes the widget, e.g., link or button,  focusable.</li>
-              <li>Keyboard navigation and clicks focus the widget if the containing cell is not focusable.</li>
+              <li>Makes the widget, e.g., link or button,  focusable and excludes it from the page <kbd>Tab</kbd> sequence.</li>
+              <li>Clicks and keyboard commands that move focus inside the grid can focus widgets if the containing cell is not focusable.</li>
+              <li>Changed dynamically to <code>0</code> by the JavaScript when the widget is to be included in the page <kbd>Tab</kbd> sequence.</li>
+              <li>At any given time, only one of the cells or widgets within the grid is in the page <kbd>Tab</kbd> sequence.</li>
+              <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+            </ul>
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <th scope="row"><code>tabindex=&quot;0&quot;</code></th>
+          <td>span, div, or if present, widget inside cell</td>
+          <td>
+            <ul>
+              <li>Makes the element focusable and includes it in the page <kbd>Tab</kbd> sequence.</li>
+              <li>Set dynamically by the JavaScript when the element is to be included in the page <kbd>Tab</kbd> sequence.</li>
+              <li>At any given time, only one element within the grid is in the page <kbd>Tab</kbd> sequence.</li>
+              <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
             </ul>
           </td>
         </tr>

`gridcell`		`span`	`span, div`	Identifies the element containing the content for a single cell.
	`tabindex="-1"`	`span`	`span, div`	- Makes the cell focusable. - Applied only to cells that do not contain an interactive widget that consumes arrow keys, such as a link or button. + Makes the cell focusable and excludes it from the page `Tab` sequence. + Applied to all cells that do not contain an interactive widget that consumes arrow keys, such as a link or button. + Changed dynamically to `0` by the JavaScript when the cell is to be included in the page `Tab` sequence. + At any given time, only one of the cells or widgets within the grid is in the page `Tab` sequence. + This approach to managing focus is described in the section on roving tabindex.
Widgets inside cells	- Makes the widget, e.g., link or button, focusable. - Keyboard navigation and clicks focus the widget if the containing cell is not focusable. + Makes the widget, e.g., link or button, focusable and excludes it from the page `Tab` sequence. + Clicks and keyboard commands that move focus inside the grid can focus widgets if the containing cell is not focusable. + Changed dynamically to `0` by the JavaScript when the widget is to be included in the page `Tab` sequence. + At any given time, only one of the cells or widgets within the grid is in the page `Tab` sequence. + This approach to managing focus is described in the section on roving tabindex. + +
	`tabindex="0"`	span, div, or if present, widget inside cell	+ + Makes the element focusable and includes it in the page `Tab` sequence. + Set dynamically by the JavaScript when the element is to be included in the page `Tab` sequence. + At any given time, only one element within the grid is in the page `Tab` sequence. + This approach to managing focus is described in the section on roving tabindex.