@patternfly/react-core 5.0.0-alpha.13 → 5.0.0-alpha.15

package/src/components/Wizard/WizardBody.tsx

@@ -4,15 +4,21 @@ import { css } from '@patternfly/react-styles';
 import { WizardDrawerWrapper } from './WizardDrawerWrapper';
 import { Drawer, DrawerContent } from '../Drawer';
 import { WizardStep } from './Wizard';
+import { debounce } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
   children: any;
   /** Set to true to remove the default body padding */
   hasNoBodyPadding: boolean;
-  /** An aria-label to use for the main element */
+  /** Adds an accessible name to the wizard body when the body content overflows and renders
+   * a scrollbar.
+   */
   'aria-label'?: string;
-  /** Sets the aria-labelledby attribute for the main element */
+  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
+   */
   'aria-labelledby': string;
   /** Component used as the primary content container */
   mainComponent?: React.ElementType;
@@ -37,8 +43,45 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
+  const wizardBodyRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const resize = () => {
+      if (wizardBodyRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = wizardBodyRef.current;
+
+        if (previousWidth !== offsetWidth) {
+          setPreviousWidth(offsetWidth);
+          setHasScrollbar(offsetHeight < scrollHeight);
+        }
+      }
+    };
+
+    const handleResizeWithDelay = debounce(resize, 250);
+    let observer = () => {};
+
+    if (wizardBodyRef?.current) {
+      observer = getResizeObserver(wizardBodyRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = wizardBodyRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+      setPreviousWidth((wizardBodyRef.current as HTMLElement).offsetWidth);
+    }
+
+    return () => {
+      observer();
+    };
+  }, []);
+
   return (
-    <MainComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
+    <MainComponent
+      {...(mainComponent === 'div' && hasScrollbar && { role: 'region' })}
+      {...(hasScrollbar && { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
+      ref={wizardBodyRef}
+      className={css(styles.wizardMain)}
+    >
       <WizardDrawerWrapper
         hasDrawer={hasDrawer && activeStep.drawerPanelContent}
         wrapper={(children: React.ReactNode) => (

package/src/components/Wizard/WizardToggle.tsx

@@ -23,9 +23,13 @@ export interface WizardToggleProps {
   onNavToggle: (isOpen: boolean) => void;
   /** The button's aria-label */
   'aria-label'?: string;
-  /** Sets aria-labelledby on the main element */
+  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
+   */
   mainAriaLabelledBy?: string;
-  /** The main's aria-label */
+  /** Adds an accessible name to the wizard body when the body content overflows and renders
+   * a scrollbar.
+   */
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap

@@ -3,8 +3,6 @@
 exports[`WizardBody should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    aria-label="null"
-    aria-labelledby="string"
     class="pf-c-wizard__main"
   >
     <div

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap

@@ -44,8 +44,6 @@ exports[`WizardToggle should match snapshot (auto-generated) 1`] = `
       class="pf-c-wizard__inner-wrap"
     >
       <div
-        aria-label="null"
-        aria-labelledby="null"
         class="pf-c-wizard__main"
       >
         <div

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -130,37 +130,12 @@ describe('Wizard', () => {
     expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
   });
 
-  test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-    render(
-      <Wizard
-        title="Wizard"
-        navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
-
-    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
-    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
-    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
-  });
-
   test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
+    render(<Wizard navAriaLabel="nav aria-label" description="This wizard has a title" steps={steps} />);
 
     expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
-    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
   });
 
   test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
@@ -170,7 +145,6 @@ describe('Wizard', () => {
       <Wizard
         navAriaLabelledBy="nav-aria-labelledby"
         navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
         description="This wizard has a title"
         steps={steps}
       />
@@ -182,11 +156,13 @@ describe('Wizard', () => {
     expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
   });
 
-  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+  test('wiz with title, navAriaLabelledBy, and navAriaLabel', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
     render(
       <Wizard
+        title="Wiz title"
         navAriaLabel="nav aria-label"
+        navAriaLabelledBy="nav-aria-labelledby"
         mainAriaLabel="main aria-label"
         mainAriaLabelledBy="main-aria-labelledby"
         description="This wizard has a title"
@@ -194,19 +170,17 @@ describe('Wizard', () => {
       />
     );
 
-    const main = screen.getByLabelText('main aria-label');
-
-    expect(main).toBeInTheDocument();
-    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+    const nav = screen.getByLabelText('nav aria-label');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
   });
 
-  test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
+  test('Does not render with mainAriaLabel or mainAriaLabelledby by default', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
     render(
       <Wizard
+        data-testid="wizard-test-id"
         title="Wiz title"
-        navAriaLabel="nav aria-label"
-        navAriaLabelledBy="nav-aria-labelledby"
         mainAriaLabel="main aria-label"
         mainAriaLabelledBy="main-aria-labelledby"
         description="This wizard has a title"
@@ -214,13 +188,9 @@ describe('Wizard', () => {
       />
     );
 
-    const nav = screen.getByLabelText('nav aria-label');
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
-
-    const main = screen.getByLabelText('main aria-label');
-    expect(main).toBeInTheDocument();
-    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+    const main = screen.getByTestId('wizard-test-id');
+    expect(main).not.toHaveAttribute('aria-labelledby');
+    expect(main).not.toHaveAttribute('aria-label');
   });
 
   test('wiz with onCurrentStepChanged setter', async () => {
@@ -228,17 +198,11 @@ describe('Wizard', () => {
     const stepB = { name: 'B', component: <p>Step 2</p> };
     const stepC = { name: 'C', component: <p>Step 3</p> };
 
-    const steps: WizardStep[] = [ stepA, stepB, stepC ];
+    const steps: WizardStep[] = [stepA, stepB, stepC];
     const setter = jest.fn();
     const user = userEvent.setup();
 
-    render(
-        <Wizard
-            title="Wiz title"
-            onCurrentStepChanged={ setter }
-            steps={steps}
-        />
-    );
+    render(<Wizard title="Wiz title" onCurrentStepChanged={setter} steps={steps} />);
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
     await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
@@ -253,98 +217,72 @@ describe('Wizard', () => {
   });
 });
 
-  test('wiz with disabled steps', () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>},
-      { name: 'E', component: <p>Step 4</p>, isDisabled: true },
-      { name: 'G', component: <p>Step 5</p> },
+test('wiz with disabled steps', () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> },
+    { name: 'E', component: <p>Step 4</p>, isDisabled: true },
+    { name: 'G', component: <p>Step 5</p> }
+  ];
 
-    ];
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    expect(screen.getByRole('button',{ name: "B" })).toBeDisabled();
-    expect(screen.getByRole('button',{ name: "E" })).toBeDisabled();
-  });
+  expect(screen.getByRole('button', { name: 'B' })).toBeDisabled();
+  expect(screen.getByRole('button', { name: 'E' })).toBeDisabled();
+});
 
-  test('wiz skip the step disabled when press the next/back button', async () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>},
+test('wiz skip the step disabled when press the next/back button', async () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> }
+  ];
+  const user = userEvent.setup();
 
-    ];
-    const user = userEvent.setup();
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByRole('button', { name: 'C' })).toHaveClass('pf-m-current');
 
-    await user.click(screen.getByRole('button', { name: 'Next' }));
-    expect(screen.getByRole('button',{ name: "C" })).toHaveClass('pf-m-current')
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+  expect(screen.getByRole('button', { name: 'A' })).toHaveClass('pf-m-current');
+});
 
-    await user.click(screen.getByRole('button', { name: 'Back' }));
-    expect(screen.getByRole('button',{ name: "A" })).toHaveClass('pf-m-current')
-  });
-  
-  test('wiz skip the step when click on the nav item disabled', async () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>}
-    ];
-    const user = userEvent.setup();
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+test('wiz skip the step when click on the nav item disabled', async () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> }
+  ];
+  const user = userEvent.setup();
 
-    const navItemButton = screen.getByRole('button',{ name: "B" })
-    const navItemButtonSelected = screen.getByRole('button',{ name: "A" })
-    
-    await user.click(navItemButton);
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    expect(navItemButton).not.toHaveClass('pf-m-current')
-    expect(navItemButtonSelected).toHaveClass('pf-m-current')
-  });
+  const navItemButton = screen.getByRole('button', { name: 'B' });
+  const navItemButtonSelected = screen.getByRole('button', { name: 'A' });
 
-  test('wiz with disable sub step', () => {
-    const steps: WizardStep[] =   [
-      {
-        name: 'A',
-        steps: [
-          { name: 'A-1', component: <p>Substep A content</p> },
-          { name: 'A-2', component: <p>Substep B content</p>,  isDisabled: true }
-        ]
-      },
-    ];
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  await user.click(navItemButton);
 
-    expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
-  });
+  expect(navItemButton).not.toHaveClass('pf-m-current');
+  expect(navItemButtonSelected).toHaveClass('pf-m-current');
+});
+
+test('wiz with disable sub step', () => {
+  const steps: WizardStep[] = [
+    {
+      name: 'A',
+      steps: [
+        { name: 'A-1', component: <p>Substep A content</p> },
+        { name: 'A-2', component: <p>Substep B content</p>, isDisabled: true }
+      ]
+    }
+  ];
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  expect(screen.getByRole('button', { name: 'A-2' })).toBeDisabled();
+});
 
 test('startAtStep can be used to externally control the current step of the wizard', async () => {
   const WizardTest = () => {
@@ -373,7 +311,7 @@ test('startAtStep can be used to externally control the current step of the wiza
 
   expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
 
-  await user.click(screen.getByRole('button', { name: 'Increment step'}))
+  await user.click(screen.getByRole('button', { name: 'Increment step' }));
 
   expect(screen.getByText('Step 2')).toBeVisible();
 });

package/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -212,7 +212,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
           </ol>
         </nav>
         <div
-          aria-labelledby="pf-wizard-title-1"
           class="pf-c-wizard__main"
         >
           <div
@@ -460,7 +459,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
           </ol>
         </nav>
         <div
-          aria-labelledby="pf-wizard-title-0"
           class="pf-c-wizard__main"
         >
           <div

package/src/components/Wizard/examples/WizardBasic.tsx

@@ -3,7 +3,32 @@ import { Wizard } from '@patternfly/react-core';
 
 export const WizardBasic: React.FunctionComponent = () => {
   const steps = [
-    { name: 'First step', component: <p>Step 1 content</p> },
+    {
+      name: 'First step',
+      component: (
+        <>
+          <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>
+        </>
+      )
+    },
     { name: 'Second step', component: <p>Step 2 content</p> },
     { name: 'Third step', component: <p>Step 3 content</p> },
     { name: 'Fourth step', component: <p>Step 4 content</p> },

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -349,7 +349,6 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           minusBtnAriaLabel="minus"
           plusBtnAriaLabel="plus"
           style={{ margin: '12px 0' }}
-          allowEmptyInput
         />
       </PageSection>
       <PageSection variant={PageSectionVariants.light}>

package/src/next/components/Wizard/WizardBody.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { WizardContext } from './WizardContext';
+import { debounce } from '../../../helpers/util';
+import { getResizeObserver } from '../../../helpers/resizeObserver';
 
 /**
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
@@ -11,9 +14,13 @@ export interface WizardBodyProps {
   children: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
   hasNoPadding?: boolean;
-  /** An aria-label to use for the wrapper element */
+  /** Adds an accessible name to the wrapper element when the content overflows and renders
+   * a scrollbar.
+   */
   'aria-label'?: string;
-  /** Sets the aria-labelledby attribute for the wrapper element */
+  /** Adds an accessible name to the wrapper element by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the content overflows and renders a scrollbar.
+   */
   'aria-labelledby'?: string;
   /** Component used as the wrapping content container */
   component?: React.ElementType;
@@ -24,11 +31,53 @@ export const WizardBody = ({
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component: WrapperComponent = 'div'
-}: WizardBodyProps) => (
-  <WrapperComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
-    <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
-  </WrapperComponent>
-);
+  component = 'div'
+}: WizardBodyProps) => {
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
+  const wrapperRef = React.useRef(null);
+  const WrapperComponent = component;
+  const { activeStep } = React.useContext(WizardContext);
+  const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`;
+
+  React.useEffect(() => {
+    const resize = () => {
+      if (wrapperRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
+
+        if (previousWidth !== offsetWidth) {
+          setPreviousWidth(offsetWidth);
+          setHasScrollbar(offsetHeight < scrollHeight);
+        }
+      }
+    };
+
+    const handleResizeWithDelay = debounce(resize, 250);
+    let observer = () => {};
+
+    if (wrapperRef?.current) {
+      observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = wrapperRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+      setPreviousWidth((wrapperRef.current as HTMLElement).offsetWidth);
+    }
+
+    return () => {
+      observer();
+    };
+  }, []);
+
+  return (
+    <WrapperComponent
+      ref={wrapperRef}
+      {...(component === 'div' && hasScrollbar && { role: 'region' })}
+      {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
+      className={css(styles.wizardMain)}
+    >
+      <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
+    </WrapperComponent>
+  );
+};
 
 WizardBody.displayName = 'WizardBody';

package/src/next/components/Wizard/__tests__/WizardBody.test.tsx

@@ -20,16 +20,6 @@ test('has padding className when hasNoPadding is specified', () => {
   expect(screen.getByText('content')).toHaveClass('pf-m-no-padding');
 });
 
-test('has aria-label when one is specified', () => {
-  render(<WizardBody aria-label="Body label">content</WizardBody>);
-  expect(screen.getByLabelText('Body label')).toBeVisible();
-});
-
-test('has aria-labelledby when one is specified', () => {
-  const { container } = render(<WizardBody aria-labelledby="some-id">content</WizardBody>);
-  expect(container.firstElementChild).toHaveAttribute('aria-labelledby', 'some-id');
-});
-
 test('wrapper element is of type div when component is not specified', () => {
   const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
   expect(container.firstElementChild?.tagName).toEqual('DIV');

package/src/next/components/Wizard/examples/Wizard.md

@@ -164,7 +164,7 @@ const StepContent = () => {
 
 ### useWizardFooter
 
-Used to set a unique footer for the wizard on any given step. See step 3 of [Kitchen sink](#kitchen-sink) for a live example.
+Used to set a unique footer for the wizard on any given step.
 
 ```noLive
 import { useWizardFooter } from '@patternfly/react-core/next';

package/src/next/components/Wizard/examples/WizardBasic.tsx

@@ -4,7 +4,25 @@ import { Wizard, WizardStep } from '@patternfly/react-core/next';
 export const WizardBasic: React.FunctionComponent = () => (
   <Wizard height={400} title="Basic wizard">
     <WizardStep name="Step 1" id="basic-first-step">
-      Step 1 content
+      <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>
     </WizardStep>
     <WizardStep name="Step 2" id="basic-second-step">
       Step 2 content

package/components/AboutModal/AboutModalContainer.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement> {
-    /** content rendered inside the About Modal Box Content.  */
-    children: React.ReactNode;
-    /** additional classes added to the About Modal Box  */
-    className?: string;
-    /** Flag to show the About Modal  */
-    isOpen?: boolean;
-    /** A callback for when the close button is clicked  */
-    onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
-    /** Product Name  */
-    productName?: string;
-    /** Trademark information  */
-    trademark?: string;
-    /** the URL of the image for the Brand.  */
-    brandImageSrc: string;
-    /** the alternate text of the Brand image.  */
-    brandImageAlt: string;
-    /** the URL of the image for the background.  */
-    backgroundImageSrc?: string;
-    /** id to use for About Modal Box aria labeled by  */
-    aboutModalBoxHeaderId: string;
-    /** id to use for About Modal Box aria described by  */
-    aboutModalBoxContentId: string;
-    /** Set close button aria label */
-    closeButtonAriaLabel?: string;
-    /** Flag to disable focus trap */
-    disableFocusTrap?: boolean;
-}
-export declare const AboutModalContainer: React.FunctionComponent<AboutModalContainerProps>;
-//# sourceMappingURL=AboutModalContainer.d.ts.map

package/components/AboutModal/AboutModalContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/E,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACzE,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qDAAqD;IACrD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kCAAkC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CA+CjF,CAAC"}