Skip to content

Commit 4f4b383

Browse files
tlabajTitani
authored and
jenny-s51
committed
fix(chore): Fix deprecated wizard integration tests (patternfly#9312)
* fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani <tlabaj@redaht.com>
1 parent 4b4d607 commit 4f4b383

2 files changed

Lines changed: 184 additions & 5 deletions

File tree

‎packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,99 @@ export class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
161161
<p>Step 1</p>
162162
</WizardStep>
163163
<WizardStep body={{ component: 'main' }} name="Step with overflow" id="wizard-overflow-with">
164-
<div style={{ height: '800px' }}>
165-
<p>Step 2</p>
164+
<div style={{ height: '200px' }}>
165+
<>
166+
<p>
167+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
168+
of "region", and an aria-label or aria-labelledby to be applied.
169+
</p>
170+
<p>
171+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
172+
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
173+
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
174+
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
175+
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
176+
libero a auctor.
177+
</p>
178+
<p>
179+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
180+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
181+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
182+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
183+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
184+
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
185+
dolor.
186+
</p>
187+
</>
188+
<>
189+
<p>
190+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
191+
of "region", and an aria-label or aria-labelledby to be applied.
192+
</p>
193+
<p>
194+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
195+
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
196+
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
197+
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
198+
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
199+
libero a auctor.
200+
</p>
201+
<p>
202+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
203+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
204+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
205+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
206+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
207+
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
208+
dolor.
209+
</p>
210+
</>
211+
<>
212+
<p>
213+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
214+
of "region", and an aria-label or aria-labelledby to be applied.
215+
</p>
216+
<p>
217+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
218+
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
219+
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
220+
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
221+
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
222+
libero a auctor.
223+
</p>
224+
<p>
225+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
226+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
227+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
228+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
229+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
230+
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
231+
dolor.
232+
</p>
233+
</>
234+
<>
235+
<p>
236+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role
237+
of "region", and an aria-label or aria-labelledby to be applied.
238+
</p>
239+
<p>
240+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra.
241+
Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt
242+
tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus.
243+
Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci
244+
eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et
245+
libero a auctor.
246+
</p>
247+
<p>
248+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
249+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
250+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
251+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
252+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
253+
odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus
254+
dolor.
255+
</p>
256+
</>
166257
</div>
167258
</WizardStep>
168259
</Wizard>

‎packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx‎

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,96 @@ export class WizardDeprecatedDemo extends React.Component<React.HTMLProps<HTMLDi
7575
{
7676
name: 'Step with overflow',
7777
component: (
78-
<div style={{ height: '800px' }}>
79-
<p>Step 2</p>
78+
<div>
79+
<>
80+
<p>
81+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
82+
"region", and an aria-label or aria-labelledby to be applied.
83+
</p>
84+
<p>
85+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
86+
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
87+
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
88+
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
89+
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
90+
auctor.
91+
</p>
92+
<p>
93+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
94+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
95+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
96+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
97+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
98+
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
99+
</p>
100+
</>
101+
<>
102+
<p>
103+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
104+
"region", and an aria-label or aria-labelledby to be applied.
105+
</p>
106+
<p>
107+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
108+
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
109+
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
110+
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
111+
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
112+
auctor.
113+
</p>
114+
<p>
115+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
116+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
117+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
118+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
119+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
120+
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
121+
</p>
122+
</>
123+
<>
124+
<p>
125+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
126+
"region", and an aria-label or aria-labelledby to be applied.
127+
</p>
128+
<p>
129+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
130+
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
131+
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
132+
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
133+
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
134+
auctor.
135+
</p>
136+
<p>
137+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
138+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
139+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
140+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
141+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
142+
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
143+
</p>
144+
</>
145+
<>
146+
<p>
147+
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
148+
"region", and an aria-label or aria-labelledby to be applied.
149+
</p>
150+
<p>
151+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
152+
lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
153+
enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
154+
facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
155+
posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
156+
auctor.
157+
</p>
158+
<p>
159+
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
160+
ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
161+
bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
162+
commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
163+
egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio
164+
nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
165+
</p>
166+
</>
167+
80168
<button onClick={this.handleRoleWizardToggle}>Open wizard in modal</button>
81169
</div>
82170
)
@@ -122,7 +210,7 @@ export class WizardDeprecatedDemo extends React.Component<React.HTMLProps<HTMLDi
122210
id="wizard-focusable-overflow"
123211
steps={stepsOnOverflow}
124212
startAtStep={1}
125-
height={500}
213+
height={200}
126214
mainAriaLabel="Step content"
127215
/>
128216
<Wizard

0 commit comments

Comments
 (0)