diff --git a/src/calendar_container.tsx b/src/calendar_container.tsx
index 2828e3750..a7b2d4e1e 100644
--- a/src/calendar_container.tsx
+++ b/src/calendar_container.tsx
@@ -25,6 +25,7 @@ const CalendarContainer: React.FC<CalendarContainerProps> = function ({
       aria-label={ariaLabel}
       role={inline ? undefined : "dialog"}
       aria-modal={inline ? undefined : "true"}
+      translate="no"
     >
       {children}
     </div>
diff --git a/src/test/calendar_container.test.tsx b/src/test/calendar_container.test.tsx
index 6edbca40b..d0e5b41ca 100644
--- a/src/test/calendar_container.test.tsx
+++ b/src/test/calendar_container.test.tsx
@@ -98,4 +98,16 @@ describe("CalendarContainer", () => {
     expect(dialog?.getAttribute("aria-modal")).toBe("true");
     expect(dialog?.getAttribute("aria-label")).toBe("Choose Date");
   });
+
+  it("has translate='no' to prevent browser auto-translation breaking the calendar", () => {
+    // Fixes #5824 - Safari auto-translate breaks calendar navigation
+    const { container } = render(
+      <CalendarContainer>
+        <div>Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.getAttribute("translate")).toBe("no");
+  });
 });