diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index aebc2d4c4ae..156bca542c7 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -176,6 +176,14 @@ governing permissions and limitations under the License.
 			);
 		}
 	}
+
+	&:hover:not(:disabled),
+	&:active:not(:disabled),
+	&:focus-visible:not(:disabled) {
+		@media (forced-colors: active) {
+			--highcontrast-infield-button-border-color: Highlight;
+		}
+	}
 }
 
 .spectrum-InfieldButton {
@@ -216,8 +224,9 @@ governing permissions and limitations under the License.
 		);
 		border-style: solid;
 		border-color: var(
-			--mod-infield-button-border-color,
-			var(--spectrum-infield-button-border-color)
+			--highcontrast-infield-button-border-color,
+			var(--mod-infield-button-border-color,
+			var(--spectrum-infield-button-border-color))
 		);
 		border-end-end-radius: var(
 			--mod-infield-button-border-radius,
@@ -310,6 +319,8 @@ governing permissions and limitations under the License.
 	}
 
 	&:focus-visible {
+		outline: none;
+
 		.spectrum-InfieldButton-fill {
 			background-color: var(
 				--mod-infield-button-background-color-key-focus,
@@ -406,8 +417,6 @@ governing permissions and limitations under the License.
 	}
 }
 
-
-
 .spectrum-InfieldButton-icon {
 	display: initial;
 
diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index e8b1a82998a..4aec477f3d3 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -15,6 +15,7 @@ export const Template = ({
   iconName = "Add",
   isDisabled,
   isInvalid,
+  tabIndex = 0,
   ...globals
 }) => {
   const { express } = globals;
@@ -35,10 +36,11 @@ export const Template = ({
         [`${rootClass}--quiet`]: isQuiet,
         "is-invalid": isInvalid,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })} 
+      })}
       ?disabled=${isDisabled}
       aria-haspopup="listbox"
       type="button"
+      tabIndex=${tabIndex}
     >
     <div class="${rootClass}-fill">
       ${when(iconName, () => Icon({
diff --git a/components/stepper/index.css b/components/stepper/index.css
index 93eedf16b3c..341b6166ec3 100644
--- a/components/stepper/index.css
+++ b/components/stepper/index.css
@@ -72,6 +72,11 @@ governing permissions and limitations under the License.
     --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover));
     --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus));
     --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
+    --mod-textfield-icon-spacing-inline-start-invalid: 0;
+
+    &:hover {
+      --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover));
+    }
 
     &.is-focused,
     &:focus {
@@ -86,7 +91,6 @@ governing permissions and limitations under the License.
     &:focus-visible {
       --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
     }
-
   }
 }
 
@@ -120,6 +124,7 @@ governing permissions and limitations under the License.
     --highcontrast-stepper-focus-indicator-color: Highlight;
   }
 }
+
 .x {
  border-radius: var(--spectrum-stepper-button-border-radius-reset);
 }
@@ -142,9 +147,11 @@ governing permissions and limitations under the License.
   }
 
   /*** Hover ***/
-  &:hover:not(.is-disabled) {
+  &:hover:not(.is-disabled, .is-invalid) {
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
+  }
 
+  &:hover {
     .spectrum-Stepper-input,
     .spectrum-Stepper-buttons {
       border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
@@ -154,12 +161,12 @@ governing permissions and limitations under the License.
   /*** Focused ***/
   &.is-focused,
   &:focus {
-    --mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-focus, var(--mod-stepper-button-background-color-focus, var(--spectrum-stepper-button-background-color-focus)));
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
 
     .spectrum-Stepper-input {
       outline: none;
     }
+
     .spectrum-Stepper-input,
     .spectrum-Stepper-buttons {
       border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
@@ -178,7 +185,6 @@ governing permissions and limitations under the License.
   /*** Keyboard Focused ***/
   &.is-keyboardFocused,
   &:focus-visible {
-    --mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-keyboard-focus, var(--mod-stepper-button-background-color-keyboard-focus, var(--spectrum-stepper-button-background-color-keyboard-focus)));
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
 
     /* keyboard focus indicator is visible */
@@ -201,6 +207,7 @@ governing permissions and limitations under the License.
 /*** Quiet ***/
 .spectrum-Stepper.spectrum-Stepper--quiet {
   --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+
   /* quiet corners are not rounded */
   border-start-start-radius: 0;
   border-start-end-radius: 0;
diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md
index aa81c18f4f0..b30c6007278 100644
--- a/components/stepper/metadata/mods.md
+++ b/components/stepper/metadata/mods.md
@@ -1,34 +1,32 @@
-| Modifiable Custom Properties                           |
-| ------------------------------------------------------ |
-| `--mod-stepper-animation-duration`                     |
-| `--mod-stepper-border-color`                           |
-| `--mod-stepper-border-color-focus`                     |
-| `--mod-stepper-border-color-focus-hover`               |
-| `--mod-stepper-border-color-focus-hover-invalid`       |
-| `--mod-stepper-border-color-focus-invalid`             |
-| `--mod-stepper-border-color-hover`                     |
-| `--mod-stepper-border-color-hover-invalid`             |
-| `--mod-stepper-border-color-invalid`                   |
-| `--mod-stepper-border-color-keyboard-focus`            |
-| `--mod-stepper-border-color-keyboard-focus-invalid`    |
-| `--mod-stepper-border-radius`                          |
-| `--mod-stepper-border-width`                           |
-| `--mod-stepper-button-background-color-focus`          |
-| `--mod-stepper-button-background-color-keyboard-focus` |
-| `--mod-stepper-button-border-width`                    |
-| `--mod-stepper-button-width`                           |
-| `--mod-stepper-button-width-quiet`                     |
-| `--mod-stepper-buttons-background-color`               |
-| `--mod-stepper-buttons-border-color`                   |
-| `--mod-stepper-buttons-border-color-focus`             |
-| `--mod-stepper-buttons-border-color-focus-hover`       |
-| `--mod-stepper-buttons-border-color-hover`             |
-| `--mod-stepper-buttons-border-color-keyboard-focus`    |
-| `--mod-stepper-buttons-border-style`                   |
-| `--mod-stepper-buttons-border-width`                   |
-| `--mod-stepper-focus-indicator-color`                  |
-| `--mod-stepper-focus-indicator-gap`                    |
-| `--mod-stepper-focus-indicator-width`                  |
-| `--mod-stepper-height`                                 |
-| `--mod-stepper-min-width-multiplier`                   |
-| `--mod-stepper-width`                                  |
+| Modifiable Custom Properties                        |
+| --------------------------------------------------- |
+| `--mod-stepper-animation-duration`                  |
+| `--mod-stepper-border-color`                        |
+| `--mod-stepper-border-color-focus`                  |
+| `--mod-stepper-border-color-focus-hover`            |
+| `--mod-stepper-border-color-focus-hover-invalid`    |
+| `--mod-stepper-border-color-focus-invalid`          |
+| `--mod-stepper-border-color-hover`                  |
+| `--mod-stepper-border-color-hover-invalid`          |
+| `--mod-stepper-border-color-invalid`                |
+| `--mod-stepper-border-color-keyboard-focus`         |
+| `--mod-stepper-border-color-keyboard-focus-invalid` |
+| `--mod-stepper-border-radius`                       |
+| `--mod-stepper-border-width`                        |
+| `--mod-stepper-button-border-width`                 |
+| `--mod-stepper-button-width`                        |
+| `--mod-stepper-button-width-quiet`                  |
+| `--mod-stepper-buttons-background-color`            |
+| `--mod-stepper-buttons-border-color`                |
+| `--mod-stepper-buttons-border-color-focus`          |
+| `--mod-stepper-buttons-border-color-focus-hover`    |
+| `--mod-stepper-buttons-border-color-hover`          |
+| `--mod-stepper-buttons-border-color-keyboard-focus` |
+| `--mod-stepper-buttons-border-style`                |
+| `--mod-stepper-buttons-border-width`                |
+| `--mod-stepper-focus-indicator-color`               |
+| `--mod-stepper-focus-indicator-gap`                 |
+| `--mod-stepper-focus-indicator-width`               |
+| `--mod-stepper-height`                              |
+| `--mod-stepper-min-width-multiplier`                |
+| `--mod-stepper-width`                               |
diff --git a/components/stepper/metadata/stepper.yml b/components/stepper/metadata/stepper.yml
index 0e45692d70d..5e92079ede1 100644
--- a/components/stepper/metadata/stepper.yml
+++ b/components/stepper/metadata/stepper.yml
@@ -35,14 +35,14 @@ examples:
               <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
             </div>
             <span class="spectrum-Stepper-buttons">
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                       <use xlink:href="#spectrum-css-icon-Chevron50" />
                     </svg>
                 </div>
               </button>
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                     <use xlink:href="#spectrum-css-icon-Chevron50" />
@@ -59,14 +59,14 @@ examples:
               <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
             </div>
             <div class="spectrum-Stepper-buttons">
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                       <use xlink:href="#spectrum-css-icon-Chevron75" />
                     </svg>
                 </div>
               </button>
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                     <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -83,14 +83,14 @@ examples:
               <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
             </div>
             <span class="spectrum-Stepper-buttons">
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                       <use xlink:href="#spectrum-css-icon-Chevron100" />
                     </svg>
                 </div>
               </button>
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                     <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -107,14 +107,14 @@ examples:
               <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
             </div>
             <span class="spectrum-Stepper-buttons">
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                       <use xlink:href="#spectrum-css-icon-Chevron200" />
                     </svg>
                 </div>
               </button>
-              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+              <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
                 <div class="spectrum-InfieldButton-fill">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                     <use xlink:href="#spectrum-css-icon-Chevron200" />
@@ -133,14 +133,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -157,14 +157,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -181,14 +181,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -205,14 +205,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -229,14 +229,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -253,14 +253,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" disabled>
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled>
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled>
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -277,14 +277,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -301,14 +301,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -325,14 +325,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -349,14 +349,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -373,14 +373,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -397,14 +397,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5">
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add">
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
@@ -421,14 +421,14 @@ examples:
           <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" min="-2" max="2" step="0.5" disabled>
         </div>
         <span class="spectrum-Stepper-buttons">
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled>
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--top spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
             </div>
           </button>
-          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled>
+          <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--bottom spectrum-Stepper-button" aria-haspopup="listbox" aria-label="Add" disabled tabindex="-1">
             <div class="spectrum-InfieldButton-fill">
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron75" />
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index ee42bf3be19..006251fdd9f 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -1,4 +1,5 @@
-// Import the component markup template
+import isChromatic from "chromatic/isChromatic";
+import { html } from "lit";
 import { Template } from "./template";
 
 export default {
@@ -94,10 +95,163 @@ export default {
 	},
 };
 
-export const Default = Template.bind({});
+export const Default = ({
+	...args
+}) => {
+	return html`
+		<div>
+			${Template({
+				...args
+			})}
+
+			${isChromatic() ? chromaticKitchenSink(args) : null}
+		</div>
+	`;
+};
 Default.args = {};
 
 export const HideStepper = Template.bind({});
 HideStepper.args = {
 	hideStepper: true,
 };
+
+const chromaticKitchenSink = (args) => html`
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isInvalid: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isInvalid: true,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isInvalid: true,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isDisabled: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isInvalid: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isInvalid: true,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isInvalid: true,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			isQuiet: true,
+			isDisabled: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isInvalid: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isInvalid: true,
+			isFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isInvalid: true,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style="padding: 8px 0">
+		${Template({
+			...args,
+			hideStepper: true,
+			isDisabled: true,
+		})}
+	</div>
+`;
diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js
index 0f5cbc62912..182059dc796 100644
--- a/components/stepper/stories/template.js
+++ b/components/stepper/stories/template.js
@@ -88,7 +88,8 @@ export const Template = ({
 							iconName: `ChevronUp${iconSize}`,
 							isDisabled,
 							isQuiet,
-							position: "top"
+							position: "top",
+							tabIndex: "-1"
 						})}
 						${InfieldButton({
 							...globals,
@@ -97,7 +98,8 @@ export const Template = ({
 							iconName: `ChevronDown${iconSize}`,
 							isDisabled,
 							isQuiet,
-							position: "bottom"
+							position: "bottom",
+							tabIndex: "-1"
 						})}
 				  </span>`}
 		</div>