From 5fb89693fe409449c78a10de4f6b32c927aba66c Mon Sep 17 00:00:00 2001 From: Pavitra Khatri Date: Mon, 2 Dec 2024 12:05:56 +0530 Subject: [PATCH] Add stepped class in wizard/tabs --- .../components/form/tabsontop/v1/tabsontop/README.md | 1 + .../tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js | 4 ++++ .../form/verticaltabs/v1/verticaltabs/README.md | 1 + .../verticaltabs/clientlibs/site/js/verticaltabs.js | 4 ++++ .../fd/components/form/wizard/v1/wizard/README.md | 4 +++- .../wizard/v1/wizard/clientlibs/commons/js/common.js | 11 ++++++++++- .../wizard/v1/wizard/clientlibs/site/js/wizardview.js | 4 ++++ ui.frontend/src/view/FormTabs.js | 5 +++++ .../specs/tabsontop/tabsontop.runtime.cy.js | 3 +++ .../specs/verticaltabs/verticaltabs.runtime.cy.js | 2 ++ .../test-module/specs/wizard/wizard.runtime.cy.js | 6 ++++++ 11 files changed, 43 insertions(+), 2 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md index 34f4f2afc0..95c3bffba8 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md @@ -50,6 +50,7 @@ BLOCK cmp-tabs ELEMENT cmp-tabs__tablist ELEMENT cmp-tabs__tab MOD cmp-tabs__tab--active + MOD cmp-tabs__tab--stepped ELEMENT cmp-tabs__title ELEMENT cmp-tabs__icon ELEMENT cmp-tabs__label diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js index 4dd738e70b..1489af4264 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js @@ -27,6 +27,10 @@ tab: "cmp-tabs__tab--active", tabpanel: "cmp-tabs__tabpanel--active" }, + stepped: { + tab: "cmp-tabs__tab--stepped", + tabpanel: "cmp-tabs__tabpanel--stepped" + }, label: `.${Tabs.bemBlock}__label`, description: `.${Tabs.bemBlock}__longdescription`, qm: `.${Tabs.bemBlock}__questionmark`, diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md index d616724e0c..8a5f4638b9 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md @@ -48,6 +48,7 @@ BLOCK cmp-verticaltabs ELEMENT cmp-verticaltabs__label-container ELEMENT cmp-verticaltabs__tab MOD cmp-verticaltabs__tab--active + MOD cmp-verticaltabs__tab--stepped ELEMENT cmp-verticaltabs__title ELEMENT cmp-verticaltabs__icon ELEMENT cmp-verticaltabs__label diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js index 69667ae682..5e0e654d42 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js @@ -27,6 +27,10 @@ tab: "cmp-verticaltabs__tab--active", tabpanel: "cmp-verticaltabs__tabpanel--active" }, + stepped: { + tab: "cmp-verticaltabs__tab--stepped", + tabpanel: "cmp-verticaltabs__tabpanel--stepped" + }, label: `.${VerticalTabs.bemBlock}__label`, description: `.${VerticalTabs.bemBlock}__longdescription`, qm: `.${VerticalTabs.bemBlock}__questionmark`, diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md index 19aa9653be..748e9ea4b4 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md @@ -46,8 +46,10 @@ It is already included by its edit and policy dialogs. ``` BLOCK cmp-adaptiveform-wizard ELEMENT cmp-adaptiveform-wizard__label - ELEMENT cmp-adaptiveform-wizard__label-container + ELEMENT cmp-adaptiveform-wizard__label-container ELEMENT cmp-adaptiveform-wizard__tab + MOD cmp-adaptiveform-wizard__tab--active + MOD cmp-adaptiveform-wizard__tab--stepped ELEMENT cmp-adaptiveform-wizard__wizardpanel ELEMENT cmp-adaptiveform-wizard__previousNav ELEMENT cmp-adaptiveform-wizard__nextNav diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js index 419285efb7..f43b27e171 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js @@ -29,7 +29,11 @@ active: { tab: "cmp-adaptiveform-wizard__tab--active", wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" - } + }, + stepped: { + tab: "cmp-adaptiveform-wizard__tab--stepped", + wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped", + } }; _active; @@ -126,6 +130,11 @@ tabs[i].setAttribute("aria-selected", true); tabs[i].setAttribute("tabindex", "0"); } else { + // If the panel/tab was previously active, mark it as stepped + if (wizardPanels[i].classList.contains(this.constructor.selectors.active.wizardpanel)) { + wizardPanels[i].classList.add(this.constructor.selectors.stepped.wizardpanel); + tabs[i].classList.add(this.constructor.selectors.stepped.tab); + } wizardPanels[i].classList.remove(this.constructor.selectors.active.wizardpanel); wizardPanels[i].setAttribute("aria-hidden", true); tabs[i].classList.remove(this.constructor.selectors.active.tab); 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 index 71f22f814e..478b70c132 100644 --- 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 @@ -41,6 +41,10 @@ tab: "cmp-adaptiveform-wizard__tab--active", wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" }, + stepped: { + tab: "cmp-adaptiveform-wizard__tab--stepped", + wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped", + }, label: `.${Wizard.bemBlock}__label`, description: `.${Wizard.bemBlock}__longdescription`, qm: `.${Wizard.bemBlock}__questionmark`, diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js index e432c30ca4..1fa1803090 100644 --- a/ui.frontend/src/view/FormTabs.js +++ b/ui.frontend/src/view/FormTabs.js @@ -116,6 +116,11 @@ class FormTabs extends FormPanel { tabs[i].setAttribute(Constants.TABINDEX, "0"); tabs[i].setAttribute(Constants.ARIA_CURRENT, "true"); } else { + // If the panel/tab was previously active, mark it as stepped + if (tabpanels[i].classList.contains(this.#_selectors.active.tabpanel)) { + tabpanels[i].classList.add(this.#_selectors.stepped.tabpanel); + tabs[i].classList.add(this.#_selectors.stepped.tab); + } tabpanels[i].classList.remove(this.#_selectors.active.tabpanel); tabpanels[i].setAttribute(Constants.ARIA_HIDDEN, true); tabs[i].classList.remove(this.#_selectors.active.tab); diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js index e47f9aa364..94634c0248 100644 --- a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js +++ b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js @@ -90,10 +90,13 @@ describe("Form with Panel Container", () => { tab2().should('have.class', 'cmp-tabs__tab--active'); tab2().should('have.attr', 'aria-selected', 'true'); tab1().should('have.attr', 'aria-selected', 'false'); + tab1().should('have.class', 'cmp-tabs__tab--stepped'); tab1().click(); tab1().should('have.class', 'cmp-tabs__tab--active'); + tab1().should('have.class', 'cmp-tabs__tab--stepped'); tab1().should('have.attr', 'aria-selected', 'true'); tab2().should('have.attr', 'aria-selected', 'false'); + tab2().should('have.class', 'cmp-tabs__tab--stepped'); }); it("switch tab in runtime using keyboard", () => { diff --git a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js index 860105eca4..e1c422bcc0 100644 --- a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js +++ b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js @@ -90,8 +90,10 @@ tab2().should('have.class','cmp-verticaltabs__tab--active'); tab2().should('have.attr','aria-selected','true'); tab1().should('have.attr','aria-selected','false'); + tab1().should('have.class','cmp-verticaltabs__tab--stepped'); tab1().click(); tab1().should('have.class','cmp-verticaltabs__tab--active'); + tab1().should('have.class','cmp-verticaltabs__tab--stepped'); tab1().should('have.attr','aria-selected','true'); tab2().should('have.attr','aria-selected','false'); }); diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js index f8d003c23b..7d75be997b 100644 --- a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js +++ b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js @@ -54,17 +54,21 @@ describe("Form with Wizard Layout Container", () => { cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); 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(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); 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(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.expectNoConsoleErrors(); }); @@ -90,9 +94,11 @@ describe("Form with Wizard Layout Container", () => { cy.get(".cmp-adaptiveform-wizard__nav--previous").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); 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(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.expectNoConsoleErrors(); });