From 12fd938272b66d9a789a94acc90a2a8c8455f79d Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Wed, 6 Sep 2023 16:19:01 -0500
Subject: [PATCH 01/10] fix(stepper): improves AT Users experience with screen
 readers

---
 .../components/stepper-item/stepper-item.scss |  3 +++
 .../components/stepper-item/stepper-item.tsx  |  4 +--
 .../src/components/stepper/stepper.tsx        | 25 +++++++++++--------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 6f97b9235f7..2fd192cd5e8 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -347,5 +347,8 @@
     border-color: highlight;
   }
 }
+.visually-hidden {
+  @apply sr-only;
+}
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 6a0527219aa..19d597feb26 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -12,7 +12,6 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { toAriaBoolean } from "../../utils/dom";
 import { Layout, Scale } from "../interfaces";
 import {
   connectInteractive,
@@ -210,11 +209,12 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   render(): VNode {
     return (
       <Host
-        aria-expanded={toAriaBoolean(this.selected)}
+        aria-current={this.selected ? "step" : "false"}
         onClick={this.handleItemClick}
         onKeyDown={this.keyDownHandler}
       >
         <div class="container">
+          {this.complete && <span class="visually-hidden">{" Completed Step"}</span>}
           <div
             class="stepper-item-header"
             tabIndex={
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index bb15cee58bb..4f4b718a9c2 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Listen,
   Method,
   Prop,
@@ -112,17 +113,19 @@ export class Stepper {
 
   render(): VNode {
     return (
-      <slot
-        onSlotchange={(event: Event) => {
-          const items = (event.currentTarget as HTMLSlotElement)
-            .assignedElements()
-            .filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
-          const spacing = Array(items.length).fill("1fr").join(" ");
-          this.el.style.gridTemplateAreas = spacing;
-          this.el.style.gridTemplateColumns = spacing;
-          this.setStepperItemNumberingSystem();
-        }}
-      />
+      <Host aria-label="progress step indicator">
+        <slot
+          onSlotchange={(event: Event) => {
+            const items = (event.currentTarget as HTMLSlotElement)
+              .assignedElements()
+              .filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
+            const spacing = Array(items.length).fill("1fr").join(" ");
+            this.el.style.gridTemplateAreas = spacing;
+            this.el.style.gridTemplateColumns = spacing;
+            this.setStepperItemNumberingSystem();
+          }}
+        />
+      </Host>
     );
   }
 

From 7595f3d5a6d43cf71d7faf66fe9def8fe0cef598 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Wed, 6 Sep 2023 16:20:33 -0500
Subject: [PATCH 02/10] remove space

---
 .../src/components/stepper-item/stepper-item.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 19d597feb26..d590109c9f4 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -214,7 +214,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
         onKeyDown={this.keyDownHandler}
       >
         <div class="container">
-          {this.complete && <span class="visually-hidden">{" Completed Step"}</span>}
+          {this.complete && <span class="visually-hidden">{"Completed Step"}</span>}
           <div
             class="stepper-item-header"
             tabIndex={

From 637948e4ccc4a5ffe7a56d5fc896253b7b50c501 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Thu, 7 Sep 2023 15:16:41 -0500
Subject: [PATCH 03/10] add aria-live attr

---
 .../src/components/stepper-item/stepper-item.tsx            | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index d590109c9f4..bf0c37d2e64 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -214,7 +214,11 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
         onKeyDown={this.keyDownHandler}
       >
         <div class="container">
-          {this.complete && <span class="visually-hidden">{"Completed Step"}</span>}
+          {this.complete && (
+            <span aria-live="polite" class="visually-hidden">
+              {"Completed Step"}
+            </span>
+          )}
           <div
             class="stepper-item-header"
             tabIndex={

From 8a0eb3a73b808a74df11d45e4f9d4c6acefad10b Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Sep 2023 11:47:10 -0500
Subject: [PATCH 04/10] remove aria-current

---
 .../src/components/stepper-item/stepper-item.tsx             | 5 ++++-
 .../calcite-components/src/components/stepper/stepper.tsx    | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index bf0c37d2e64..dca37145bc3 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -207,9 +207,12 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   }
 
   render(): VNode {
+    const hostAttributes = {
+      "aria-current": "step",
+    };
     return (
       <Host
-        aria-current={this.selected ? "step" : "false"}
+        {...(this.selected ? hostAttributes : {})}
         onClick={this.handleItemClick}
         onKeyDown={this.keyDownHandler}
       >
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 4f4b718a9c2..84aa2f2440a 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -113,7 +113,7 @@ export class Stepper {
 
   render(): VNode {
     return (
-      <Host aria-label="progress step indicator">
+      <Host aria-label="progress step indicator" role="group">
         <slot
           onSlotchange={(event: Event) => {
             const items = (event.currentTarget as HTMLSlotElement)

From 3c6d63c8a4ba02a736c6bade5090f4d345c21ea5 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Sep 2023 14:09:46 -0500
Subject: [PATCH 05/10] add support for builtin translation

---
 .../assets/stepper-item/t9n/messages.json     |  3 ++
 .../assets/stepper-item/t9n/messages_en.json  |  3 ++
 .../components/stepper-item/stepper-item.tsx  | 38 +++++++++++---
 .../stepper/assets/stepper/t9n/messages.json  |  3 ++
 .../assets/stepper/t9n/messages_en.json       |  3 ++
 .../src/components/stepper/stepper.tsx        | 50 +++++++++++++++++--
 t9nmanifest.txt                               |  2 +
 7 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages.json
 create mode 100644 packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages_en.json
 create mode 100644 packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages.json
 create mode 100644 packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_en.json

diff --git a/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages.json b/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages.json
new file mode 100644
index 00000000000..ec345993749
--- /dev/null
+++ b/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages.json
@@ -0,0 +1,3 @@
+{
+  "complete": "Completed step"
+}
diff --git a/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages_en.json b/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages_en.json
new file mode 100644
index 00000000000..ec345993749
--- /dev/null
+++ b/packages/calcite-components/src/components/stepper-item/assets/stepper-item/t9n/messages_en.json
@@ -0,0 +1,3 @@
+{
+  "complete": "Completed step"
+}
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index dca37145bc3..e83ee32807c 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -37,6 +37,8 @@ import {
   LoadableComponent,
   componentFocusable,
 } from "../../utils/loadable";
+import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
+import { StepperItemMessages } from "./assets/stepper-item/t9n";
 
 /**
  * @slot - A slot for adding custom content.
@@ -45,8 +47,11 @@ import {
   tag: "calcite-stepper-item",
   styleUrl: "stepper-item.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
+export class StepperItem
+  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -108,6 +113,25 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
    */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperItemMessages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: StepperItemMessages;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    // wired up by t9n util
+  }
+
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
    *
@@ -132,6 +156,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
 
   @Watch("effectiveLocale")
   effectiveLocaleWatcher(locale: string): void {
+    updateMessages(this, this.effectiveLocale);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -139,6 +164,8 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
     };
   }
 
+  @State() defaultMessages: StepperItemMessages;
+
   headerEl: HTMLDivElement;
 
   //--------------------------------------------------------------------------
@@ -180,6 +207,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
+    connectMessages(this);
   }
 
   componentWillLoad(): void {
@@ -204,22 +232,20 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   disconnectedCallback(): void {
     disconnectInteractive(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
 
   render(): VNode {
-    const hostAttributes = {
-      "aria-current": "step",
-    };
     return (
       <Host
-        {...(this.selected ? hostAttributes : {})}
+        aria-current={this.selected ? "step" : "false"}
         onClick={this.handleItemClick}
         onKeyDown={this.keyDownHandler}
       >
         <div class="container">
           {this.complete && (
             <span aria-live="polite" class="visually-hidden">
-              {"Completed Step"}
+              {this.messages?.complete}
             </span>
           )}
           <div
diff --git a/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages.json b/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages.json
new file mode 100644
index 00000000000..32fc7ca0407
--- /dev/null
+++ b/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages.json
@@ -0,0 +1,3 @@
+{
+  "label": "Progress steps"
+}
diff --git a/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_en.json b/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_en.json
new file mode 100644
index 00000000000..32fc7ca0407
--- /dev/null
+++ b/packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_en.json
@@ -0,0 +1,3 @@
+{
+  "label": "Progress steps"
+}
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 84aa2f2440a..89d8507fda6 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -8,15 +8,23 @@ import {
   Listen,
   Method,
   Prop,
+  State,
   VNode,
   Watch,
 } from "@stencil/core";
 
 import { focusElementInGroup } from "../../utils/dom";
-import { NumberingSystem } from "../../utils/locale";
+import {
+  connectLocalized,
+  disconnectLocalized,
+  LocalizedComponent,
+  NumberingSystem,
+} from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { createObserver } from "../../utils/observers";
+import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
+import { StepperMessages } from "./assets/stepper/t9n";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -25,8 +33,9 @@ import { createObserver } from "../../utils/observers";
   tag: "calcite-stepper",
   styleUrl: "stepper.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class Stepper {
+export class Stepper implements T9nComponent, LocalizedComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -39,6 +48,25 @@ export class Stepper {
   /** Defines the layout of the component. */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperMessages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: StepperMessages;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    // wired up by t9n util
+  }
+
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
@@ -100,6 +128,8 @@ export class Stepper {
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateItems();
+    connectMessages(this);
+    connectLocalized(this);
   }
 
   componentDidLoad(): void {
@@ -111,9 +141,14 @@ export class Stepper {
     }
   }
 
+  disconnectedCallback(): void {
+    disconnectMessages(this);
+    disconnectLocalized(this);
+  }
+
   render(): VNode {
     return (
-      <Host aria-label="progress step indicator" role="group">
+      <Host aria-label={this.messages?.label} role="region">
         <slot
           onSlotchange={(event: Event) => {
             const items = (event.currentTarget as HTMLSlotElement)
@@ -265,6 +300,15 @@ export class Stepper {
 
   @Element() el: HTMLCalciteStepperElement;
 
+  @State() defaultMessages: StepperMessages;
+
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
 
   /** list of sorted Stepper items */
diff --git a/t9nmanifest.txt b/t9nmanifest.txt
index 38bb14869aa..c7c12358e45 100644
--- a/t9nmanifest.txt
+++ b/t9nmanifest.txt
@@ -33,6 +33,8 @@ packages\calcite-components\src\components\popover\assets\popover\t9n
 packages\calcite-components\src\components\rating\assets\rating\t9n
 packages\calcite-components\src\components\scrim\assets\scrim\t9n
 packages\calcite-components\src\components\shell-panel\assets\shell-panel\t9n
+packages\calcite-components\src\components\stepper\assets\stepper\t9n
+packages\calcite-components\src\components\stepper-item\assets\stepper-item\t9n
 packages\calcite-components\src\components\tab-title\assets\tab-title\t9n
 packages\calcite-components\src\components\table\assets\table\t9n
 packages\calcite-components\src\components\table-cell\assets\table-cell\t9n

From bff99b50974f818e343110c7fa9806f825b3c451 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Sep 2023 14:49:20 -0500
Subject: [PATCH 06/10] refactor

---
 .../components/stepper-item/stepper-item.tsx  | 32 +-----------
 .../src/components/stepper/stepper.tsx        | 49 ++-----------------
 2 files changed, 5 insertions(+), 76 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index e83ee32807c..d8aa7f53a52 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -37,8 +37,6 @@ import {
   LoadableComponent,
   componentFocusable,
 } from "../../utils/loadable";
-import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
-import { StepperItemMessages } from "./assets/stepper-item/t9n";
 
 /**
  * @slot - A slot for adding custom content.
@@ -49,9 +47,7 @@ import { StepperItemMessages } from "./assets/stepper-item/t9n";
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class StepperItem
-  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent
-{
+export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -113,25 +109,6 @@ export class StepperItem
    */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
 
-  /**
-   * Made into a prop for testing purposes only
-   *
-   * @internal
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messages: StepperItemMessages;
-
-  /**
-   * Use this property to override individual strings used by the component.
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messageOverrides: StepperItemMessages;
-
-  @Watch("messageOverrides")
-  onMessagesChange(): void {
-    // wired up by t9n util
-  }
-
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
    *
@@ -156,7 +133,6 @@ export class StepperItem
 
   @Watch("effectiveLocale")
   effectiveLocaleWatcher(locale: string): void {
-    updateMessages(this, this.effectiveLocale);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -164,8 +140,6 @@ export class StepperItem
     };
   }
 
-  @State() defaultMessages: StepperItemMessages;
-
   headerEl: HTMLDivElement;
 
   //--------------------------------------------------------------------------
@@ -207,7 +181,6 @@ export class StepperItem
   connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
-    connectMessages(this);
   }
 
   componentWillLoad(): void {
@@ -232,7 +205,6 @@ export class StepperItem
   disconnectedCallback(): void {
     disconnectInteractive(this);
     disconnectLocalized(this);
-    disconnectMessages(this);
   }
 
   render(): VNode {
@@ -245,7 +217,7 @@ export class StepperItem
         <div class="container">
           {this.complete && (
             <span aria-live="polite" class="visually-hidden">
-              {this.messages?.complete}
+              {"Completed step"}
             </span>
           )}
           <div
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 89d8507fda6..53503275357 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -8,23 +8,15 @@ import {
   Listen,
   Method,
   Prop,
-  State,
   VNode,
   Watch,
 } from "@stencil/core";
 
 import { focusElementInGroup } from "../../utils/dom";
-import {
-  connectLocalized,
-  disconnectLocalized,
-  LocalizedComponent,
-  NumberingSystem,
-} from "../../utils/locale";
+import { NumberingSystem } from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { createObserver } from "../../utils/observers";
-import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
-import { StepperMessages } from "./assets/stepper/t9n";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -35,7 +27,7 @@ import { StepperMessages } from "./assets/stepper/t9n";
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class Stepper implements T9nComponent, LocalizedComponent {
+export class Stepper {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -48,25 +40,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
   /** Defines the layout of the component. */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
 
-  /**
-   * Made into a prop for testing purposes only
-   *
-   * @internal
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messages: StepperMessages;
-
-  /**
-   * Use this property to override individual strings used by the component.
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messageOverrides: StepperMessages;
-
-  @Watch("messageOverrides")
-  onMessagesChange(): void {
-    // wired up by t9n util
-  }
-
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
@@ -128,8 +101,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateItems();
-    connectMessages(this);
-    connectLocalized(this);
   }
 
   componentDidLoad(): void {
@@ -141,14 +112,9 @@ export class Stepper implements T9nComponent, LocalizedComponent {
     }
   }
 
-  disconnectedCallback(): void {
-    disconnectMessages(this);
-    disconnectLocalized(this);
-  }
-
   render(): VNode {
     return (
-      <Host aria-label={this.messages?.label} role="region">
+      <Host aria-label={"Progress steps"} role="region">
         <slot
           onSlotchange={(event: Event) => {
             const items = (event.currentTarget as HTMLSlotElement)
@@ -300,15 +266,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
 
   @Element() el: HTMLCalciteStepperElement;
 
-  @State() defaultMessages: StepperMessages;
-
-  @State() effectiveLocale = "";
-
-  @Watch("effectiveLocale")
-  effectiveLocaleChange(): void {
-    updateMessages(this, this.effectiveLocale);
-  }
-
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
 
   /** list of sorted Stepper items */

From a06c086b2bbd296b933a529d61f81cfd168d6c71 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Sep 2023 15:47:01 -0500
Subject: [PATCH 07/10] add tests

---
 .../components/stepper-item/stepper-item.scss |  1 +
 .../components/stepper-item/stepper-item.tsx  |  1 -
 .../src/components/stepper/stepper.e2e.ts     | 33 ++++++++++++++++---
 .../src/components/stepper/stepper.tsx        |  1 -
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 2fd192cd5e8..834e749f678 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -347,6 +347,7 @@
     border-color: highlight;
   }
 }
+
 .visually-hidden {
   @apply sr-only;
 }
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index d8aa7f53a52..33b8b3e7c13 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -45,7 +45,6 @@ import {
   tag: "calcite-stepper-item",
   styleUrl: "stepper-item.scss",
   shadow: true,
-  assetsDirs: ["assets"],
 })
 export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
   //--------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 0d46f302023..1b9512e61b2 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -3,6 +3,11 @@ import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { NumberStringFormatOptions } from "../../utils/locale";
 
+// we use browser-context function to click on items to workaround `E2EElement#click` error
+async function itemClicker(item: HTMLCalciteStepperItemElement) {
+  item.click();
+}
+
 // todo test the automatic setting of first item to selected
 describe("calcite-stepper", () => {
   describe("defaults", () => {
@@ -482,11 +487,6 @@ describe("calcite-stepper", () => {
       await page.waitForChanges();
       expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
 
-      // we use browser-context function to click on items to workaround `E2EElement#click` error
-      async function itemClicker(item: HTMLCalciteStepperItemElement) {
-        item.click();
-      }
-
       await page.$eval("#step-2", itemClicker);
       expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
       expect(await getSelectedItemId()).toBe("step-2");
@@ -640,4 +640,27 @@ describe("calcite-stepper", () => {
     );
     expect(stepper2Number.textContent).toBe(`${thaiNumeral1}.`);
   });
+
+  it("should have correct ARIA attributes", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-stepper>
+      <calcite-stepper-item heading="Step 1" id="step-1">
+        <div>Step 1 content</div>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Step 2" id="step-2">
+        <div>Step 2 content</div>
+      </calcite-stepper-item>
+    </calcite-stepper>`);
+
+    const stepper = await page.find("calcite-stepper");
+    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+    const messages = await import(`./assets/stepper/t9n/messages.json`);
+
+    expect(stepper.getAttribute("aria-label")).toEqual(messages.label);
+    expect(stepperItem1.getAttribute("aria-current")).toEqual("step");
+
+    await page.$eval("#step-2", itemClicker);
+    await page.waitForChanges();
+    expect(stepperItem2.getAttribute("aria-current")).toEqual("step");
+  });
 });
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 53503275357..99f4d08c839 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -25,7 +25,6 @@ import { createObserver } from "../../utils/observers";
   tag: "calcite-stepper",
   styleUrl: "stepper.scss",
   shadow: true,
-  assetsDirs: ["assets"],
 })
 export class Stepper {
   //--------------------------------------------------------------------------

From 540c7e539602327d7fb9c79653a3abeae87b1b11 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Sep 2023 17:00:45 -0500
Subject: [PATCH 08/10] feedback changes

---
 .../src/components/stepper-item/resources.ts  | 10 ++++++++
 .../components/stepper-item/stepper-item.tsx  | 19 ++++++++-------
 .../src/components/stepper/stepper.tsx        | 23 +++++++++----------
 3 files changed, 32 insertions(+), 20 deletions(-)
 create mode 100644 packages/calcite-components/src/components/stepper-item/resources.ts

diff --git a/packages/calcite-components/src/components/stepper-item/resources.ts b/packages/calcite-components/src/components/stepper-item/resources.ts
new file mode 100644
index 00000000000..750491b2cb5
--- /dev/null
+++ b/packages/calcite-components/src/components/stepper-item/resources.ts
@@ -0,0 +1,10 @@
+export const CSS = {
+  container: "container",
+  stepperItemContent: "stepper-item-content",
+  stepperItemDescription: "stepper-item-description",
+  stepperItemHeader: "stepper-item-header",
+  stepperItemHeading: "stepper-item-heading",
+  stepperItemHeaderText: "stepper-item-header-text",
+  stepperItemNumber: "stepper-item-number",
+  visuallyHidden: "visually-hidden",
+};
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 33b8b3e7c13..7f432d41b1e 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -37,6 +37,7 @@ import {
   LoadableComponent,
   componentFocusable,
 } from "../../utils/loadable";
+import { CSS } from "./resources";
 
 /**
  * @slot - A slot for adding custom content.
@@ -213,14 +214,14 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
         onClick={this.handleItemClick}
         onKeyDown={this.keyDownHandler}
       >
-        <div class="container">
+        <div class={CSS.container}>
           {this.complete && (
-            <span aria-live="polite" class="visually-hidden">
+            <span aria-live="polite" class={CSS.visuallyHidden}>
               {"Completed step"}
             </span>
           )}
           <div
-            class="stepper-item-header"
+            class={CSS.stepperItemHeader}
             tabIndex={
               /* additional tab index logic needed because of display: contents */
               this.layout === "horizontal" && !this.disabled ? 0 : null
@@ -229,13 +230,15 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
             ref={(el) => (this.headerEl = el)}
           >
             {this.icon ? this.renderIcon() : null}
-            {this.numbered ? <div class="stepper-item-number">{this.renderNumbers()}.</div> : null}
-            <div class="stepper-item-header-text">
-              <span class="stepper-item-heading">{this.heading}</span>
-              <span class="stepper-item-description">{this.description}</span>
+            {this.numbered ? (
+              <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>
+            ) : null}
+            <div class={CSS.stepperItemHeaderText}>
+              <span class={CSS.stepperItemHeading}>{this.heading}</span>
+              <span class={CSS.stepperItemDescription}>{this.description}</span>
             </div>
           </div>
-          <div class="stepper-item-content">
+          <div class={CSS.stepperItemContent}>
             <slot />
           </div>
         </div>
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 99f4d08c839..9cd606bd9a9 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -12,7 +12,7 @@ import {
   Watch,
 } from "@stencil/core";
 
-import { focusElementInGroup } from "../../utils/dom";
+import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import { NumberingSystem } from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
@@ -114,17 +114,7 @@ export class Stepper {
   render(): VNode {
     return (
       <Host aria-label={"Progress steps"} role="region">
-        <slot
-          onSlotchange={(event: Event) => {
-            const items = (event.currentTarget as HTMLSlotElement)
-              .assignedElements()
-              .filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
-            const spacing = Array(items.length).fill("1fr").join(" ");
-            this.el.style.gridTemplateAreas = spacing;
-            this.el.style.gridTemplateColumns = spacing;
-            this.setStepperItemNumberingSystem();
-          }}
-        />
+        <slot onSlotchange={this.handleDefaultSlotChange} />
       </Host>
     );
   }
@@ -334,4 +324,13 @@ export class Stepper {
       item.numberingSystem = this.numberingSystem;
     });
   }
+
+  private handleDefaultSlotChange = (event: Event): void => {
+    const slottedItems = slotChangeGetAssignedElements(event);
+    const items = slottedItems.filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
+    const spacing = Array(items.length).fill("1fr").join(" ");
+    this.el.style.gridTemplateAreas = spacing;
+    this.el.style.gridTemplateColumns = spacing;
+    this.setStepperItemNumberingSystem();
+  };
 }

From 57ca2d37448268c9d3aec0bafa12d82e54673739 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 15 Sep 2023 11:58:38 -0500
Subject: [PATCH 09/10] add back t9ncomponent

---
 .../components/stepper-item/stepper-item.tsx  | 33 +++++++++++-
 .../src/components/stepper/stepper.tsx        | 50 +++++++++++++++++--
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 7f432d41b1e..a0c03c2157b 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -37,6 +37,8 @@ import {
   LoadableComponent,
   componentFocusable,
 } from "../../utils/loadable";
+import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
+import { StepperItemMessages } from "./assets/stepper-item/t9n";
 import { CSS } from "./resources";
 
 /**
@@ -46,8 +48,11 @@ import { CSS } from "./resources";
   tag: "calcite-stepper-item",
   styleUrl: "stepper-item.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
+export class StepperItem
+  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -109,6 +114,25 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
    */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperItemMessages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: StepperItemMessages;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    // wired up by t9n util
+  }
+
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
    *
@@ -129,10 +153,13 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   //
   //--------------------------------------------------------------------------
 
+  @State() defaultMessages: StepperItemMessages;
+
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
   effectiveLocaleWatcher(locale: string): void {
+    updateMessages(this, this.effectiveLocale);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -181,6 +208,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
+    connectMessages(this);
   }
 
   componentWillLoad(): void {
@@ -205,6 +233,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   disconnectedCallback(): void {
     disconnectInteractive(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
 
   render(): VNode {
@@ -217,7 +246,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
         <div class={CSS.container}>
           {this.complete && (
             <span aria-live="polite" class={CSS.visuallyHidden}>
-              {"Completed step"}
+              {this.messages?.complete}
             </span>
           )}
           <div
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 9cd606bd9a9..c8b9d0c6e69 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -8,15 +8,23 @@ import {
   Listen,
   Method,
   Prop,
+  State,
   VNode,
   Watch,
 } from "@stencil/core";
 
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
-import { NumberingSystem } from "../../utils/locale";
+import {
+  connectLocalized,
+  disconnectLocalized,
+  LocalizedComponent,
+  NumberingSystem,
+} from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { createObserver } from "../../utils/observers";
+import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
+import { StepperMessages } from "./assets/stepper/t9n";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -25,8 +33,9 @@ import { createObserver } from "../../utils/observers";
   tag: "calcite-stepper",
   styleUrl: "stepper.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class Stepper {
+export class Stepper implements T9nComponent, LocalizedComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -39,6 +48,25 @@ export class Stepper {
   /** Defines the layout of the component. */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperMessages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: StepperMessages;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    // wired up by t9n util
+  }
+
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
@@ -100,6 +128,8 @@ export class Stepper {
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateItems();
+    connectMessages(this);
+    connectLocalized(this);
   }
 
   componentDidLoad(): void {
@@ -111,9 +141,14 @@ export class Stepper {
     }
   }
 
+  disconnectedCallback(): void {
+    disconnectMessages(this);
+    disconnectLocalized(this);
+  }
+
   render(): VNode {
     return (
-      <Host aria-label={"Progress steps"} role="region">
+      <Host aria-label={this.messages?.label} role="region">
         <slot onSlotchange={this.handleDefaultSlotChange} />
       </Host>
     );
@@ -255,6 +290,15 @@ export class Stepper {
 
   @Element() el: HTMLCalciteStepperElement;
 
+  @State() defaultMessages: StepperMessages;
+
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
 
   /** list of sorted Stepper items */

From b9c9dc4801abc664ae7d9bd00a93f7d6d694b70c Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 18 Sep 2023 11:36:32 -0500
Subject: [PATCH 10/10] remove builtin translation

---
 .../components/stepper-item/stepper-item.tsx  | 33 +-----------
 .../src/components/stepper/stepper.tsx        | 50 ++-----------------
 2 files changed, 5 insertions(+), 78 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index a0c03c2157b..7f432d41b1e 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -37,8 +37,6 @@ import {
   LoadableComponent,
   componentFocusable,
 } from "../../utils/loadable";
-import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
-import { StepperItemMessages } from "./assets/stepper-item/t9n";
 import { CSS } from "./resources";
 
 /**
@@ -48,11 +46,8 @@ import { CSS } from "./resources";
   tag: "calcite-stepper-item",
   styleUrl: "stepper-item.scss",
   shadow: true,
-  assetsDirs: ["assets"],
 })
-export class StepperItem
-  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent
-{
+export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -114,25 +109,6 @@ export class StepperItem
    */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
 
-  /**
-   * Made into a prop for testing purposes only
-   *
-   * @internal
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messages: StepperItemMessages;
-
-  /**
-   * Use this property to override individual strings used by the component.
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messageOverrides: StepperItemMessages;
-
-  @Watch("messageOverrides")
-  onMessagesChange(): void {
-    // wired up by t9n util
-  }
-
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
    *
@@ -153,13 +129,10 @@ export class StepperItem
   //
   //--------------------------------------------------------------------------
 
-  @State() defaultMessages: StepperItemMessages;
-
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
   effectiveLocaleWatcher(locale: string): void {
-    updateMessages(this, this.effectiveLocale);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -208,7 +181,6 @@ export class StepperItem
   connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
-    connectMessages(this);
   }
 
   componentWillLoad(): void {
@@ -233,7 +205,6 @@ export class StepperItem
   disconnectedCallback(): void {
     disconnectInteractive(this);
     disconnectLocalized(this);
-    disconnectMessages(this);
   }
 
   render(): VNode {
@@ -246,7 +217,7 @@ export class StepperItem
         <div class={CSS.container}>
           {this.complete && (
             <span aria-live="polite" class={CSS.visuallyHidden}>
-              {this.messages?.complete}
+              {"Completed step"}
             </span>
           )}
           <div
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index c8b9d0c6e69..9cd606bd9a9 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -8,23 +8,15 @@ import {
   Listen,
   Method,
   Prop,
-  State,
   VNode,
   Watch,
 } from "@stencil/core";
 
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
-import {
-  connectLocalized,
-  disconnectLocalized,
-  LocalizedComponent,
-  NumberingSystem,
-} from "../../utils/locale";
+import { NumberingSystem } from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { createObserver } from "../../utils/observers";
-import { connectMessages, disconnectMessages, T9nComponent, updateMessages } from "../../utils/t9n";
-import { StepperMessages } from "./assets/stepper/t9n";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -33,9 +25,8 @@ import { StepperMessages } from "./assets/stepper/t9n";
   tag: "calcite-stepper",
   styleUrl: "stepper.scss",
   shadow: true,
-  assetsDirs: ["assets"],
 })
-export class Stepper implements T9nComponent, LocalizedComponent {
+export class Stepper {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -48,25 +39,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
   /** Defines the layout of the component. */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
 
-  /**
-   * Made into a prop for testing purposes only
-   *
-   * @internal
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messages: StepperMessages;
-
-  /**
-   * Use this property to override individual strings used by the component.
-   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
-  @Prop({ mutable: true }) messageOverrides: StepperMessages;
-
-  @Watch("messageOverrides")
-  onMessagesChange(): void {
-    // wired up by t9n util
-  }
-
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
@@ -128,8 +100,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateItems();
-    connectMessages(this);
-    connectLocalized(this);
   }
 
   componentDidLoad(): void {
@@ -141,14 +111,9 @@ export class Stepper implements T9nComponent, LocalizedComponent {
     }
   }
 
-  disconnectedCallback(): void {
-    disconnectMessages(this);
-    disconnectLocalized(this);
-  }
-
   render(): VNode {
     return (
-      <Host aria-label={this.messages?.label} role="region">
+      <Host aria-label={"Progress steps"} role="region">
         <slot onSlotchange={this.handleDefaultSlotChange} />
       </Host>
     );
@@ -290,15 +255,6 @@ export class Stepper implements T9nComponent, LocalizedComponent {
 
   @Element() el: HTMLCalciteStepperElement;
 
-  @State() defaultMessages: StepperMessages;
-
-  @State() effectiveLocale = "";
-
-  @Watch("effectiveLocale")
-  effectiveLocaleChange(): void {
-    updateMessages(this, this.effectiveLocale);
-  }
-
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
 
   /** list of sorted Stepper items */