diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index 1577fa0bc83..0eeeeac3612 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -308,8 +308,6 @@ export class Action extends LitElement implements InteractiveComponent {
         disabled={disabled}
         id={buttonId}
         ref={this.buttonEl}
-        // tabIndex is required for the button to be focusable on click in safari.
-        tabIndex={disabled ? null : 0}
       >
         {buttonContent}
       </button>
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 29665e22f3a..1df52ecfc05 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -74,4 +74,9 @@
   max-inline-size: 1212px;
 }
 
+// prevents focus ring from showing when Shift key press succeed click on non-interactive area
+.container {
+  @apply outline-none;
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx
index adcbd2b34df..2976fa6220b 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -41,8 +41,6 @@ declare global {
 export class DatePicker extends LitElement {
   //#region Static Members
 
-  static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
-
   static override styles = styles;
 
   //#endregion
@@ -625,7 +623,13 @@ export class DatePicker extends LitElement {
 
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
 
-    return <>{this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate)}</>;
+    return (
+      <>
+        <div ariaHidden={true} class="container" tabIndex={-1}>
+          {this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate)}
+        </div>
+      </>
+    );
   }
 
   /**