Add stepped class in wizard/tabs #1489

pavi41 · 2024-12-02T06:36:55Z

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes and the overall coverage did not decrease.
All unit tests pass on CircleCi.
I ran all tests locally and they pass.

adobe-bot · 2024-12-02T06:53:29Z

Accessibility Violations Found

Id	Impact
focus-order-semantics	minor
label-title-only	serious
landmark-one-main	moderate
region	moderate
target-size	serious

adobe-bot · 2024-12-02T06:57:34Z

Lighthouse scores (desktop)

	Performance	Accessibility	Best-Practices	SEO
Scores	100	96	96	75

adobe-bot · 2024-12-02T06:57:34Z

Lighthouse scores (mobile)

	Performance	Accessibility	Best-Practices	SEO
Scores	92	96	96	75

adobe-bot · 2024-12-02T06:57:45Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T06:58:30Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T07:00:35Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T07:31:12Z

Accessibility Violations Found

Id	Impact
focus-order-semantics	minor
label-title-only	serious
landmark-one-main	moderate
region	moderate
target-size	serious

adobe-bot · 2024-12-02T09:06:43Z

Accessibility Violations Found

Id	Impact
focus-order-semantics	minor
label-title-only	serious
landmark-one-main	moderate
region	moderate
target-size	serious

adobe-bot · 2024-12-02T09:09:05Z

Lighthouse scores (desktop)

	Performance	Accessibility	Best-Practices	SEO
Scores	100	96	96	75

adobe-bot · 2024-12-02T09:09:05Z

Lighthouse scores (mobile)

	Performance	Accessibility	Best-Practices	SEO
Scores	92	96	96	75

adobe-bot · 2024-12-02T09:09:16Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T09:10:11Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T09:10:30Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T09:31:18Z

Accessibility Violations Found

Id	Impact
focus-order-semantics	minor
label-title-only	serious
landmark-one-main	moderate
region	moderate
target-size	serious

adobe-bot · 2024-12-02T09:36:39Z

Lighthouse scores (mobile)

	Performance	Accessibility	Best-Practices	SEO
Scores	92	96	96	75

adobe-bot · 2024-12-02T09:36:39Z

Lighthouse scores (desktop)

	Performance	Accessibility	Best-Practices	SEO
Scores	100	96	96	75

adobe-bot · 2024-12-02T09:36:49Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T09:37:32Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

adobe-bot · 2024-12-02T09:38:03Z

Accessibility Violations Found

Id	Impact
label-title-only	serious
target-size	serious

codecov · 2024-12-02T09:40:42Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.33%. Comparing base (07639b3) to head (628c889).

Additional details and impacted files

@@            Coverage Diff            @@
##                dev    #1489   +/-   ##
=========================================
  Coverage     82.33%   82.33%           
  Complexity      963      963           
=========================================
  Files           107      107           
  Lines          2485     2485           
  Branches        339      339           
=========================================
  Hits           2046     2046           
  Misses          264      264           
  Partials        175      175

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

rismehta · 2024-12-03T04:42:54Z

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)) {


Can you validate the following use-cases,

If tabs are dynamically added/removed (via repeatable settings), this indexing might break. Please add test cases for this use-case

for all layout types

since it is being directly added to HTML, and is not something which is repopulated, so this might work.
Whenever we introduce lazy loading, at that time this will break.
Nevertheless, we should have a repeatable test cases.

rismehta

check comment

rismehta · 2024-12-05T08:13:46Z

ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js

@@ -232,7 +269,7 @@ describe('visibility of navigation buttons', function () {
        // check when new instance of repeatable panel is added
        // and that new instance gets active & prev and next nav buttons are visible
        cy.get(`#${textInputId}`).find(driverTextInput).focus().clear().type('a').blur().then(() => {
-            getWizardPanelAtIndex(2).should('have.class', wizardPanelActive);
+            getWizardPanelAtIndex(11).should('have.class', wizardPanelActive);


When there is no change in collateral, why is this test case changed ?

It was failing on my local, because the panel at index 11 was active, and it was checking at index 2.

The test case was working earlier, ideally if an old test case is changed, it is most likely due to collateral change else this could be a regression. please investigate

Done, reverted to old scenario!

rismehta · 2024-12-05T08:14:15Z

ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js

+
+    it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => {
+        getTabs().should('have.length', 4);
+        getWizardPanels().should('have.length', 4);


I don't see code to add/remove instances in between the tabs/wizard, which was asked as per last review comments

I have added the instances in tabs/wizards, you can check it in the test case as well.

rismehta

check comments

pavi41 · 2024-12-05T08:36:33Z

ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js

+        getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped');
+        getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped');
+        getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped');
+        cy.get("button").contains("+R1").click().then(() => {


@rismehta I have added the instance, you can check it here!

github-actions bot force-pushed the FORMS-16883 branch from 8dfe5c4 to 86bf897 Compare December 2, 2024 06:37

pavi41 force-pushed the FORMS-16883 branch from 86bf897 to 5fb8969 Compare December 2, 2024 08:49

github-actions bot force-pushed the FORMS-16883 branch from 5fb8969 to 3180c1d Compare December 2, 2024 08:49

rismehta reviewed Dec 3, 2024

View reviewed changes

rismehta requested changes Dec 3, 2024

View reviewed changes

pavi41 force-pushed the FORMS-16883 branch from 3180c1d to 42b0ba2 Compare December 5, 2024 05:51

github-actions bot force-pushed the FORMS-16883 branch from 42b0ba2 to 17ae34f Compare December 5, 2024 05:51

rismehta reviewed Dec 5, 2024

View reviewed changes

rismehta requested changes Dec 5, 2024

View reviewed changes

pavi41 commented Dec 5, 2024

View reviewed changes

pavi41 force-pushed the FORMS-16883 branch from 17ae34f to de9c776 Compare December 5, 2024 09:02

github-actions bot force-pushed the FORMS-16883 branch from de9c776 to c94969f Compare December 5, 2024 09:02

pavi41 force-pushed the FORMS-16883 branch from c94969f to b9a03cc Compare December 9, 2024 04:40

Add stepped class in wizard/tabs

628c889

github-actions bot force-pushed the FORMS-16883 branch from b9a03cc to 628c889 Compare December 9, 2024 04:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add stepped class in wizard/tabs #1489

Add stepped class in wizard/tabs #1489

pavi41 commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

adobe-bot commented Dec 2, 2024

codecov bot commented Dec 2, 2024 •

edited

Loading

rismehta Dec 3, 2024

sakshi-arora1 Dec 3, 2024

rismehta left a comment

rismehta Dec 5, 2024

pavi41 Dec 5, 2024

rismehta Dec 5, 2024 •

edited

Loading

pavi41 Dec 5, 2024

rismehta Dec 5, 2024 •

edited

Loading

pavi41 Dec 5, 2024

rismehta left a comment

pavi41 Dec 5, 2024

Add stepped class in wizard/tabs #1489

Are you sure you want to change the base?

Add stepped class in wizard/tabs #1489

Conversation

pavi41 commented Dec 2, 2024

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Lighthouse scores (desktop)

adobe-bot commented Dec 2, 2024

Lighthouse scores (mobile)

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Lighthouse scores (desktop)

adobe-bot commented Dec 2, 2024

Lighthouse scores (mobile)

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Lighthouse scores (mobile)

adobe-bot commented Dec 2, 2024

Lighthouse scores (desktop)

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

adobe-bot commented Dec 2, 2024

Accessibility Violations Found

codecov bot commented Dec 2, 2024 • edited Loading

Codecov Report

rismehta Dec 3, 2024

Choose a reason for hiding this comment

sakshi-arora1 Dec 3, 2024

Choose a reason for hiding this comment

rismehta left a comment

Choose a reason for hiding this comment

rismehta Dec 5, 2024

Choose a reason for hiding this comment

pavi41 Dec 5, 2024

Choose a reason for hiding this comment

rismehta Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

pavi41 Dec 5, 2024

Choose a reason for hiding this comment

rismehta Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

pavi41 Dec 5, 2024

Choose a reason for hiding this comment

rismehta left a comment

Choose a reason for hiding this comment

pavi41 Dec 5, 2024

Choose a reason for hiding this comment

codecov bot commented Dec 2, 2024 •

edited

Loading

rismehta Dec 5, 2024 •

edited

Loading

rismehta Dec 5, 2024 •

edited

Loading