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 index 7211e39f757..cdd9374622b 100644 --- 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 @@ -161,8 +161,99 @@ export class WizardDemo extends React.Component,

Step 1

-
-

Step 2

+
+ <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx index a090bfca972..9852c1be882 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx @@ -75,8 +75,96 @@ export class WizardDeprecatedDemo extends React.Component -

Step 2

+
+ <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ + <> +

+ 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. +

+

+ 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. +

+

+ 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. +

+ +
) @@ -122,7 +210,7 @@ export class WizardDeprecatedDemo extends React.Component