Focus on first visible field in form and in navigable layouts

Pavitra Khatri · Pavitra Khatri · commit b139482db87b · 2025-02-14T10:33:44.000+05:30
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,22 @@
                     panel.classList.add(this.constructor.cssClasses.panel.expanded);
                     panel.classList.remove(this.constructor.cssClasses.panel.hidden);
                     panel.setAttribute("aria-hidden", false);
+                     
+                    // To set the focus on the field when tab expands
+                    if (document.activeElement === button) {
+                        setTimeout(() => {
+                           let id = panel.id.replace(this.constructor.idSuffixes.panel, "");
+                           const form = this.formContainer.getModel();
+                           const tab = this.getModel()._jsonModel.items.find(item => item.id === id);
+                          
+                           if (tab && Array.isArray(tab.items) && tab.items.length > 0) {
+                               const field = form.getElement(tab.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
@@ -97,7 +97,6 @@
                 this.expandItem(item)
             }
 
-
             #collapseAllItems() {
                 var items = this.getCachedItems();
                 if (items) {
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
@@ -75,6 +75,51 @@ class FormPanel extends FormFieldBase {
             this.parentView.setFocus(this.getId());
         }
     }
+  
+    /**
+     * Sets the focus to first field while navigating in navigable layouts.
+     * @param {string} id - The ID of the field to set focus to.
+     */
+    focusToFirstVisibleField(id) {
+        const form = this.formContainer.getModel();
+        const activeTab = this.getModel()._jsonModel.items.find(item => item.id === id);
+    
+        if (!activeTab) {
+            return;
+        }
+    
+        const findFirstPanelNonPanelField = (item) => {
+            //  if item is not a panel, return it
+            if (item.fieldType && item.fieldType !== "panel") {
+                const field = form.getElement(item.id);
+                if (field && field._jsonModel.visible) {
+                    return field;
+                }
+                return null;
+            }
+            
+            // If it's a panel, check its items
+            if (item[':items']) {
+                const itemsToCheck = item[':itemsOrder'] 
+                    ? item[':itemsOrder'].map(key => item[':items'][key])
+                    : Object.values(item[':items']);
+    
+                // Check each child
+                for (const childItem of itemsToCheck) {
+                    const result = findFirstPanelNonPanelField(childItem);
+                    if (result) {
+                        return result;
+                    }
+                }
+            }
+            return null;
+        };
+    
+        const firstField = findFirstPanelNonPanelField(activeTab);   
+        if (firstField) {
+            form.setFocus(firstField);
+        }
+    }
 
     /**
      * Adds a child view to the FormPanel.
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
@@ -167,6 +167,22 @@ describe("Form with Tabsontop Layout Container with focus", () => {
 
     });
 
+    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,25 @@ describe("Form with Wizard Layout Container with focus", () => {
         });
     });
 
+    it("first component should always have focus when navigated", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[0];
+       
+        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", () => {

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,22 @@`
`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`	`+ // To set the focus on the field when tab expands`
	`230`	`+ if (document.activeElement === button) {`
	`231`	`+ setTimeout(() => {`
	`232`	`+ let id = panel.id.replace(this.constructor.idSuffixes.panel, "");`
	`233`	`+ const form = this.formContainer.getModel();`
	`234`	`+ const tab = this.getModel()._jsonModel.items.find(item => item.id === id);`
	`235`	`+`
	`236`	`+ if (tab && Array.isArray(tab.items) && tab.items.length > 0) {`
	`237`	`+ const field = form.getElement(tab.id);`
	`238`	`+ if (field) {`
	`239`	`+ form.setFocus(field);`
	`240`	`+ }`
	`241`	`+ }`
	`242`	`+ }, 0)`
	`243`	`+ }`
`228`	`244`	`}`
`229`	`245`	`}`
`230`	`246`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,6 @@`
`97`	`97`	`this.expandItem(item)`
`98`	`98`	`}`
`99`	`99`
`100`		`-`
`101`	`100`	`#collapseAllItems() {`
`102`	`101`	`var items = this.getCachedItems();`
`103`	`102`	`if (items) {`
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.`