diff --git a/packages/react-catalog-view-extension/package.json b/packages/react-catalog-view-extension/package.json
index 8b75f05f987..8f9c202ed05 100644
--- a/packages/react-catalog-view-extension/package.json
+++ b/packages/react-catalog-view-extension/package.json
@@ -38,6 +38,7 @@
     "@patternfly/patternfly": "4.24.3",
     "@patternfly/react-core": "^4.32.13",
     "@patternfly/react-styles": "^4.5.1",
+    "classnames": "^2.2.5",
     "patternfly": "^3.59.4"
   },
   "devDependencies": {
diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx
index b93b32c2d7f..248fe81bf7d 100644
--- a/packages/react-core/src/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/components/Wizard/Wizard.tsx
@@ -6,7 +6,7 @@ import { Modal, ModalVariant } from '../Modal';
 import { WizardFooterInternal } from './WizardFooterInternal';
 import { WizardToggle } from './WizardToggle';
 import { WizardNav } from './WizardNav';
-import { WizardNavItem } from './WizardNavItem';
+import { WizardNavItem, WizardNavItemProps } from './WizardNavItem';
 import { WizardContextProvider } from './WizardContext';
 import { PickOptional } from '../../helpers/typeUtils';
 import { WizardHeader } from './WizardHeader';
@@ -24,6 +24,8 @@ export interface WizardStep {
   canJumpTo?: boolean;
   /** Sub steps */
   steps?: WizardStep[];
+  /** Props to pass to the WizardNavItem */
+  stepNavItemProps?: React.HTMLProps<HTMLButtonElement | HTMLAnchorElement> | WizardNavItemProps;
   /** (Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it. */
   nextButtonText?: React.ReactNode;
   /** (Unused if footer is controlled) The condition needed to enable the Next button */
@@ -66,6 +68,12 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   startAtStep?: number;
   /** Aria-label for the Nav */
   navAriaLabel?: string;
+  /** Sets aria-labelledby on nav element */
+  navAriaLabelledBy?: string;
+  /** Aria-label for the main element */
+  mainAriaLabel?: string;
+  /** Sets aria-labelledby on the main element */
+  mainAriaLabelledBy?: string;
   /** Can remove the default padding around the main body content by setting this to true */
   hasNoBodyPadding?: boolean;
   /** (Use to control the footer) Passing in a footer component lets you control the buttons yourself */
@@ -99,7 +107,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   static displayName = 'Wizard';
   private static currentId = 0;
   static defaultProps: PickOptional<WizardProps> = {
-    title: '',
+    title: null,
     description: '',
     className: '',
     startAtStep: 1,
@@ -108,7 +116,10 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     cancelButtonText: 'Cancel',
     hideClose: false,
     closeButtonAriaLabel: 'Close',
-    navAriaLabel: 'Steps',
+    navAriaLabel: null,
+    navAriaLabelledBy: null,
+    mainAriaLabel: null,
+    mainAriaLabelledBy: null,
     hasNoBodyPadding: false,
     onBack: null as WizardStepFunctionType,
     onNext: null as WizardStepFunctionType,
@@ -312,6 +323,9 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       hideClose,
       closeButtonAriaLabel = 'Close',
       navAriaLabel,
+      navAriaLabelledBy,
+      mainAriaLabel,
+      mainAriaLabelledBy,
       hasNoBodyPadding,
       footer,
       appendTo,
@@ -328,76 +342,83 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     const computedSteps: WizardStep[] = this.initSteps(steps);
     const firstStep = activeStep === flattenedSteps[0];
     const isValid = activeStep && activeStep.enableNext !== undefined ? activeStep.enableNext : true;
-
-    const nav = (isWizardNavOpen: boolean) => (
-      <WizardNav isOpen={isWizardNavOpen} aria-label={navAriaLabel}>
-        {computedSteps.map((step, index) => {
-          if (step.isFinishedStep) {
-            // Don't show finished step in the side nav
-            return;
-          }
-          let enabled;
-          let navItemStep;
-          if (step.steps) {
-            let hasActiveChild = false;
-            let canJumpToParent = false;
-            for (const subStep of step.steps) {
-              if (activeStep.name === subStep.name) {
-                // one of the children matches
-                hasActiveChild = true;
-              }
-              if (subStep.canJumpTo) {
-                canJumpToParent = true;
+    const nav = (isWizardNavOpen: boolean) => {
+      const wizNavAProps = {
+        isOpen: isWizardNavOpen,
+        'aria-label': navAriaLabel,
+        'aria-labelledby': (title || navAriaLabelledBy) && (navAriaLabelledBy || this.titleId)
+      };
+      return (
+        <WizardNav {...wizNavAProps}>
+          {computedSteps.map((step, index) => {
+            if (step.isFinishedStep) {
+              // Don't show finished step in the side nav
+              return;
+            }
+            let enabled;
+            let navItemStep;
+            if (step.steps) {
+              let hasActiveChild = false;
+              let canJumpToParent = false;
+              for (const subStep of step.steps) {
+                if (activeStep.name === subStep.name) {
+                  // one of the children matches
+                  hasActiveChild = true;
+                }
+                if (subStep.canJumpTo) {
+                  canJumpToParent = true;
+                }
               }
+              navItemStep = this.getFlattenedStepsIndex(flattenedSteps, step.steps[0].name);
+              return (
+                <WizardNavItem
+                  key={index}
+                  content={step.name}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!canJumpToParent}
+                  step={navItemStep}
+                  onNavItemClick={this.goToStep}
+                >
+                  <WizardNav {...wizNavAProps} returnList>
+                    {step.steps.map((childStep: WizardStep, indexChild: number) => {
+                      if (childStep.isFinishedStep) {
+                        // Don't show finished step in the side nav
+                        return;
+                      }
+                      navItemStep = this.getFlattenedStepsIndex(flattenedSteps, childStep.name);
+                      enabled = childStep.canJumpTo;
+                      return (
+                        <WizardNavItem
+                          key={`child_${indexChild}`}
+                          content={childStep.name}
+                          isCurrent={activeStep.name === childStep.name}
+                          isDisabled={!enabled}
+                          step={navItemStep}
+                          onNavItemClick={this.goToStep}
+                        />
+                      );
+                    })}
+                  </WizardNav>
+                </WizardNavItem>
+              );
             }
-            navItemStep = this.getFlattenedStepsIndex(flattenedSteps, step.steps[0].name);
+            navItemStep = this.getFlattenedStepsIndex(flattenedSteps, step.name);
+            enabled = step.canJumpTo;
             return (
               <WizardNavItem
+                {...step.stepNavItemProps}
                 key={index}
                 content={step.name}
-                isCurrent={hasActiveChild}
-                isDisabled={!canJumpToParent}
+                isCurrent={activeStep.name === step.name}
+                isDisabled={!enabled}
                 step={navItemStep}
                 onNavItemClick={this.goToStep}
-              >
-                <WizardNav returnList>
-                  {step.steps.map((childStep: WizardStep, indexChild: number) => {
-                    if (childStep.isFinishedStep) {
-                      // Don't show finished step in the side nav
-                      return;
-                    }
-                    navItemStep = this.getFlattenedStepsIndex(flattenedSteps, childStep.name);
-                    enabled = childStep.canJumpTo;
-                    return (
-                      <WizardNavItem
-                        key={`child_${indexChild}`}
-                        content={childStep.name}
-                        isCurrent={activeStep.name === childStep.name}
-                        isDisabled={!enabled}
-                        step={navItemStep}
-                        onNavItemClick={this.goToStep}
-                      />
-                    );
-                  })}
-                </WizardNav>
-              </WizardNavItem>
+              />
             );
-          }
-          navItemStep = this.getFlattenedStepsIndex(flattenedSteps, step.name);
-          enabled = step.canJumpTo;
-          return (
-            <WizardNavItem
-              key={index}
-              content={step.name}
-              isCurrent={activeStep.name === step.name}
-              isDisabled={!enabled}
-              step={navItemStep}
-              onNavItemClick={this.goToStep}
-            />
-          );
-        })}
-      </WizardNav>
-    );
+          })}
+        </WizardNav>
+      );
+    };
 
     const context = {
       goToStepById: this.goToStepById,
@@ -427,6 +448,9 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
             />
           )}
           <WizardToggle
+            mainAriaLabel={mainAriaLabel}
+            isInPage={isOpen === undefined}
+            mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}
             isNavOpen={this.state.isNavOpen}
             onNavToggle={isNavOpen => this.setState({ isNavOpen })}
             nav={nav}
diff --git a/packages/react-core/src/components/Wizard/WizardBody.tsx b/packages/react-core/src/components/Wizard/WizardBody.tsx
index a0355d183f1..25f1dbb4bb9 100644
--- a/packages/react-core/src/components/Wizard/WizardBody.tsx
+++ b/packages/react-core/src/components/Wizard/WizardBody.tsx
@@ -7,14 +7,26 @@ export interface WizardBodyProps {
   children: any;
   /** Set to true to remove the default body padding */
   hasNoBodyPadding: boolean;
+  /** An aria-label to use for the main element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute for the main element */
+  'aria-labelledby': string;
+  /** Component used as the primary content container */
+  mainComponent?: React.ElementType;
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   children,
-  hasNoBodyPadding = false
-}: WizardBodyProps) => (
-  <main className={css(styles.wizardMain)}>
-    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
-  </main>
-);
+  hasNoBodyPadding = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  mainComponent = 'div'
+}: WizardBodyProps) => {
+  const MainComponent = mainComponent;
+  return (
+    <MainComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
+      <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+    </MainComponent>
+  );
+};
 WizardBody.displayName = 'WizardBody';
diff --git a/packages/react-core/src/components/Wizard/WizardNav.tsx b/packages/react-core/src/components/Wizard/WizardNav.tsx
index 5afa95afc38..9cdfcb86ab2 100644
--- a/packages/react-core/src/components/Wizard/WizardNav.tsx
+++ b/packages/react-core/src/components/Wizard/WizardNav.tsx
@@ -7,6 +7,8 @@ export interface WizardNavProps {
   children?: any;
   /** Aria-label applied to the nav element */
   'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the nav element */
+  'aria-labelledby'?: string;
   /** Whether the nav is expanded */
   isOpen?: boolean;
   /** True to return the inner list without the wrapping nav element */
@@ -16,6 +18,7 @@ export interface WizardNavProps {
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   children,
   'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   isOpen = false,
   returnList = false
 }: WizardNavProps) => {
@@ -26,7 +29,11 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   }
 
   return (
-    <nav className={css(styles.wizardNav, isOpen && 'pf-m-expanded')} aria-label={ariaLabel}>
+    <nav
+      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
       <ol className={css(styles.wizardNavList)}>{children}</ol>
     </nav>
   );
diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx
index f2505829232..fb3cd39bf80 100644
--- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx
+++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx
@@ -16,7 +16,9 @@ export interface WizardNavItemProps {
   /** Callback for when the nav item is clicked */
   onNavItemClick?: (step: number) => any;
   /** Component used to render WizardNavItem */
-  navItemComponent?: React.ReactNode;
+  navItemComponent?: 'button' | 'a';
+  /** An optional url to use for when using an anchor component */
+  href?: string;
 }
 
 export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
@@ -26,18 +28,35 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   isDisabled = false,
   step,
   onNavItemClick = () => undefined,
-  navItemComponent = 'a'
+  navItemComponent = 'button',
+  href = null,
+  ...rest
 }: WizardNavItemProps) => {
-  const NavItemComponent = navItemComponent as any;
+  const NavItemComponent = navItemComponent;
+
+  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.error('WizardNavItem: When using an anchor, please provide an href');
+  }
+
+  const btnProps = {
+    disabled: isDisabled
+  };
+
+  const linkProps = {
+    tabIndex: isDisabled ? -1 : undefined,
+    href
+  };
 
   return (
     <li className={css(styles.wizardNavItem)}>
       <NavItemComponent
-        aria-current={isCurrent && !children ? 'page' : false}
+        {...rest}
+        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
         onClick={() => onNavItemClick(step)}
         className={css(styles.wizardNavLink, isCurrent && 'pf-m-current', isDisabled && 'pf-m-disabled')}
-        aria-disabled={isDisabled ? true : false}
-        tabIndex={isDisabled ? -1 : undefined}
+        aria-disabled={isDisabled ? true : null}
+        aria-current={isCurrent && !children ? 'page' : false}
       >
         {content}
       </NavItemComponent>
diff --git a/packages/react-core/src/components/Wizard/WizardToggle.tsx b/packages/react-core/src/components/Wizard/WizardToggle.tsx
index 0758ec8b973..f33dbbd5fa2 100644
--- a/packages/react-core/src/components/Wizard/WizardToggle.tsx
+++ b/packages/react-core/src/components/Wizard/WizardToggle.tsx
@@ -23,6 +23,12 @@ export interface WizardToggleProps {
   onNavToggle: (isOpen: boolean) => void;
   /** The button's aria-label */
   'aria-label'?: string;
+  /** Sets aria-labelledby on the main element */
+  mainAriaLabelledBy?: string;
+  /** The main's aria-label */
+  mainAriaLabel?: string;
+  /** If the wizard is in-page */
+  isInPage?: boolean;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -33,7 +39,10 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   activeStep,
   children,
   hasNoBodyPadding = false,
-  'aria-label': ariaLabel = 'Wizard Toggle'
+  'aria-label': ariaLabel = 'Wizard Toggle',
+  mainAriaLabelledBy = null,
+  mainAriaLabel = null,
+  isInPage = true
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -54,6 +63,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
       }
     }
   }
+
   return (
     <React.Fragment>
       <button
@@ -76,7 +86,14 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
       <div className={css(styles.wizardOuterWrap)}>
         <div className={css(styles.wizardInnerWrap)}>
           {nav(isNavOpen)}
-          <WizardBody hasNoBodyPadding={hasNoBodyPadding}>{activeStep.component}</WizardBody>
+          <WizardBody
+            mainComponent={isInPage ? 'div' : 'main'}
+            aria-label={mainAriaLabel}
+            aria-labelledby={mainAriaLabelledBy}
+            hasNoBodyPadding={hasNoBodyPadding}
+          >
+            {activeStep.component}
+          </WizardBody>
         </div>
         {children}
       </div>
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Generated/Wizard.test.tsx
index ed55036c4ca..985559ca029 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/Wizard.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/Wizard.test.tsx
@@ -12,7 +12,7 @@ it('Wizard should match snapshot (auto-generated)', () => {
     <Wizard
       width={null}
       height={null}
-      title={"''"}
+      title={'null'}
       titleId={'string'}
       descriptionId={'string'}
       description={''}
@@ -22,7 +22,10 @@ it('Wizard should match snapshot (auto-generated)', () => {
       className={"''"}
       steps={[]}
       startAtStep={1}
-      navAriaLabel={"'Steps'"}
+      navAriaLabel={'null'}
+      navAriaLabelledBy={'null'}
+      mainAriaLabel={'null'}
+      mainAriaLabelledBy={'null'}
       hasNoBodyPadding={false}
       footer={null}
       onSave={() => undefined as void}
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardBody.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardBody.test.tsx
index b182a2c87e6..589fd4bba50 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardBody.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardBody.test.tsx
@@ -8,6 +8,14 @@ import { WizardBody } from '../../WizardBody';
 import {} from '../..';
 
 it('WizardBody should match snapshot (auto-generated)', () => {
-  const view = shallow(<WizardBody children={'any'} hasNoBodyPadding={false} />);
+  const view = shallow(
+    <WizardBody
+      children={'any'}
+      hasNoBodyPadding={false}
+      aria-label={'null'}
+      aria-labelledby={'string'}
+      mainComponent={'div'}
+    />
+  );
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNav.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNav.test.tsx
index 1104db9a159..7d378ece1a9 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNav.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNav.test.tsx
@@ -8,6 +8,8 @@ import { WizardNav } from '../../WizardNav';
 import {} from '../..';
 
 it('WizardNav should match snapshot (auto-generated)', () => {
-  const view = shallow(<WizardNav children={'any'} aria-label={'string'} isOpen={false} returnList={false} />);
+  const view = shallow(
+    <WizardNav children={'any'} aria-label={'string'} aria-labelledby={'string'} isOpen={false} returnList={false} />
+  );
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNavItem.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNavItem.test.tsx
index b2ec8163058..02a3a02c213 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNavItem.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardNavItem.test.tsx
@@ -16,7 +16,8 @@ it('WizardNavItem should match snapshot (auto-generated)', () => {
       isDisabled={false}
       step={42}
       onNavItemClick={() => undefined}
-      navItemComponent={'a'}
+      navItemComponent={'button'}
+      href={'null'}
     />
   );
   expect(view).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardToggle.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardToggle.test.tsx
index ef8d55be665..420a81244e2 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/WizardToggle.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/WizardToggle.test.tsx
@@ -18,6 +18,9 @@ it('WizardToggle should match snapshot (auto-generated)', () => {
       isNavOpen={true}
       onNavToggle={(isOpen: boolean) => undefined as void}
       aria-label={"'Wizard Toggle'"}
+      mainAriaLabelledBy={'null'}
+      mainAriaLabel={'null'}
+      isInPage={true}
     />
   );
   expect(view).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/Wizard.test.tsx.snap
index 1bf75aa4cde..c14d67d9ead 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/Wizard.test.tsx.snap
@@ -37,12 +37,15 @@ exports[`Wizard should match snapshot (auto-generated) 1`] = `
         descriptionId="string"
         hideClose={false}
         onClose={[Function]}
-        title="''"
+        title="null"
         titleId="string"
       />
       <WizardToggle
         hasNoBodyPadding={false}
+        isInPage={false}
         isNavOpen={false}
+        mainAriaLabel="null"
+        mainAriaLabelledBy="null"
         nav={[Function]}
         onNavToggle={[Function]}
         steps={Array []}
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap
index fed1e85f0c3..9b083a6da52 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WizardBody should match snapshot (auto-generated) 1`] = `
-<main
+<div
+  aria-label="null"
+  aria-labelledby="string"
   className="pf-c-wizard__main"
 >
   <div
@@ -9,5 +11,5 @@ exports[`WizardBody should match snapshot (auto-generated) 1`] = `
   >
     any
   </div>
-</main>
+</div>
 `;
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
index e6cbfa49807..aa0cadb069a 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`WizardNav should match snapshot (auto-generated) 1`] = `
 <nav
   aria-label="string"
+  aria-labelledby="string"
   className="pf-c-wizard__nav"
 >
   <ol
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
index 367a2fff134..691e8d82efc 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap
@@ -4,10 +4,11 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
 <li
   className="pf-c-wizard__nav-item"
 >
-  <a
+  <button
     aria-current={false}
-    aria-disabled={false}
+    aria-disabled={null}
     className="pf-c-wizard__nav-link"
+    disabled={false}
     onClick={[Function]}
   />
   ReactNode
diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap
index 3aafe6762c9..2e33e934ccb 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap
@@ -38,7 +38,10 @@ exports[`WizardToggle should match snapshot (auto-generated) 1`] = `
       className="pf-c-wizard__inner-wrap"
     >
       <WizardBody
+        aria-label="null"
+        aria-labelledby="null"
         hasNoBodyPadding={false}
+        mainComponent="div"
       />
     </div>
     <div>
diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
index 1d3c0e510c0..d459a310d16 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
@@ -36,3 +36,134 @@ test('Wizard should match snapshot', () => {
   const fragment = view.instance().render();
   expect(mount(<div>{fragment}</div>).getElement()).toMatchSnapshot();
 });
+
+test('bare wiz ', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <Wizard
+      description="This wizard uses anchor tags for the nav item elements"
+      id="inPageWizWithAnchorsId"
+      steps={steps}
+    />
+  );
+  const view = mount(wiz);
+  const hasHeader = view.at(0).find('.pf-c-wizard__header').length;
+  const hasTitle = view.at(0).find('.pf-c-wizard__title').length;
+  expect(hasHeader).toBeFalsy();
+  expect(hasTitle).toBeFalsy();
+});
+
+test('wiz with title ', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = <Wizard title="Wizard" description="This wizard has a title" steps={steps} />;
+  const view = mount(wiz).at(0);
+  const hasHeader = view.find('.pf-c-wizard__header').length;
+  const hasTitle = view.find('h2.pf-c-wizard__title').length;
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(hasHeader).toBe(1);
+  expect(hasTitle).toBe(1);
+  expect(nav.find('[aria-labelledby="pf-wizard-title-2"]').length).toBe(1);
+  expect(main.find('[aria-labelledby="pf-wizard-title-2"]').length).toBe(1);
+});
+
+test('wiz with title and navAriaLabel combination', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = <Wizard title="Wizard" navAriaLabel="Some label" description="This wizard has a title" steps={steps} />;
+  const view = mount(wiz).at(0);
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(nav.find('[aria-labelledby="pf-wizard-title-3"]').length).toBe(1);
+  expect(nav.find('[aria-label="Some label"]').length).toBe(1);
+  expect(main.props()['aria-label']).toBe(null);
+});
+
+test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <Wizard
+      title="Wizard"
+      navAriaLabel="nav aria-label"
+      mainAriaLabel="main aria-label"
+      description="This wizard has a title"
+      steps={steps} />
+  );
+  const view = mount(wiz).at(0);
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(nav.find('[aria-labelledby="pf-wizard-title-4"]').length).toBe(1);
+  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
+  expect(main.props()['aria-label']).toBe('main aria-label');
+});
+
+test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <Wizard
+      navAriaLabel="nav aria-label"
+      mainAriaLabel="main aria-label"
+      description="This wizard has a title"
+      steps={steps} />
+  );
+  const view = mount(wiz).at(0);
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(main.props()['aria-label']).toBe('main aria-label');
+  expect(main.props()['aria-labelledby']).toBe(null);
+  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
+  expect(nav.props()['aria-labelledby']).toBe(null);
+});
+
+test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <Wizard
+      navAriaLabelledBy="nav-aria-labelledby"
+      navAriaLabel="nav aria-label"
+      mainAriaLabel="main aria-label"
+      description="This wizard has a title"
+      steps={steps} />
+  );
+  const view = mount(wiz).at(0);
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
+  expect(nav.props()['aria-labelledby']).toBe('nav-aria-labelledby');
+});
+
+test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <Wizard
+      navAriaLabel="nav aria-label"
+      mainAriaLabel="main aria-label"
+      mainAriaLabelledBy="main-aria-labelledby"
+      description="This wizard has a title"
+      steps={steps} />
+  );
+  const view = mount(wiz).at(0);
+  const main = view.find('div.pf-c-wizard__main');
+  expect(main.props()['aria-label']).toBe('main aria-label');
+  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
+});
+
+test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
+  const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
+  const wiz = (
+    <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"
+      steps={steps} />
+  );
+  const view = mount(wiz).at(0);
+  const nav = view.find('nav.pf-c-wizard__nav');
+  const main = view.find('div.pf-c-wizard__main');
+  expect(nav.find('[aria-label="nav aria-label"]').length).toBe(1);
+  expect(nav.find('[aria-labelledby="nav-aria-labelledby"]').length).toBe(1);
+  expect(main.props()['aria-label']).toBe('main aria-label');
+  expect(main.props()['aria-labelledby']).toBe('main-aria-labelledby');
+});
diff --git a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
index 63d3cad9818..1915ab3e4f7 100644
--- a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
@@ -43,7 +43,10 @@ exports[`Wizard should match snapshot 1`] = `
           }
         }
         hasNoBodyPadding={false}
+        isInPage={true}
         isNavOpen={false}
+        mainAriaLabel={null}
+        mainAriaLabelledBy="pf-wizard-title-0"
         nav={[Function]}
         onNavToggle={[Function]}
         steps={
diff --git a/packages/react-core/src/components/Wizard/examples/FinishedStep.js b/packages/react-core/src/components/Wizard/examples/FinishedStep.js
index 1ba7954c3ff..203ba549a10 100644
--- a/packages/react-core/src/components/Wizard/examples/FinishedStep.js
+++ b/packages/react-core/src/components/Wizard/examples/FinishedStep.js
@@ -1,5 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  Title,
+  Progress,
+  Button
+} from '@patternfly/react-core';
+// eslint-disable-next-line patternfly-react/import-tokens-icons
+import { CogsIcon } from '@patternfly/react-icons';
 
 const propTypes = {
   onClose: PropTypes.func.isRequired
@@ -31,47 +42,24 @@ class FinishedStep extends React.Component {
     const { percent } = this.state;
     return (
       <div className="pf-l-bullseye">
-        <div className="pf-c-empty-state pf-m-lg">
-          <i className="fas fa- fa-cogs pf-c-empty-state__icon" aria-hidden="true" />
-          <h1 className="pf-c-title pf-m-lg">
+        <EmptyState variant="large">
+          <EmptyStateIcon icon={CogsIcon} />
+          <Title headingLevel="h4" size="lg">
             {percent === 100 ? 'Configuration Complete' : 'Configuration in progress'}
-          </h1>
-          <div className="pf-c-empty-state__body">
-            <div className="pf-c-progress pf-m-singleline" id="progress-singleline-example">
-              <div className="pf-c-progress__description" id="progress-singleline-example-description" />
-              <div className="pf-c-progress__status" aria-hidden="true">
-                <span className="pf-c-progress__measure">{percent}%</span>
-              </div>
-              <div
-                className="pf-c-progress__bar"
-                role="progressbar"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                aria-valuenow={percent}
-                aria-describedby="progress-singleline-example-description"
-              >
-                <div
-                  className="pf-c-progress__indicator"
-                  style={{
-                    width: `${percent}%`
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="pf-c-empty-state__body">
+          </Title>
+          <EmptyStateBody>
+            <Progress value={percent} measureLocation="outside" />
+          </EmptyStateBody>
+          <EmptyStateBody>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pulvinar tortor. Maecenas sit amet
             pellentesque velit, eu eleifend mauris.
-          </div>
-          <div className="pf-c-empty-state__secondary">
-            <button
-              className={percent === 100 ? 'pf-c-button pf-m-primary' : 'pf-c-button pf-m-link'}
-              onClick={this.props.onClose}
-            >
-              {percent === 100 ? 'Close' : 'Cancel'}
-            </button>
-          </div>
-        </div>
+          </EmptyStateBody>
+          <EmptyStateSecondaryActions>
+            <Button isDisabled={percent !== 100} onClick={this.props.onClose}>
+              Log to console
+            </Button>
+          </EmptyStateSecondaryActions>
+        </EmptyState>
       </div>
     );
   }
diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index f0a6e1d2736..77e81c817eb 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -5,6 +5,8 @@ cssPrefix: pf-c-wizard
 propComponents: ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle']
 ---
 
+import { Button, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, SlackHashIcon, CogsIcon } from '@patternfly/react-icons';
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
@@ -21,15 +23,58 @@ class SimpleWizard extends React.Component {
 
   render() {
     const steps = [
-      { name: 'Step 1', component: <p>Step 1</p> },
-      { name: 'Step 2', component: <p>Step 2</p> },
-      { name: 'Step 3', component: <p>Step 3</p> },
-      { name: 'Step 4', component: <p>Step 4</p> },
-      { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+      { name: 'First step', component: <p>Step 1 content</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> },
+      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
+    const title = 'Basic wizard';
+    return (
+      <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
+        steps={steps}
+        height={400}
+      />
+    );
+  }
+}
+```
 
+```js title=Anchors-for-nav-items
+import React from 'react';
+import { Button, Wizard } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, SlackHashIcon } from '@patternfly/react-icons';
+
+class WizardWithNavAnchors extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const steps = [
+      {
+        name: <div><ExternalLinkAltIcon /> PF3</div>,
+        component: <p>Step 1: Read about PF3</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
+      },
+      {
+        name: <div><ExternalLinkAltIcon /> PF4</div>,
+        component: <p>Step 2: Read about PF4</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
+      },
+      {
+        name: <div><SlackHashIcon /> Join us on slack</div>,
+        component: <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com/">Join the conversation</Button>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://patternfly.slack.com/', target: '_blank' }
+      }
+    ];
+    const title = 'Anchor link wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         steps={steps}
         height={400}
       />
@@ -43,7 +88,7 @@ class SimpleWizard extends React.Component {
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
 
-class DisabledStepsWizard extends React.Component {
+class IncrementallyEnabledStepsWizard extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -63,15 +108,17 @@ class DisabledStepsWizard extends React.Component {
     const { stepIdReached } = this.state;
 
     const steps = [
-      { id: 1, name: 'Step 1', component: <p>Step 1</p> },
-      { id: 2, name: 'Step 2', component: <p>Step 2</p>, canJumpTo: stepIdReached >= 2 },
-      { id: 3, name: 'Step 3', component: <p>Step 3</p>, canJumpTo: stepIdReached >= 3 },
-      { id: 4, name: 'Step 4', component: <p>Step 4</p>, canJumpTo: stepIdReached >= 4 },
-      { id: 5, name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish', canJumpTo: stepIdReached >= 5 }
+      { id: 1, name: 'First step', component: <p>Step 1 content</p> },
+      { id: 2, name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
+      { id: 3, name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
+      { id: 4, name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
+      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish', canJumpTo: stepIdReached >= 5 }
     ];
-
+    const title = 'Incrementally enabled wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         onClose={this.closeWizard}
         steps={steps}
         onNext={this.onNext}
@@ -91,7 +138,7 @@ import FinishedStep from './examples/FinishedStep';
 class FinishedStepWizard extends React.Component {
   constructor(props) {
     super(props);
-    
+
     this.closeWizard = () => {
       console.log("close wizard");
     }
@@ -100,16 +147,18 @@ class FinishedStepWizard extends React.Component {
   render() {
 
     const steps = [
-      { name: 'Step 1', component: <p>Step 1</p> },
-      { name: 'Step 2', component: <p>Step 2</p> },
-      { name: 'Step 3', component: <p>Step 3</p> },
-      { name: 'Step 4', component: <p>Step 4</p> },
-      { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' },
+      { name: 'First step', component: <p>Step 1 content</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> },
+      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' },
       { name: 'Finish', component: <FinishedStep onClose={this.closeWizard} />, isFinishedStep: true }
     ];
-
+    const title = 'Finished wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         onClose={this.closeWizard}
         steps={steps}
         height={400}
@@ -134,7 +183,7 @@ class ValidationWizard extends React.Component {
       allStepsValid: false,
       stepIdReached: 1
     };
-    
+
     this.closeWizard = () => {
       console.log("close wizard");
     }
@@ -184,7 +233,7 @@ class ValidationWizard extends React.Component {
     const { isFormValid, formValue, allStepsValid, stepIdReached } = this.state;
 
     const steps = [
-      { id: 1, name: 'Information', component: <p>Step 1</p> },
+      { id: 1, name: 'Information', component: <p>Step 1 content</p> },
       {
         name: 'Configuration',
         steps: [
@@ -200,12 +249,14 @@ class ValidationWizard extends React.Component {
           { id: 3, name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
         ]
       },
-      { id: 4, name: 'Additional', component: <p>Step 3</p>, enableNext: allStepsValid, canJumpTo: stepIdReached >= 4 },
-      { id: 5, name: 'Review', component: <p>Step 4</p>, nextButtonText: 'Close', canJumpTo: stepIdReached >= 5 }
+      { id: 4, name: 'Additional', component: <p>Step 3 content</p>, enableNext: allStepsValid, canJumpTo: stepIdReached >= 4 },
+      { id: 5, name: 'Review', component: <p>Step 4 content</p>, nextButtonText: 'Close', canJumpTo: stepIdReached >= 5 }
     ];
-
+    const title = 'Enabled on form validation wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         onClose={this.closeWizard}
         onSave={this.onSave}
         steps={steps}
@@ -232,11 +283,11 @@ class ValidateButtonPressWizard extends React.Component {
     this.state = {
       stepsValid: 0
     };
-    
+
     this.closeWizard = () => {
       console.log("close wizard");
     }
-    
+
     this.validateLastStep = onNext => {
       const { stepsValid } = this.state;
       if (stepsValid !== 1) {
@@ -253,8 +304,8 @@ class ValidateButtonPressWizard extends React.Component {
     const { stepsValid } = this.state;
 
     const steps = [
-      { name: 'Step 1', component: <p>Step 1</p> },
-      { name: 'Step 2', component: <p>Step 2</p> },
+      { name: 'First step', component: <p>Step 1 content</p> },
+      { name: 'Second step', component: <p>Step 2 content</p> },
       {
         name: 'Final Step',
         component: (
@@ -296,9 +347,11 @@ class ValidateButtonPressWizard extends React.Component {
         </WizardContextConsumer>
       </WizardFooter>
     );
-
+    const title = 'Validate on button press wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         onClose={this.closeWizard}
         footer={CustomFooter}
         steps={steps}
@@ -560,9 +613,11 @@ class ProgressiveWizard extends React.Component {
         </WizardContextConsumer>
       </WizardFooter>
     );
-
+    const title = 'Progressive wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         onClose={this.closeWizard}
         footer={CustomFooter}
         onGoToStep={this.onGoToStep}
@@ -579,7 +634,7 @@ class ProgressiveWizard extends React.Component {
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
 
-class SimpleWizard extends React.Component {
+class RememberLastStepWizard extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -604,15 +659,17 @@ class SimpleWizard extends React.Component {
     const { step } = this.state;
 
     const steps = [
-      { id: 1, name: 'Step 1', component: <p>Step 1</p> },
-      { id: 2, name: 'Step 2', component: <p>Step 2</p> },
-      { id: 3, name: 'Step 3', component: <p>Step 3</p> },
-      { id: 4, name: 'Step 4', component: <p>Step 4</p> },
-      { id: 5, name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+      { id: 1, name: 'First step', component: <p>Step 1 content</p> },
+      { id: 2, name: 'Second step', component: <p>Step 2 content</p> },
+      { id: 3, name: 'Third step', component: <p>Step 3 content</p> },
+      { id: 4, name: 'Fourth step', component: <p>Step 4 content</p> },
+      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
-
+    const title = 'Remember last step wizard';
     return (
       <Wizard
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
         startAtStep={step}
         onNext={this.onMove}
         onBack={this.onMove}
@@ -646,22 +703,22 @@ class WizardInModal extends React.Component {
 
   render() {
     const { isOpen } = this.state;
-    
+
     const steps = [
-      { name: 'Step 1', component: <p>Step 1</p> },
-      { name: 'Step 2', component: <p>Step 2</p> },
-      { name: 'Step 3', component: <p>Step 3</p> },
-      { name: 'Step 4', component: <p>Step 4</p> },
-      { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+      { name: 'First step', component: <p>Step 1 content</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> },
+      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
-
+    const title = 'Wizard in modal';
     return (
       <React.Fragment>
         <Button variant="primary" onClick={this.handleModalToggle}>
           Show Modal
         </Button>
         <Wizard
-          title="Simple Wizard"
+          title={title}
           description="Simple Wizard Description"
           steps={steps}
           onClose={this.handleModalToggle}
diff --git a/packages/react-integration/cypress/integration/wizard.spec.ts b/packages/react-integration/cypress/integration/wizard.spec.ts
new file mode 100644
index 00000000000..e15f6b497cf
--- /dev/null
+++ b/packages/react-integration/cypress/integration/wizard.spec.ts
@@ -0,0 +1,24 @@
+describe('Wizard Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#wizard-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/wizard-demo-nav-link');
+  });
+
+  it('Verify wizard in modal launches in a dialog', () => {
+    cy.get('#launchWiz').click();
+    cy.get('#modalWizId.pf-c-wizard').should('exist');
+    cy.focused().click();
+  });
+
+  it('Verify wizard in modal sends focus to the new content', () => {
+    cy.get('#launchWiz').click();
+    cy.get('#modalWizId.pf-c-wizard').should('exist');
+    cy.focused().should('have.class', 'pf-c-wizard__close');
+    cy.focused().click();
+  });
+
+  it('Verify in page wizard displays on page render', () => {
+    cy.get('#inPageWizId.pf-c-wizard').should('exist');
+  });
+});
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 04a01ec6107..6836045ced8 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
@@ -42,9 +42,26 @@ export class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
       { name: 'C', component: <p>Step 4</p> },
       { name: 'D', component: <p>Step 5</p> }
     ];
+    const stepsWithAnchorLinks: WizardStep[] = [
+      {
+        name: 'Read about PF3',
+        component: <p>Step 1</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
+      },
+      {
+        name: 'Read about PF4',
+        component: <p>Step 2</p>,
+        stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
+      },
+      {
+        name: 'Review',
+        component: <p>Step 3</p>,
+        stepNavItemProps: { navItemComponent: 'button', href: 'hhttps://www.patternfly.org/v4/' }
+      }
+    ];
     return (
       <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
+        <Button id="launchWiz" variant="primary" onClick={this.handleModalToggle}>
           Show Modal
         </Button>
         <Wizard
@@ -52,17 +69,28 @@ export class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
           description="Simple Wizard Description"
           steps={steps}
           startAtStep={1}
+          id="modalWizId"
           onClose={this.handleModalToggle}
           isOpen={this.state.isOpen}
         />
         <Wizard
           title="Wizard title"
           description="Description here"
+          id="inPageWizId"
           hideClose
           steps={steps}
           startAtStep={1}
           height={500}
         />
+        <Wizard
+          title="Wizard with anchor"
+          description="This wizard uses anchor tags for the nav item elements"
+          id="inPageWizWithAnchorsId"
+          hideClose
+          steps={stepsWithAnchorLinks}
+          startAtStep={1}
+          height={500}
+        />
       </React.Fragment>
     );
   }