Updated integration tests for new default focus behavior

patternfly · Jun 24, 2024 · 7a2108c · 7a2108c
1 parent 8acd254
commit 7a2108c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/packages/react-integration/cypress/integration/wizard.spec.ts b/packages/react-integration/cypress/integration/wizard.spec.ts
@@ -24,31 +24,20 @@ describe('Wizard Demo Test', () => {
       });
   });
 
-  it('Verify in-page wizard step content is focusable and has role only if content overflows', () => {
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('not.have.attr', 'tabindex');
+  it('Verify in-page wizard step content has role only if content overflows', () => {
     cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('not.have.attr', 'role');
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').click();
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('not.have.focus');
     cy.get('#inPageWizWithOverflow #inPage-overflow-step-2.pf-v6-c-wizard__nav-link').click();
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('have.attr', 'tabindex');
     cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('have.attr', 'role').and('eq', 'region');
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').click();
-    cy.get('#inPageWizWithOverflow .pf-v6-c-wizard__main').should('have.focus');
   });
 
-  it('Verify modal wizard step content is focusable only if content overflows', () => {
-    cy.get('#launchWizOverflow').click();
-    cy.get('#inModalWizWithOverflow.pf-v6-c-wizard').should('exist');
-    cy.get('#inModalWizWithOverflow .pf-v6-c-wizard__main').should('not.have.attr', 'tabindex');
-    cy.get('#inModalWizWithOverflow .pf-v6-c-wizard__main').should('not.have.attr', 'role');
-    cy.get('#inModalWizWithOverflow .pf-v6-c-wizard__main').click();
-    cy.get('#inModalWizWithOverflow .pf-v6-c-wizard__main').should('not.have.focus');
-    cy.get('#inModalWizWithOverflow #modal-overflow-step-2.pf-v6-c-wizard__nav-link').click();
-    cy.get('#inModalWizWithOverflow main.pf-v6-c-wizard__main').should('exist');
-    cy.get('#inModalWizWithOverflow main.pf-v6-c-wizard__main').should('have.attr', 'tabindex');
-    cy.get('#inModalWizWithOverflow main.pf-v6-c-wizard__main').click();
-    cy.get('#inModalWizWithOverflow main.pf-v6-c-wizard__main').should('have.focus');
-    cy.get('#inModalWizWithOverflow .pf-v6-c-wizard__close > button').click();
+  it('Verify in-page wizard step content receives focus only on next or back click', () => {
+    cy.get('#inPageFocusTest .pf-v6-c-wizard__main').should('not.have.focus');
+    cy.get('#inPageFocusTest .pf-v6-c-action-list__group button.pf-m-primary').click();
+    cy.get('#inPageFocusTest .pf-v6-c-wizard__main').should('have.focus');
+    cy.get('#inPageFocusTest #inPageFocusTest-wizard-step-b2').click();
+    cy.get('#inPageFocusTest .pf-v6-c-wizard__main').should('not.have.focus');
+    cy.get('#inPageFocusTest .pf-v6-c-action-list__group button.pf-m-secondary').click();
+    cy.get('#inPageFocusTest .pf-v6-c-wizard__main').should('have.focus');
   });
 
   it('Verify modal wizard roles are applied correctly', () => {

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
@@ -238,6 +238,28 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
         </Wizard>
         <br />
         <br />
+        <Wizard id="inPageFocusTest" height={500}>
+          <WizardStep name="A" id="inPageFocusTest-wizard-step-a">
+            <p>inPageFocusTest Step 1</p>
+          </WizardStep>
+          <WizardStep
+            name="B"
+            id="inPageFocusTest-wizard-step-b"
+            steps={[
+              <WizardStep name="B-1" id="inPageFocusTest-wizard-step-b1" key="inPageFocusTest-wizard-step-b1">
+                <p>inPageFocusTest Step 2</p>
+              </WizardStep>,
+              <WizardStep name="B-2" id="inPageFocusTest-wizard-step-b2" key="inPageFocusTest-wizard-step-b2">
+                <p>inPageFocusTest Step 3</p>
+              </WizardStep>
+            ]}
+          />
+          <WizardStep name="C" id="inPageFocusTest-wizard-step-c">
+            <p>inPageFocusTest Step 4</p>
+          </WizardStep>
+        </Wizard>
+        <br />
+        <br />
         <Button id="launchWizOverflow" variant="primary" onClick={this.handleRoleWizardToggle}>
           Show Modal with Overflow
         </Button>