Fixing Accordion panel cannot collapse when a Text component is the first item. (#1702)

Author: sakshi-arora1

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,26 +225,14 @@
                     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) {
-                            const panelId = panel.id.replace(this.constructor.idSuffixes.panel, "");
-                            const form = this.formContainer.getModel();
-                            //Find repeatable tab
-                            let tab = this.getModel().getState().items.find(item => item.type === 'array')?.items?.find(subItem => subItem.id === panelId);
-                            // If not found, try non-repeatable tab
-                            if (!tab) {
-                                tab = this.getModel().getState().items.find(item => item.id === panelId);
-                            }
-                            if (tab && Array.isArray(tab.items) && tab.items.length > 0) {
-                                const field = form.getElement(tab.id);
-                                if (field) {
-                                    setTimeout(() => {form.setFocus(field)}, 0);
-                                }
-                            }
-                        }
+                        const focusPanelId = panel.id.replace(this.constructor.idSuffixes.panel, "");
+                        this.focusToFirstVisibleField(focusPanelId);
                     }
                 }
+            }
 
             /**
              * Annotates the item and its internals with
@@ -277,7 +265,7 @@
             }
         };
     }
-     
+
 
     window.Forms = window.Forms || {};
     window.Forms.CoreComponentsCommons = window.Forms.CoreComponentsCommons || {};

ui.tests/test-module/specs/accordion/accordion.runtime.cy.js

@@ -112,9 +112,38 @@ describe("Form with Accordion Container", () => {
                 cy.get(`#${firstChildComponentItemId}`).should('not.have.attr', 'data-cmp-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}`).click().then(() => {
+                    cy.get(`#${firstChildComponentButtonId}`).should('have.class', 'cmp-accordion__button--expanded');
+                    cy.get(`#${firstChildComponentButtonId}`).should('have.attr', 'aria-controls', firstChildComponentPanelId);
+                    cy.get(`#${firstChildComponentItemId}`).should('have.attr', 'data-cmp-expanded');
+                    cy.get(`#${firstChildComponentPanelId}`).should('have.class', 'cmp-accordion__panel--expanded');
+                    cy.get(`#${firstChildComponentPanelId}`).should('have.attr', 'aria-labelledby', firstChildComponentButtonId);
+
+                    cy.get(`#${secondChildComponentItemId}`).should('not.have.attr', 'data-cmp-expanded');
+                    cy.get(`#${secondChildComponentButtonId}`).should('not.have.class', 'cmp-accordion__button--expanded');
+                    cy.get(`#${secondChildComponentPanelId}`).should('not.have.class', 'cmp-accordion__panel--expanded');
+
+                    cy.get(`#${firstChildComponentButtonId}`).click().then(() => {
+                        cy.get(`#${firstChildComponentButtonId}`).should('not.have.class', 'cmp-accordion__button--expanded');
+                        cy.get(`#${firstChildComponentItemId}`).should('not.have.attr', 'data-cmp-expanded');
+                        cy.get(`#${secondChildComponentItemId}`).should('not.have.attr', 'data-cmp-expanded');
+                        cy.get(`#${secondChildComponentButtonId}`).should('not.have.class', 'cmp-accordion__button--expanded');
+                        cy.get(`#${secondChildComponentPanelId}`).should('not.have.class', 'cmp-accordion__panel--expanded');
+
+                        cy.get(`#${firstChildComponentButtonId}`).click().then(() => {
+                            cy.get(`#${firstChildComponentButtonId}`).should('have.class', 'cmp-accordion__button--expanded');
+                            cy.get(`#${firstChildComponentButtonId}`).should('have.attr', 'aria-controls', firstChildComponentPanelId);
+                            cy.get(`#${firstChildComponentItemId}`).should('have.attr', 'data-cmp-expanded');
+                            cy.get(`#${firstChildComponentPanelId}`).should('have.class', 'cmp-accordion__panel--expanded');
+                            cy.get(`#${firstChildComponentPanelId}`).should('have.attr', 'aria-labelledby', firstChildComponentButtonId);
+                        });
+                    });
+
+                });
             });
-        })
-    })
+        });
+    });
 
     it("should collapse/expand view properly with keyboard", () => {
 
@@ -276,4 +305,4 @@ describe("Form with Accordion Layout Container with Hidden Children", () => {
             cy.get(`#${thirdPanelButtonOfAccordionId}`).should('have.class', 'cmp-accordion__button--expanded');
         })
     });
-});
+});