Fix: A11y improvements

Author: dchyun

packages/components/src/components/hds/stepper/list/index.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<ul class={{this.classNames}} ...attributes>
+<ol class={{this.classNames}} ...attributes>
   {{yield
     (hash
       Step=(component
@@ -15,4 +15,4 @@
     )
     to="steps"
   }}
-</ul>
+</ol>

packages/components/src/components/hds/stepper/list/step.hbs

@@ -12,14 +12,14 @@
     />
   </div>
   <div class="hds-stepper-list__step__text">
-    <span class="sr-only">{{this.statusSrOnlyText}}</span>
     <Hds::Text::Display
       class="hds-stepper-list__step__title"
       @tag={{this.titleTag}}
       @size="300"
       @weight="medium"
       @color="primary"
     >
+      <span class="sr-only">{{this.statusSrOnlyText}}</span>
       {{yield to="title"}}
     </Hds::Text::Display>
     <Hds::Text::Body

packages/components/src/components/hds/stepper/navigation/index.hbs

@@ -2,40 +2,38 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}} ...attributes>
-  <ul class="hds-stepper-navigation__step-list">
-    {{#if @steps}}
-      {{#each @steps as |step|}}
-        <Hds::Stepper::Navigation::Step
-          @currentStep={{this.currentStep}}
-          @isComplete={{step.isComplete}}
-          @isInteractive={{step.isInteractive}}
-          @titleTag={{this.titleTag}}
-          @didInsertNode={{this.didInsertStep}}
-          @stepIds={{this._stepIds}}
-          @onStepChange={{@onStepChange}}
-          @onKeyUp={{this.onKeyUp}}
-        >
-          <:title>{{step.title}}</:title>
-          <:description>{{step.description}}</:description>
-        </Hds::Stepper::Navigation::Step>
-      {{/each}}
-    {{else}}
-      {{yield
-        (hash
-          Step=(component
-            "hds/stepper/navigation/step"
-            currentStep=this.currentStep
-            titleTag=this.titleTag
-            didInsertNode=this.didInsertStep
-            stepIds=this._stepIds
-            onStepChange=@onStepChange
-            onKeyUp=this.onKeyUp
-          )
+<ol class={{this.classNames}} ...attributes>
+  {{#if @steps}}
+    {{#each @steps as |step|}}
+      <Hds::Stepper::Navigation::Step
+        @currentStep={{this.currentStep}}
+        @isComplete={{step.isComplete}}
+        @isInteractive={{step.isInteractive}}
+        @titleTag={{this.titleTag}}
+        @didInsertNode={{this.didInsertStep}}
+        @stepIds={{this._stepIds}}
+        @onStepChange={{@onStepChange}}
+        @onKeyUp={{this.onKeyUp}}
+      >
+        <:title>{{step.title}}</:title>
+        <:description>{{step.description}}</:description>
+      </Hds::Stepper::Navigation::Step>
+    {{/each}}
+  {{else}}
+    {{yield
+      (hash
+        Step=(component
+          "hds/stepper/navigation/step"
+          currentStep=this.currentStep
+          titleTag=this.titleTag
+          didInsertNode=this.didInsertStep
+          stepIds=this._stepIds
+          onStepChange=@onStepChange
+          onKeyUp=this.onKeyUp
         )
-        to="steps"
-      }}
-    {{/if}}
-  </ul>
-</div>
+      )
+      to="steps"
+    }}
+  {{/if}}
+</ol>
 {{yield to="body"}}

packages/components/src/components/hds/stepper/navigation/step.hbs

@@ -22,14 +22,14 @@
         />
       </div>
       <div class="hds-stepper-navigation__step__text">
-        <span class="sr-only">{{this.statusSrOnlyText}}</span>
         <Hds::Text::Display
           class="hds-stepper-navigation__step__title"
           @tag={{this.titleTag}}
           @size="300"
           @weight="medium"
           @color="primary"
         >
+          <span class="sr-only">{{this.statusSrOnlyText}}</span>
           {{yield to="title"}}
         </Hds::Text::Display>
         <Hds::Text::Body

packages/components/src/styles/components/stepper/navigation.scss

@@ -9,14 +9,14 @@
 
 @use "../../mixins/focus-ring" as *;
 
-.hds-stepper-navigation__step-list,
+.hds-stepper-navigation,
 .hds-stepper-navigation__step {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.hds-stepper-navigation__step-list {
+.hds-stepper-navigation {
   display: flex;
 }