diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts
index 5a749f10053..24a45efd3d6 100644
--- a/src/components/time-picker/time-picker.e2e.ts
+++ b/src/components/time-picker/time-picker.e2e.ts
@@ -59,13 +59,13 @@ describe("calcite-time-picker", () => {
 
   describe("should focus the first focusable element when setFocus is called (ltr)", () => {
     focusable(`calcite-time-picker`, {
-      shadowFocusTargetSelector: `.${CSS.buttonHourUp}`
+      shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`
     });
   });
 
   describe("should focus the first focusable element when setFocus is called (rtl)", () => {
     focusable(`<calcite-time-picker dir="rtl" lang="ar"></calcite-time-picker>`, {
-      shadowFocusTargetSelector: `.${CSS.buttonHourUp}`
+      shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`
     });
   });
 
diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx
index 0c467891e9f..b398e09de21 100644
--- a/src/components/time-picker/time-picker.tsx
+++ b/src/components/time-picker/time-picker.tsx
@@ -780,7 +780,6 @@ export class TimePicker
             onClick={this.incrementHour}
             onKeyDown={this.hourUpButtonKeyDownHandler}
             role="button"
-            tabIndex={-1}
           >
             <calcite-icon icon="chevron-up" scale={iconScale} />
           </span>
@@ -813,7 +812,6 @@ export class TimePicker
             onClick={this.decrementHour}
             onKeyDown={this.hourDownButtonKeyDownHandler}
             role="button"
-            tabIndex={-1}
           >
             <calcite-icon icon="chevron-down" scale={iconScale} />
           </span>
@@ -861,7 +859,6 @@ export class TimePicker
             onClick={this.decrementMinute}
             onKeyDown={this.minuteDownButtonKeyDownHandler}
             role="button"
-            tabIndex={-1}
           >
             <calcite-icon icon="chevron-down" scale={iconScale} />
           </span>
@@ -878,7 +875,6 @@ export class TimePicker
               onClick={this.incrementSecond}
               onKeyDown={this.secondUpButtonKeyDownHandler}
               role="button"
-              tabIndex={-1}
             >
               <calcite-icon icon="chevron-up" scale={iconScale} />
             </span>
@@ -910,7 +906,6 @@ export class TimePicker
               onClick={this.decrementSecond}
               onKeyDown={this.secondDownButtonKeyDownHandler}
               role="button"
-              tabIndex={-1}
             >
               <calcite-icon icon="chevron-down" scale={iconScale} />
             </span>
@@ -937,7 +932,6 @@ export class TimePicker
               onClick={this.incrementMeridiem}
               onKeyDown={this.meridiemUpButtonKeyDownHandler}
               role="button"
-              tabIndex={-1}
             >
               <calcite-icon icon="chevron-up" scale={iconScale} />
             </span>
@@ -970,7 +964,6 @@ export class TimePicker
               onClick={this.decrementMeridiem}
               onKeyDown={this.meridiemDownButtonKeyDownHandler}
               role="button"
-              tabIndex={-1}
             >
               <calcite-icon icon="chevron-down" scale={iconScale} />
             </span>