Skip to content

Commit

Permalink
fix(chore): Fix deprecated wizard integration tests (patternfly#9312)
Browse files Browse the repository at this point in the history 
* fix(chore): Fix deprecated wizard integration tests

* updated non deprecated test as well

---------

Co-authored-by: Titani <tlabaj@redaht.com>
  • Loading branch information
@tlabaj @jenny-s51
2 people authored and jenny-s51 committed Jul 21, 2023
1 parent 4b4d607 commit 4f4b383
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 5 deletions.
95 changes: 93 additions & 2 deletions packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,99 @@ export class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
<p>Step 1</p>
</WizardStep>
<WizardStep body={{ component: 'main' }} name="Step with overflow" id="wizard-overflow-with">
<div style={{ height: '800px' }}>
<p>Step 2</p>
<div style={{ height: '200px' }}>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
of "region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
libero a auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
of "region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
libero a auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
of "region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
libero a auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
of "region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
libero a auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
dolor.
</p>
</>
</div>
</WizardStep>
</Wizard>
Expand Down
94 changes: 91 additions & 3 deletions ...ntegration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,96 @@ export class WizardDeprecatedDemo extends React.Component<React.HTMLProps<HTMLDi
{
name: 'Step with overflow',
component: (
<div style={{ height: '800px' }}>
<p>Step 2</p>
<div>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
"region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
"region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
"region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
</p>
</>
<>
<p>
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
"region", and an aria-label or aria-labelledby to be applied.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
auctor.
</p>
<p>
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
</p>
</>

<button onClick={this.handleRoleWizardToggle}>Open wizard in modal</button>
</div>
)
Expand Down Expand Up @@ -122,7 +210,7 @@ export class WizardDeprecatedDemo extends React.Component<React.HTMLProps<HTMLDi
id="wizard-focusable-overflow"
steps={stepsOnOverflow}
startAtStep={1}
height={500}
height={200}
mainAriaLabel="Step content"
/>
<Wizard
Expand Down

0 comments on commit 4f4b383

Please sign in to comment.