Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(chore): Fix deprecated wizard integration tests #9312

Merged
merged 2 commits into from
Jul 19, 2023
Merged

fix(chore): Fix deprecated wizard integration tests #9312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7eb472
fix(chore): Fix deprecated wizard integration tests
Jun 27, 2023
529f2de
updated non deprecated test as well
Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 93 additions & 2 deletions packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
View file
Open in desktop
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
Open in desktop
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
Loading