From 6cdda54e10095661fc9d374cd6e3ba5e7b17cfe1 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 08:09:55 +0200
Subject: [PATCH] fix: make integration warnings keyboard accessible

---
 .../src/common/integration-error-indicator.tsx     | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
index 567a1a01a..fab368cad 100644
--- a/packages/widgets/src/common/integration-error-indicator.tsx
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Tooltip, VisuallyHidden } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -24,15 +24,9 @@ export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicator
   const label = `${t("common.error")}: ${names}`;
   return (
     <Tooltip label={label} position="left" withArrow>
-      <span style={{ display: "inline-flex" }}>
-        <IconAlertTriangle
-          aria-hidden
-          size={14}
-          color="var(--mantine-color-orange-6)"
-          style={{ cursor: "help", flexShrink: 0 }}
-        />
-        <VisuallyHidden>{label}</VisuallyHidden>
-      </span>
+      <ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
+        <IconAlertTriangle aria-hidden size={14} />
+      </ActionIcon>
     </Tooltip>
   );
 }