Show required indicator for tabs with reuqired multicheckbox fields (Plone 6.0)

src/pat/autotoc/autotoc.js

@@ -139,20 +139,29 @@ export default Base.extend({
     initialize_validation: function ($el) {
         const el = $el[0];
 
-        // Initialize only on pat-validation forms.
-        const form = el.closest("form.pat-validation");
+        // Initialize only on forms
+        const form = el.closest("form");
         if (!form) {
             return;
         }
 
         for (const tab of this.tabs) {
-            if (tab.section.querySelectorAll("[required]").length > 0) {
+            if (
+                tab.section.querySelectorAll(
+                    "label.required, label .required, [required]",
+                ).length > 0
+            ) {
                 tab.nav.classList.add("required");
             } else {
                 tab.nav.classList.remove("required");
             }
         }
 
+        // Initialize the validation css class markings only for pat-validation forms.
+        if (!form.matches(".pat-validation")) {
+            return;
+        }
+
         const debounced_validation_marker = utils.debounce(() => {
             this.validation_marker();
         }, this.options.validationDelay);

src/pat/autotoc/autotoc.test.js

@@ -193,10 +193,16 @@ describe("2 - AutoTOC with tabs", function () {
         const tabs = document.querySelectorAll(".autotoc-nav > a");
         expect(tabs.length).toEqual(3);
 
+        // Reqwuired checks
         expect(tabs[0].classList.contains("required")).toEqual(false);
         expect(tabs[1].classList.contains("required")).toEqual(true);
         expect(tabs[2].classList.contains("required")).toEqual(false);
 
+        // Validation checks
+        expect(tabs[0].classList.contains("invalid")).toEqual(false);
+        expect(tabs[1].classList.contains("invalid")).toEqual(false);
+        expect(tabs[2].classList.contains("invalid")).toEqual(false);
+
         inp1.dispatchEvent(events.change_event());
         inp2.dispatchEvent(events.change_event());
         inp3.dispatchEvent(events.change_event());
@@ -265,4 +271,41 @@ describe("2 - AutoTOC with tabs", function () {
         expect(spy_validation_marker).toHaveBeenCalledTimes(1);
         jest.restoreAllMocks();
     });
+
+    it.skip("2.3 - Also set required for checkboxes or radio buttons, where no required attribute might be set on the input itself but instead on or near the label.", async function () {
+        document.body.innerHTML = `
+            <form class="pat-autotoc"
+                  data-pat-autotoc="
+                      levels: legend;
+                      section: fieldset;
+                      className: autotabs;
+                      validationDelay: 0;
+                  "
+            >
+                <fieldset id="fieldset-1">
+                    <legend>Tab 1</legend>
+                    <label class="required">Input 1</label>
+                </fieldset>
+
+                <fieldset id="fieldset-2">
+                    <legend>Tab 2</legend>
+                    <label>Input 2 <span class="required"/></label>
+                </fieldset>
+
+                <fieldset id="fieldset-3">
+                    <legend>Tab 3</legend>
+                </fieldset>
+            </form>
+        `;
+
+        registry.scan(document.body);
+        await utils.timeout(1);
+
+        const tabs = document.querySelectorAll(".autotoc-nav > a");
+        expect(tabs.length).toEqual(3);
+
+        expect(tabs[0].classList.contains("required")).toEqual(true);
+        expect(tabs[1].classList.contains("required")).toEqual(true);
+        expect(tabs[2].classList.contains("required")).toEqual(false);
+    });
 });