Focus on first visible field in form and in navigable layouts

Pavitra Khatri · ci-build · commit 20ddad4d7ccf · 2025-01-29T06:13:42.000Z
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js
@@ -87,7 +87,7 @@
                 }
             }
 
-
+            
             /**
              * Returns all expanded items.
              *
@@ -225,6 +225,17 @@
                     panel.classList.add(this.constructor.cssClasses.panel.expanded);
                     panel.classList.remove(this.constructor.cssClasses.panel.hidden);
                     panel.setAttribute("aria-hidden", false);
+
+                    if (document.activeElement === button) {
+                        setTimeout(() => {
+                           let id = panel.id.replace(this.constructor.idSuffixes.panel, "");
+                           const form = this.formContainer.getModel();
+                           const field = form.getElement(id);
+                           if (field) {
+                             form.setFocus(field);
+                           }
+                    }, 0)
+                  }
                 }
             }
 
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js
@@ -89,13 +89,6 @@
                 return this.element.querySelector(Accordion.selectors.qm);
             }
 
-            setFocus(id) {
-                super.setFocus(id);
-                this.setActive();
-                this.#collapseAllItems();
-                const item = this.getItemById(id + '-item');
-                this.expandItem(item)
-            }
 
 
             #collapseAllItems() {
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js
@@ -124,6 +124,17 @@
             let formContainer =  e.detail;
             let formEl = formContainer.getFormElement();
             formContainer.initialiseHamburgerMenu();
+           
+            const fields = formEl.querySelectorAll("[data-cmp-is]");
+            const firstVisibleField = Array.from(fields).find(field => {
+                return field.getAttribute("data-cmp-visible") === "true" && field.getAttribute("data-cmp-enabled") === "true" && !field.closest("[data-cmp-visible='false']");
+            });
+            
+            const form = formContainer.getModel();
+            const field = form?.getElement(firstVisibleField?.id);
+            if (form && field) {
+                form.setFocus(field);
+            }
             setTimeout(() => {
                 let loaderToRemove = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ formEl.id + "']");
                 if(loaderToRemove){
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js
@@ -199,6 +199,12 @@
             }
 
 
+            getFocusElementId() {
+                const activeIndex = this._active;
+                const activeTabElement = this.getCachedTabs()[activeIndex];
+                return activeTabElement.id.substring(0, activeTabElement.id.lastIndexOf(Wizard.#tabIdSuffix));
+            }
+
             #navigateToNextTab() {
                 const activeIndex = this._active;
                 const activeTabElement = this.getCachedTabs()[activeIndex];
@@ -334,6 +340,8 @@
             #navigateAndFocusTab(index) {
                 this.navigate(index);
                 this.focusWithoutScroll(this.getCachedTabs()[index]);
+                const id = this.getFocusElementId();
+                this.focusToFirstVisibleField(id);
             }
    
             #syncWizardNavLabels() {
diff --git a/ui.frontend/src/view/FormPanel.js b/ui.frontend/src/view/FormPanel.js
@@ -76,6 +76,14 @@ class FormPanel extends FormFieldBase {
         }
     }
 
+    focusToFirstVisibleField(id) {
+        const form = this.formContainer.getModel();
+        const field = form.getElement(id);
+        if (field) {
+            form.setFocus(field);
+        }
+    }
+
     /**
      * Adds a child view to the FormPanel.
      * @param {Object} childView - The child view to be added.
diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js
@@ -249,11 +249,12 @@ class FormTabs extends FormPanel {
         if (this.#_active !== tabId) {
             this.navigate(tabId);
             this.focusWithoutScroll(this.#getTabNavElementById(tabId));
+            const id = this.getActiveTabId(this.#getCachedTabs()).replace(this.#tabIdSuffix,"");
+            this.focusToFirstVisibleField(id);
         }
     }
 
 
-
     #getTabNavElementById(tabId) {
         var tabs = this.#getCachedTabs();
         if (tabs) {
@@ -328,7 +329,6 @@ class FormTabs extends FormPanel {
         }
     }
 
-
     /**
      * Synchronizes tab labels with their corresponding tab panels.
      * Updates the ID and aria-controls attribute of each tab label.
diff --git a/ui.tests/test-module/specs/accordion/accordion.runtime.cy.js b/ui.tests/test-module/specs/accordion/accordion.runtime.cy.js
@@ -197,7 +197,6 @@ describe("Form with Accordion Layout Container with focus", () => {
             cy.get(`#${secondChildComponentButtonId}`).should('have.class', 'cmp-accordion__button--expanded');
             cy.get(`#${firstChildComponentButtonId}`).should('not.have.class', 'cmp-accordion__button--expanded');
             cy.get(`#${firstChildComponentPanelId}`).should('not.have.class', 'cmp-accordion__panel--expanded');
-
             cy.get(`#${firstChildComponentButtonId}`).then(() => {
                 formContainer.setFocus(id);
                 cy.get(`#${firstChildComponentButtonId}`).isElementInViewport().should("eq", true);
@@ -212,6 +211,27 @@ describe("Form with Accordion Layout Container with focus", () => {
             });
         });
     });
+
+    it("on clicking of expand button, focus should be visible on first component in the current tab ", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        const firstChildComponentId = formContainer._model.items[0].items[0].id;
+        const firstChildComponentButtonId = firstChildComponentId + "-button";
+        const firstChildComponentPanelId = firstChildComponentId + "-panel";
+
+        const secondChildComponentId = formContainer._model.items[0].items[1].id;
+        const secondChildComponentButtonId = secondChildComponentId + "-button";
+        const secondChildComponentPanelId = secondChildComponentId + "-panel";
+
+        cy.get(`#${secondChildComponentButtonId}`).click({force: true}).then(() => {
+            cy.get('input[name="textinputfa2"]').should('be.focused');
+            cy.get(`#${secondChildComponentPanelId}`).should('have.class', 'cmp-accordion__panel--expanded');
+        })
+
+        cy.get(`#${firstChildComponentButtonId}`).click({force: true}).then(() => {
+            cy.get('input[name="textinputfa1"]').should('be.focused');
+            cy.get(`#${firstChildComponentPanelId}`).should('have.class', 'cmp-accordion__panel--expanded');
+        })
+    })
 });
 
 describe("Form with Accordion Layout Container with Hidden Children", () => {
diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js
@@ -67,6 +67,7 @@ describe("Form with Panel Container", () => {
 
     it(" model's changes are reflected in the html ", () => {
         const tabId = formContainer._model.items[0].items[0].id;
+        console.log(tabId, 'test-id')
         const model = formContainer._model.getElement(tabId);
         const tabView = formContainer.getAllFields()[tabId];
         const count = 2;
@@ -167,6 +168,30 @@ describe("Form with Tabsontop Layout Container with focus", () => {
 
     });
 
+    it("first component should always be focused in the form", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        tab1().should('have.class', 'cmp-tabs__tab--active');
+        tab1().should('have.attr', 'aria-selected', 'true');
+        tab2().should('have.attr', 'aria-selected', 'false');
+        cy.get('input[name="textinputft1"]').should('be.focused');
+    })
+
+    it("focus should be on the first component when navigated to the next tab", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        tab2().click().then(() => {
+            tab2().should('have.class', 'cmp-tabs__tab--active');
+            tab2().should('have.attr', 'aria-selected', 'true');
+            cy.get('input[name="textinputft2"]').should('be.focused');
+            tab1().should('have.attr', 'aria-selected', 'false');
+        });
+        tab1().click().then(() => {
+            tab1().should('have.class', 'cmp-tabs__tab--active');
+            tab1().should('have.attr', 'aria-selected', 'true');
+            cy.get('input[name="textinputft1"]').should('be.focused');
+            tab2().should('have.attr', 'aria-selected', 'false');
+        });
+    })
+
 
 });
 describe("Form with TabsOnTop Layout Container with Hidden Children", () => {
diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js
@@ -273,6 +273,29 @@ describe("Form with Wizard Layout Container with focus", () => {
         });
     });
 
+    it("First component should always have focus", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+        cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
+        cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
+        cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+        cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+        cy.get('input[name="textinputfw1"]').should('be.focused');
+        cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}).then(() => {
+            cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
+            cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
+            cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+            cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+            cy.get('input[name="textinputfw2"]').should('be.focused');
+        });
+        cy.get(".cmp-adaptiveform-wizard__nav--previous").click({force: true}).then(() => {
+            cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
+            cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
+            cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+            cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+            cy.get('input[name="textinputfw1"]').should('be.focused');
+        });
+    })
+
 });
 
 describe("Form with wizard Layout Container with Hidden Children", () => {
@@ -290,8 +313,10 @@ describe("Form with wizard Layout Container with Hidden Children", () => {
 
         const firstItemNavOfWizardId = formContainer._model.items[0].items[0].id + "_wizard-item-nav";
         const firstItemOfWizardId = formContainer._model.items[0].items[0].id + "__wizardpanel";
+        console.log(firstItemOfWizardId, 'item-id')
         const secondItemNavOfWizardId = formContainer._model.items[0].items[1].id + "_wizard-item-nav";
         const secondItemOfWizardId = formContainer._model.items[0].items[1].id + "__wizardpanel";
+        console.log(secondItemOfWizardId, 'second-id')
 
         cy.get(`#${firstItemNavOfWizardId}`).should('have.attr', 'data-cmp-visible', 'false');
         cy.get(`#${firstItemOfWizardId}`).should('have.attr', 'aria-hidden', 'true');

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`	`}`
`88`	`88`	`}`
`89`	`89`
`90`		`-`
	`90`	`+`
`91`	`91`	`/**`
`92`	`92`	`* Returns all expanded items.`
`93`	`93`	`*`
`@@ -225,6 +225,17 @@`
`225`	`225`	`panel.classList.add(this.constructor.cssClasses.panel.expanded);`
`226`	`226`	`panel.classList.remove(this.constructor.cssClasses.panel.hidden);`
`227`	`227`	`panel.setAttribute("aria-hidden", false);`
	`228`	`+`
	`229`	`+ if (document.activeElement === button) {`
	`230`	`+ setTimeout(() => {`
	`231`	`+ let id = panel.id.replace(this.constructor.idSuffixes.panel, "");`
	`232`	`+ const form = this.formContainer.getModel();`
	`233`	`+ const field = form.getElement(id);`
	`234`	`+ if (field) {`
	`235`	`+ form.setFocus(field);`
	`236`	`+ }`
	`237`	`+ }, 0)`
	`238`	`+ }`
`228`	`239`	`}`
`229`	`240`	`}`
`230`	`241`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,14 @@ class FormPanel extends FormFieldBase {`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
	`79`	`+ focusToFirstVisibleField(id) {`
	`80`	`+ const form = this.formContainer.getModel();`
	`81`	`+ const field = form.getElement(id);`
	`82`	`+ if (field) {`
	`83`	`+ form.setFocus(field);`
	`84`	`+ }`
	`85`	`+ }`
	`86`	`+`
`79`	`87`	`/**`
`80`	`88`	`* Adds a child view to the FormPanel.`
`81`	`89`	`* @param {Object} childView - The child view to be added.`
Original file line number	Diff line number	Diff line change
`@@ -249,11 +249,12 @@ class FormTabs extends FormPanel {`
`249`	`249`	`if (this.#_active !== tabId) {`
`250`	`250`	`this.navigate(tabId);`
`251`	`251`	`this.focusWithoutScroll(this.#getTabNavElementById(tabId));`
	`252`	`+ const id = this.getActiveTabId(this.#getCachedTabs()).replace(this.#tabIdSuffix,"");`
	`253`	`+ this.focusToFirstVisibleField(id);`
`252`	`254`	`}`
`253`	`255`	`}`
`254`	`256`
`255`	`257`
`256`		`-`
`257`	`258`	`#getTabNavElementById(tabId) {`
`258`	`259`	`var tabs = this.#getCachedTabs();`
`259`	`260`	`if (tabs) {`
`@@ -328,7 +329,6 @@ class FormTabs extends FormPanel {`
`328`	`329`	`}`
`329`	`330`	`}`
`330`	`331`
`331`		`-`
`332`	`332`	`/**`
`333`	`333`	`* Synchronizes tab labels with their corresponding tab panels.`
`334`	`334`	`* Updates the ID and aria-controls attribute of each tab label.`