@eclass/ui-kit 1.54.18 → 1.54.20

package/dist/eclass-ui-kit.es.js

@@ -3386,8 +3386,7 @@ function BoxTraditional({
       transition: "box-shadow .3s",
       overflow: "hidden",
       _hover: cssActive,
-      _active: cssActive,
-      _focusWithin: {
+      _focusVisible: {
         boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
       },
       tabIndex: 0,
@@ -3441,8 +3440,12 @@ function BoxImage({
   };
   return /* @__PURE__ */ jsx(WithRipples, {
     enabled: isCourseActive((_b = (_a = data == null ? void 0 : data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data == null ? void 0 : data.Profile) == null ? void 0 : _c.id),
-    children: /* @__PURE__ */ jsxs(Box, {
+    children: /* @__PURE__ */ jsxs(LinkBox, {
       className: "CourseList-ImageBox",
+      _focusVisible: {
+        boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
+      },
+      tabIndex: 0,
       sx: {
         backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${backgroundImg})`,
         color: vars("colors-neutral-white"),
@@ -3457,11 +3460,17 @@ function BoxImage({
         flexDirection: "column",
         margin: m2,
         justifyContent: "end",
-        textAlign: "left"
+        textAlign: "left",
+        a: {
+          "&:active": {
+            boxShadow: "none"
+          }
+        }
       },
       children: [!(data == null ? void 0 : data.hasFinanzeFreezed) && isCourseActive((_e = (_d = data == null ? void 0 : data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data == null ? void 0 : data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
         href: (_g = data == null ? void 0 : data.action) == null ? void 0 : _g.href,
-        isExternal: (_h = data == null ? void 0 : data.action) == null ? void 0 : _h.targetBlank
+        isExternal: (_h = data == null ? void 0 : data.action) == null ? void 0 : _h.targetBlank,
+        tabIndex: -1
       }), /* @__PURE__ */ jsxs(Box, {
         className: "textBox",
         bottom: "20px",
@@ -4571,7 +4580,9 @@ const LargeBox = ({
     borderRadius: vars("radii-big"),
     _active: cssActive,
     _hover: cssActive,
-    _focus: cssActive,
+    _focusVisible: {
+      boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")}`
+    },
     children: /* @__PURE__ */ jsx(Ripples, {
       children: /* @__PURE__ */ jsxs(Flex, {
         cursor: "pointer",
@@ -4668,7 +4679,9 @@ const SmallBox = ({
     transition: "box-shadow .3s",
     _active: cssActive,
     _hover: cssActive,
-    _focus: cssActive,
+    _focusVisible: {
+      boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")}`
+    },
     width: "286px",
     height: "247px",
     borderRadius: vars("radii-big"),
@@ -5849,7 +5862,9 @@ const Resources = ({
     transition: "box-shadow 0.3s",
     _active: cssActive,
     _hover: cssActive,
-    _focus: cssActive,
+    _focusVisible: {
+      boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")}`
+    },
     cursor: "pointer",
     borderRadius: vars("radii-big"),
     border: vars("borders-light"),