StepFlow does not accept help or HelpID Props.

[ConnollyM]

Description

The StepFlow component when passed into a dialog title (as per you example implementation Example implementation with title node does not allow for help or helpId props to be passed.

Suggested solution

Allow help and helpId props to be passed to the step flow component so that a help icon can be rendered, as the regular dialog or heading components do. This will allow users of the system to be able to click a link to take them to the products help system, in line with the other areas of the program.

Demo URL

No response

Alternatives

No response

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[edleeks87]

I believe the DS want to move away from using Help (mainly due to the use of tooltips that is can support) so we're reluctant to bake in support for it into anymore components. You should still be able to compose it with the existing props, StepFlow currently implicitly supports aria-describedby (we'll ensure it's explicitly added to the interface asap) so there shouldn't be any accessibility issues with the approach. If there are let us know and we'll revisit the recommendation. FYI @ljemmo and @harpalsingh

const titleNode = (
    <Box display="flex" alignItems="center">
      <Icon type="bin" />
      <StepFlowTitle titleString={stepTitles[step - 1]} />
      <Help href="#" helpId="foo" tooltipId="bar">HELP ME</Help>
    </Box>
  );
  
   <StepFlow
          category="Main goal"
          title={titleNode}
          currentStep={step as Steps}
          totalSteps={highestStep}
          ref={stepFlowHandle}
          showProgressIndicator
          onDismiss={() => setIsOpen(false)}
          mb="20px"
          titleVariant="h2"
          aria-describedby="foo bar"
   />