fix(progress-stepper): use button for step title help text (#4912)

src/patternfly/components/ProgressStepper/examples/ProgressStepper.md

@@ -322,23 +322,23 @@ cssPrefix: pf-c-progress-stepper
   {{#> progress-stepper-step progress-stepper-step--IsComplete="true"}}
     {{> progress-stepper-step-icon}}
     {{#> progress-stepper-step-main}}
-      {{#> progress-stepper-step-title progress-stepper-step-title--type="span" progress-stepper-step-title--IsHelp="true"}}
+      {{#> progress-stepper-step-title progress-stepper-step-title--IsHelp="true"}}
         First step
       {{/progress-stepper-step-title}}
     {{/progress-stepper-step-main}}
   {{/progress-stepper-step}}
   {{#> progress-stepper-step progress-stepper-step--IsFailure="true"}}
     {{> progress-stepper-step-icon}}
     {{#> progress-stepper-step-main}}
-      {{#> progress-stepper-step-title progress-stepper-step-title--type="span" progress-stepper-step-title--IsHelp="true"}}
+      {{#> progress-stepper-step-title progress-stepper-step-title--IsHelp="true"}}
         Second step
       {{/progress-stepper-step-title}}
     {{/progress-stepper-step-main}}
   {{/progress-stepper-step}}
   {{#> progress-stepper-step progress-stepper-step--IsInProgress="true" progress-stepper-step--IsCurrent="true"}}
     {{> progress-stepper-step-icon}}
     {{#> progress-stepper-step-main}}
-      {{#> progress-stepper-step-title progress-stepper-step-title--type="span" progress-stepper-step-title--IsHelp="true"}}
+      {{#> progress-stepper-step-title progress-stepper-step-title--IsHelp="true"}}
         Third step
       {{/progress-stepper-step-title}}
     {{/progress-stepper-step-main}}
@@ -378,7 +378,7 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 | `.progress-stepper__step-connector` | `<div>` | Creates the connecting line between steps **Required** |
 | `.progress-stepper__step-icon` | `<span>` | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
 | `.progress-stepper__step-main` | `<div>` | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required** |
-| `.progress-stepper__step-title` | `<div>` | Contains the title of the step. |
+| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
 | `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
 | `.pf-m-center`| `.pf-c-progress-stepper` | Modifies to center each step. |
 | `.pf-m-vertical`| `.pf-c-progress-stepper` | Modifies for vertical orientation. |
@@ -390,4 +390,3 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 | `.pf-m-current`| `.pf-c-progress-stepper__step` | Modifies styling for the current step. |
 | `.pf-m-pending`| `.pf-c-progress-stepper__step` | Modifies styling for pending steps. |
 | `.pf-m-help-text`| `.pf-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |
-

src/patternfly/components/ProgressStepper/progress-stepper-step-title.hbs

@@ -1,11 +1,9 @@
-<{{#if progress-stepper-step-title--type}}{{progress-stepper-step-title--type}}{{else}}div{{/if}} class="pf-c-progress-stepper__step-title{{#if progress-stepper-step-title--IsHelp}} pf-m-help-text{{/if}}{{#if progress-stepper-step-title--modifier}} {{progress-stepper-step-title--modifier}}{{/if}}"
+<{{#if progress-stepper-step-title--IsHelp}}button{{else}}div{{/if}} class="pf-c-progress-stepper__step-title{{#if progress-stepper-step-title--IsHelp}} pf-m-help-text{{/if}}{{#if progress-stepper-step-title--modifier}} {{progress-stepper-step-title--modifier}}{{/if}}"
   {{#if progress-stepper-step-title--IsHelp}}
-    role="button"
     type="button"
-    tabindex="0"
   {{/if}}
   {{#if progress-stepper-step-title--attribute}}
     {{{progress-stepper-step-title--attribute}}}
   {{/if}}>
   {{>@partial-block}}
-</{{#if progress-stepper-step-title--type}}{{progress-stepper-step-title--type}}{{else}}div{{/if}}>
+</{{#if progress-stepper-step-title--IsHelp}}button{{else}}div{{/if}}>

src/patternfly/components/ProgressStepper/progress-stepper.scss

@@ -272,6 +272,7 @@
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 
   &.pf-m-help-text {
     text-decoration: underline;