Merge pull request #1108 from jobara/FLUID-5098

FLUID-5098: Identify ToC container in demos
fluid-project · Dec 4, 2024 · 41fe77a · 41fe77a
2 parents 9dfe6ec + 18f0cf6
commit 41fe77a
Show file tree

Hide file tree

Showing 24 changed files with 85 additions and 37 deletions.
diff --git a/demos/prefsFramework/index.html b/demos/prefsFramework/index.html
@@ -133,6 +133,10 @@
 
         <section class="flc-overviewPanel fl-overviewPanel-container"></section>
         <!-- BEGIN markup for Preference Editor -->
+        <!--
+            NOTE: When using the Table of Contents preference a container for the table of contents  will also need to
+                  be added to the page. An example of this is included below.
+        -->
         <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
             <!--
                 This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
@@ -163,7 +167,9 @@
 
         <div id="content" class="demo-content">
             <div id="container">
-                <div class="flc-toc-tocContainer toc"> </div>
+                <!-- BEGIN markup for Table of Contents container -->
+                <nav class="flc-toc-tocContainer toc"> </nav>
+                <!-- END markup for Table of Contents container -->
 
                 <header id="header" class="dotGovSub">
                     <div id="headTitle">

diff --git a/demos/uiOptions/index.html b/demos/uiOptions/index.html
@@ -100,6 +100,10 @@
 
         <section class="flc-overviewPanel fl-overviewPanel-container"></section>
         <!-- BEGIN markup for Preference Editor -->
+        <!--
+            NOTE: When using the Table of Contents preference a container for the table of contents  will also need to
+                  be added to the page. An example of this is included within the `<main>` element below.
+        -->
         <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
             <!--
                 This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
@@ -129,7 +133,9 @@
         <!-- END markup for Preference Editor -->
 
         <main class="fl-centered">
-            <div class="flc-toc-tocContainer toc"> </div>
+            <!-- BEGIN markup for Table of Contents container -->
+            <nav class="flc-toc-tocContainer toc"> </nav>
+            <!-- END markup for Table of Contents container -->
 
             <div class="header">
                 <h1>Preferences Editor</h1>

diff --git a/examples/framework/preferences/fullPagePanelStyle/index.html b/examples/framework/preferences/fullPagePanelStyle/index.html
@@ -59,7 +59,7 @@
 
     <body class="fl-prefsEditor-separatedPanel fl-focus">
         <div class="flc-prefsEditor-panelStyle"></div>
-        <div class="flc-toc-tocContainer"></div>
+        <nav class="flc-toc-tocContainer"></nav>
 
         <script>
             fluid.uiOptions(".flc-prefsEditor-panelStyle", {

diff --git a/examples/framework/preferences/minimalFootprint/fullPage.html b/examples/framework/preferences/minimalFootprint/fullPage.html
@@ -27,7 +27,7 @@
         <script src="../../../../src/lib/jquery/core/js/jquery.js"></script>
         <script src="../../../../src/lib/jquery/ui/js/version.js"></script>
         <script src="../../../../src/lib/jquery/ui/js/keycode.js"></script>
-        
+
         <script src="../../../../src/framework/core/js/jquery.keyboard-a11y.js"></script>
         <script src="../../../../src/framework/core/js/Fluid.js"></script>
         <script src="../../../../src/framework/core/js/FluidPromises.js"></script>
@@ -70,8 +70,8 @@
                 <a href="index.html">To Content</a>
             </div>
             <div class="fl-hidden">
-                <div class="flc-toc-tocContainer">
-                </div>
+                <nav class="flc-toc-tocContainer">
+                </nav>
             </div>
 
             <h1>Preferences Editor: Full Page</h1>

diff --git a/examples/framework/preferences/minimalFootprint/html/prefsEditorPreview.html b/examples/framework/preferences/minimalFootprint/html/prefsEditorPreview.html
@@ -15,7 +15,7 @@
             <a href="#">Go To Display Preferences</a>
         </div>
         <main class="fl-centered">
-            <div class="flc-toc-tocContainer toc"> </div>
+            <nav class="flc-toc-tocContainer toc"> </nav>
 
             <h1>Minimal Footprint - Preferences Framework</h1>
 

diff --git a/examples/framework/preferences/minimalFootprint/index.html b/examples/framework/preferences/minimalFootprint/index.html
@@ -17,7 +17,7 @@
             <a href="fullPage.html">Go To Display Preferences</a>
         </div>
         <main class="fl-centered">
-            <div class="flc-toc-tocContainer toc"> </div>
+            <nav class="flc-toc-tocContainer toc"> </nav>
 
             <script>
 

diff --git a/src/components/tableOfContents/js/TableOfContents.js b/src/components/tableOfContents/js/TableOfContents.js
@@ -121,6 +121,12 @@ fluid.defaults("fluid.tableOfContents", {
         }
     },
     listeners: {
+        "onCreate.setLabel": {
+            "this": "{that}.dom.tocContainer",
+            "method": "attr",
+            "args": ["aria-label", "{that}.options.strings.tocHeader"],
+            "priority": "before:refreshView"
+        },
         "onCreate.refreshView": {
             func: "{that}.refreshView",
             // New for FLUID-6148: Make sure we do not try to refresh view until after "levels" subcomponent is constructed

diff --git a/tests/component-tests/tableOfContents/html/TableOfContents-test.html b/tests/component-tests/tableOfContents/html/TableOfContents-test.html
@@ -51,7 +51,7 @@ <h2 id="qunit-userAgent"></h2>
         <!-- Test HTML -->
         <div id="qunit-fixture" >
             <div id="flc-toc">
-                <div class="flc-toc-tocContainer toc"></div>
+                <nav class="flc-toc-tocContainer toc"></nav>
 
                 <h1 id="amphibians">Amphibians</h1>
                 <p>
@@ -102,7 +102,7 @@ <h3>CATT</h3>
         </div>
 
         <div id="flc-toc-noHeaders">
-            <div class="flc-toc-tocContainer toc"></div>
+            <nav class="flc-toc-tocContainer toc"></nav>
             <p>Paragraph 1</p>
             <div>
                 <p>Paragraph 2</p>
@@ -111,22 +111,27 @@ <h3>CATT</h3>
         </div>
 
         <div id="flc-toc-refreshHeadings">
-            <div class="flc-toc-tocContainer toc"></div>
+            <nav class="flc-toc-tocContainer toc"></nav>
             <h2>H2</h2>
         </div>
 
         <div id="flc-toc-l10n">
-            <div class="flc-toc-tocContainer toc"></div>
+            <nav class="flc-toc-tocContainer toc"></nav>
             <h2>L10N</h2>
         </div>
 
         <div id="fluid-5697">
-            <div class="flc-toc-tocContainer toc"></div>
+            <nav class="flc-toc-tocContainer toc"></nav>
             <h2>Included</h2>
             <h2 class="fluid-5697-exclude">Excluded</h2>
             <section class="fluid-5697-exclude">
                 <h3>Excluded</h3>
             </section>
         </div>
+
+        <div id="flc-toc-nav-label">
+            <nav class="flc-toc-tocContainer toc"></nav>
+            <h2>Nav Label Test</h2>
+        </div>
     </body>
 </html>
diff --git a/tests/component-tests/tableOfContents/js/TableOfContentsTests.js b/tests/component-tests/tableOfContents/js/TableOfContentsTests.js
@@ -610,3 +610,21 @@ jqUnit.asyncTest("FLUID-5697: Header exclusion", function () {
         }
     });
 });
+
+
+jqUnit.asyncTest("Table of Contents nav label", function () {
+    fluid.tableOfContents("#flc-toc-nav-label", {
+        strings: {
+            tocHeader: "Test ToC label"
+        },
+        listeners: {
+            onReady: {
+                listener: function (that) {
+                    jqUnit.assertEquals("The toc container should have an aria-label", that.options.strings.tocHeader, that.locate("tocContainer").attr("aria-label"));
+                    jqUnit.start();
+                },
+                args: ["{that}"]
+            }
+        }
+    });
+});
diff --git a/tests/component-tests/uiOptions/html/UIOptions-test.html b/tests/component-tests/uiOptions/html/UIOptions-test.html
@@ -104,7 +104,7 @@ <h2 id="qunit-userAgent"></h2>
         <!-- END markup for Preference Editor -->
 
         <!-- Markup for table of contents -->
-        <div class="flc-toc-tocContainer toc"> </div>
+        <nav class="flc-toc-tocContainer toc"> </nav>
     </div>
     </body>
 </html>
diff --git a/tests/framework-tests/preferences/html/Builder-test.html b/tests/framework-tests/preferences/html/Builder-test.html
@@ -73,7 +73,7 @@ <h2 id="qunit-banner"></h2>
         <h2 id="qunit-userAgent"></h2>
         <ol id="qunit-tests"></ol>
 
-        <div class="flc-toc-tocContainer"></div>
+        <nav class="flc-toc-tocContainer"></nav>
         <div id="flc-prefsEditor"></div>
         <div class="flc-prefs-builder"></div>
         <div class="fluid-tests-composite-prefsEditor"></div>

diff --git a/tests/framework-tests/preferences/html/Enactors-test.html b/tests/framework-tests/preferences/html/Enactors-test.html
@@ -91,7 +91,7 @@ <h2 id="qunit-userAgent"></h2>
 
         <div class="flc-tableOfContents">
             <!-- FLUID-6696: setting to display: none to ensure that the ToC container is visible after init -->
-            <div class="flc-toc-tocContainer" style="display: none"></div>
+            <nav class="flc-toc-tocContainer" style="display: none"></nav>
             <h1>Heading 1</h1>
             <h2>Heading 1.1</h2>
             <h1>Heading 2</h1>

diff --git a/tests/framework-tests/preferences/html/FullNoPreviewPrefsEditor-test.html b/tests/framework-tests/preferences/html/FullNoPreviewPrefsEditor-test.html
@@ -69,7 +69,7 @@ <h2 id="qunit-userAgent"></h2>
 
     <!-- Test HTML -->
     <div id="qunit-fixture">
-        <div class="flc-toc-tocContainer toc"></div>
+        <nav class="flc-toc-tocContainer toc"></nav>
         <div id="myPrefsEditor" ></div>
     </div>
 

diff --git a/tests/framework-tests/preferences/html/FullPreviewPrefsEditor-test.html b/tests/framework-tests/preferences/html/FullPreviewPrefsEditor-test.html
@@ -69,7 +69,7 @@ <h2 id="qunit-userAgent"></h2>
 
     <!-- Test HTML -->
     <div id="qunit-fixture">
-        <div class="flc-toc-tocContainer toc"></div>
+        <nav class="flc-toc-tocContainer toc"></nav>
         <div id="myPrefsEditor" ></div>
     </div>
 

diff --git a/tests/framework-tests/preferences/html/LocalizationPrefsEditor-test.html b/tests/framework-tests/preferences/html/LocalizationPrefsEditor-test.html
@@ -86,8 +86,8 @@ <h2 id="qunit-userAgent"></h2>
             </div>
         </div>
 
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <div id="main">
             <h1>Some Sample Title</h1>

diff --git a/tests/framework-tests/preferences/html/PageEnhancer-test.html b/tests/framework-tests/preferences/html/PageEnhancer-test.html
@@ -54,8 +54,8 @@ <h2 id="qunit-userAgent"></h2>
 
     <!-- Test HTML -->
     <div id="qunit-fixture" class="container fl-font-times">
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <h1>This heading is to test TOC and link creation</h1>
 

diff --git a/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditor-test.html b/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditor-test.html
@@ -88,8 +88,8 @@ <h2 id="qunit-userAgent"></h2>
             </div>
         </div>
 
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <div id="main">
             <h1>Some Sample Title</h1>

diff --git a/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsiveTestPage.html b/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsiveTestPage.html
@@ -42,8 +42,8 @@
         </div>
         <!-- END markup for Preference Editor -->
 
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <div id="main">
             <h1>Some Sample Title</h1>

diff --git a/tests/framework-tests/preferences/html/TestPreviewTemplate.html b/tests/framework-tests/preferences/html/TestPreviewTemplate.html
@@ -5,8 +5,8 @@
     </head>
     <body>
     <!-- TODO: This needs to be here otherwise TOC will simply fail -->
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
         <h1>A test heading to provoke Table of Contents</h1>
         <p>Hello, Preferences Editor!</p>
     </body>

diff --git a/tests/framework-tests/preferences/html/UIEnhancer-test.html b/tests/framework-tests/preferences/html/UIEnhancer-test.html
@@ -59,8 +59,8 @@ <h2 id="qunit-userAgent"></h2>
 
     <!-- Test HTML -->
     <div id="qunit-fixture" class="container">
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <h1>This heading is to test TOC and link creation</h1>
 

diff --git a/tests/manual-tests/framework/preferences/assortedContent/index.html b/tests/manual-tests/framework/preferences/assortedContent/index.html
@@ -66,6 +66,10 @@
 
     <body class="assortedContent-theme-basic fl-focus">
         <!-- BEGIN markup for Preference Editor -->
+        <!--
+            NOTE: When using the Table of Contents preference a container for the table of contents  will also need to
+                  be added to the page. An example of this is included within the `<main>` element below.
+        -->
         <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
             <!--
                 This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
@@ -113,7 +117,10 @@ <h2>Instructions</h2>
                 <h1>HTML 5 Cheat Sheet</h1>
             </header>
 
-            <nav class="flc-toc-tocContainer toc"></nav>
+            <!-- BEGIN markup for Table of Contents container -->
+            <nav class="flc-toc-tocContainer toc"> </nav>
+            <!-- END markup for Table of Contents container -->
+
             <article>
                 <h2>HTML 5</h2>
                 <p class="intro fl-centered">

diff --git a/tests/manual-tests/framework/preferences/fullPage-schema/index.html b/tests/manual-tests/framework/preferences/fullPage-schema/index.html
@@ -81,8 +81,8 @@ <h2>Instructions</h2>
 
         <main class="content">
             <div class="fl-hidden">
-                <div class="flc-toc-tocContainer">
-                </div>
+                <nav class="flc-toc-tocContainer">
+                </nav>
             </div>
 
             <h1>Preferences Editor: Full Page using Schema</h1>

diff --git a/tests/manual-tests/framework/preferences/fullPage/index.html b/tests/manual-tests/framework/preferences/fullPage/index.html
@@ -92,8 +92,8 @@ <h2>Instructions</h2>
 
         <main class="content">
             <div class="fl-hidden">
-                <div class="flc-toc-tocContainer">
-                </div>
+                <nav class="flc-toc-tocContainer">
+                </nav>
             </div>
 
             <h1>Preferences Editor: Full Page</h1>

diff --git a/tests/manual-tests/framework/preferences/shared/html/prefsEditorPreview.html b/tests/manual-tests/framework/preferences/shared/html/prefsEditorPreview.html
@@ -14,8 +14,8 @@
 
     <body class="prefsEditor-demo-theme fl-focus">
 
-        <div class="flc-toc-tocContainer toc">
-        </div>
+        <nav class="flc-toc-tocContainer toc">
+        </nav>
 
         <div class="fl-centered">
             <div class="fl-fix header">