NOJIRA: provide a label for toc container

fluid-project · Jul 31, 2024 · c6c6e7b · c6c6e7b
1 parent 971b820
commit c6c6e7b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
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
@@ -128,5 +128,10 @@ <h2 class="fluid-5697-exclude">Excluded</h2>
                 <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}"]
+            }
+        }
+    });
+});