Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example

aria-practices.html

@@ -2888,13 +2888,9 @@ <h4>Examples</h4>
             A file selector tree that demonstrates how to explicitly define values for <code>aria-level</code>, <code>aria-posinset</code> and <code>aria-setsize</code>.
           </li>
           <li>
-            <a href="examples/treeview/treeview-2/treeview-2a.html">Navigation Treeview Example Using Computed Properties</a>:
+            <a href="examples/treeview/treeview-navigation.html">Navigation Treeview Example</a>:
             A tree that provides navigation to a set of web pages and demonstrates browser support for automatically computing <code>aria-level</code>, <code>aria-posinset</code> and <code>aria-setsize</code> based on DOM structure.
           </li>
-          <li>
-            <a href="examples/treeview/treeview-2/treeview-2b.html">Navigation Treeview Example Using Declared Properties</a>:
-      A tree that provides navigation to a set of web pages and demonstrates how to explicitly define values for <code>aria-level</code>, <code>aria-posinset</code> and <code>aria-setsize</code>.
-          </li>
         </ul>
       </section>
 

cspell.json

@@ -39,6 +39,7 @@
         "comboboxes",
         "commenters",
         "contenteditable",
+        "contentinfos",
         "Cook'n",
         "Copernicium",
         "Coughlin",
@@ -107,6 +108,7 @@
         "Lewandowski",
         "listbox's",
         "Listboxes",
+        "listitems",
         "Livermorium",
         "Malo",
         "Manish",
@@ -125,7 +127,7 @@
         "Moscovium",
         "MSAA",
         "multithumb",
-        "Navs",
+        "navs",
         "Nemeth",
         "nightmode",
         "Nihonium",

examples/index.html

@@ -49,7 +49,12 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>banner</code></td>
-            <td><a href="landmarks/banner.html">Banner Landmark</a></td>
+            <td>
+              <ul>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
+                <li><a href="landmarks/banner.html">Banner Landmark</a></li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>button</code></td>
@@ -91,7 +96,12 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>contentinfo</code></td>
-            <td><a href="landmarks/contentinfo.html">Contentinfo Landmark</a></td>
+            <td>
+              <ul>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
+                <li><a href="landmarks/contentinfo.html">Contentinfo Landmark</a></li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>dialog</code></td>
@@ -135,8 +145,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
           </tr>
@@ -211,7 +220,12 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
           </tr>
           <tr>
             <td><code>navigation</code></td>
-            <td><a href="landmarks/navigation.html">Navigation Landmark</a></td>
+            <td>
+              <ul>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
+                <li><a href="landmarks/navigation.html">Navigation Landmark</a></li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>none</code></td>
@@ -343,8 +357,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
           </tr>
@@ -358,8 +371,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
           </tr></tbody>
@@ -453,7 +465,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
           </tr>
           <tr>
             <td><code>aria-current</code></td>
-            <td><a href="disclosure/disclosure-navigation.html">Disclosure for Navigation Menus</a></td>
+            <td>
+              <ul>
+                <li><a href="disclosure/disclosure-navigation.html">Disclosure for Navigation Menus</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>aria-describedby</code></td>
@@ -502,8 +519,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="treegrid/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
           </tr>
@@ -571,8 +587,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="treegrid/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
           </tr>
@@ -604,8 +619,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview  Using Computed Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
+                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
                 <li><a href="landmarks/complementary.html">Complementary Landmark</a></li>
                 <li><a href="landmarks/form.html">Form Landmark</a></li>
                 <li><a href="landmarks/main.html">Main Landmark</a></li>
@@ -622,7 +636,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="treegrid/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
               </ul>
             </td>
           </tr>
@@ -656,6 +669,10 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-orientation</code></td>
             <td><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></td>
           </tr>
+          <tr>
+            <td><code>aria-owns</code></td>
+            <td><a href="treeview/treeview-navigation.html">Navigation Treeview</a></td>
+          </tr>
           <tr>
             <td><code>aria-posinset</code></td>
             <td>
@@ -664,7 +681,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="treegrid/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
               </ul>
             </td>
           </tr>
@@ -727,7 +743,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="treegrid/treegrid-1.html">Treegrid Email Inbox</a></li>
                 <li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
                 <li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></li>
-                <li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview  Using Declared Properties</a></li>
               </ul>
             </td>
           </tr>

examples/treeview/css/treeview-navigation.css

@@ -0,0 +1,160 @@
+.page header {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  color: white;
+  text-align: center;
+}
+
+.page header .title {
+  font-size: 2.5em;
+  font-weight: bold;
+  font-family: serif;
+}
+
+.page header .tagline {
+  font-style: italic;
+}
+
+.page footer {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  font-family: serif;
+  color: white;
+  font-style: italic;
+  padding-left: 1em;
+}
+
+.page .body {
+  display: grid;
+  grid-template-columns: auto auto;
+  border: #eee solid 2px;
+}
+
+.page .body nav {
+  margin: 0;
+  padding: 6px;
+  width: 17em;
+  height: 60em;
+  background: #eee;
+}
+
+.page .body nav.focus {
+  padding: 4px;
+  border: 2px solid #005a9c;
+}
+
+.page .body .page {
+  margin: 0.25em;
+  padding: 0.25em;
+  height: 30em;
+}
+
+.page .body .page h1 {
+  margin: 0;
+  padding: 0;
+}
+
+.page .main {
+  padding: 1em;
+}
+
+.treeview-navigation ul,
+.treeview-navigation li {
+  margin: 0;
+  padding: 0;
+}
+
+.treeview-navigation li li span.label {
+  padding-left: 1em;
+}
+
+.treeview-navigation li li li span.label {
+  padding-left: 2em;
+}
+
+.treeview-navigation[role="tree"] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.treeview-navigation[role="tree"] li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.treeview-navigation a[role="treeitem"] ul {
+  margin: 0;
+  padding: 0;
+}
+
+.treeview-navigation
+  a[role="treeitem"][aria-expanded="false"]
+  + [role="group"] {
+  display: none;
+}
+
+.treeview-navigation a[role="treeitem"][aria-expanded="true"] + [role="group"] {
+  display: block;
+}
+
+.treeview-navigation a[role="treeitem"] > span svg {
+  transform: translate(0, 0);
+}
+
+.treeview-navigation a[role="treeitem"][aria-expanded="false"] > span svg {
+  transform: rotate(270deg) translate(2px, 2px);
+}
+
+.treeview-navigation a[role="treeitem"] {
+  margin: 0;
+  padding: 4px;
+  padding-left: 9px;
+  text-decoration: none;
+  color: #005a9c;
+  border: none;
+  display: block;
+}
+
+.treeview-navigation a[role="treeitem"][aria-current] {
+  border-left: 5px solid #005a9c;
+  padding-left: 4px;
+  background-color: #ddd;
+}
+
+.treeview-navigation a[role="treeitem"] span.icon svg polygon {
+  stroke-width: 2px;
+  fill: currentColor;
+  stroke: transparent;
+}
+
+/* disable default keyboard focus styling for treeitems
+   Keyboard focus is styled with the following CSS */
+
+.treeview-navigation a[role="treeitem"]:focus {
+  outline: 0;
+  padding: 2px;
+  padding-left: 7px;
+  border: 2px #005a9c solid;
+}
+
+.treeview-navigation a[role="treeitem"][aria-current]:focus {
+  padding-left: 4px;
+  border-left-width: 5px;
+}
+
+.treeview-navigation a[role="treeitem"]:hover {
+  background-color: #adddff;
+  text-decoration: underline;
+  padding-left: 4px;
+  border-left: 5px solid #333;
+}
+
+.treeview-navigation a[role="treeitem"] span.icon:hover {
+  color: #333;
+}
+
+.treeview-navigation a[role="treeitem"] span.icon svg polygon:hover {
+  stroke: currentColor;
+}