feat(Wizard - next): Enhancements & updated types

[jpuzz0]

What: Closes #7914

Might not want to review until unit tests are reviewed and merged here: #7731 This commit diff is what's new to this PR: https://github.com/patternfly/patternfly-react/pull/7915/commits/8a04839e25e5a07a4605ac390d2b2fe8bb4e20e5

[patternfly-build]

Preview: https://patternfly-react-pr-7915.surge.sh

A11y report: https://patternfly-react-pr-7915-a11y.surge.sh

[mcoker]

So that it will wrap with the text, it's probably best just to put it inline with the step content and apply a margin. Here I've used the sm margin, which is about 8px.

It may be that we should have a core implementation?

It looks like it should since it looks like the icon is created by our component based on a step status - https://github.com/patternfly/patternfly-react/blob/55ac2855a7d472720cb9c1098391f6c5e171b2fd/packages/react-core/src/next/components/Wizard/WizardNavItem.tsx#L105-L108

Then we can make sure the color, spacing, line wrapping, etc is correct.

[jpuzz0]

Thanks @mcarrano @mcoker for the feedback. I'll be making this change as soon as the PR this is branched off of is merged and am able to rebase/resolve some anticipated conflicts.

[jpuzz0]

@jeffpuzzo this looks good with one exception. After discussing with the design team, we feel like the status icon that annotates a step in the menu should fall immediately after the item label, not right aligned like you have it. This would be similar to the way we place the help (?) on form elements. @mcoker should be able to provide input on standard spacing. It may be that we should have a core implementation? I can create a mockup, if necessary.

@mcarrano I've addressed this comment, and it can be visually tested in the Kitchen sink example when the PR surge link is available. Please let me know if there's anything else that is of concern that I should address in this PR.

[jpuzz0]

automatic a11y behavior

The Back button was meant to be disabled for Step 1, which I'll fix now. Since that example uses a custom footer, that had to be done manually.

As for any labels for a11y having to do with the status of a Wizard step, I could conditionally add an aria-label to the nav item or maybe the error icon itself? I might defer to others on the team for best practices in that regard.

[jpuzz0]

As for any labels for a11y having to do with the status of a Wizard step, I could conditionally add an aria-label to the nav item or maybe the error icon itself? I might defer to others on the team for best practices in that regard.

@wise-king-sullyman I spoke with @nicolethoen about this who gave me some great pointers. I ended up adding a visited as well to show up conditionally in an aria-label, so the breakdown with a step label of Step label would be:

1. If not visited and without an 'error' status, do not add an aria-label to the button
2. If visited and not current, the screen reads Step label, visited
3. If status === 'error', the screen reads Step label, error
4. If visited, not current and status === 'error', the screen reads Step label, error, visited

Does this seem appropriate? (Question for both of you)