@eclass/ui-kit 1.54.9 → 1.54.10

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

@@ -3330,6 +3330,26 @@ function Footer({
   });
 }
 Footer.displayName = "Footer";
+function useEnterNavigate() {
+  useEffect(() => {
+    const handleKeyDown = (e2) => {
+      var _a, _b;
+      if (e2.key === "Enter") {
+        const active = document.activeElement;
+        const role = active == null ? void 0 : active.getAttribute("role");
+        const href = active == null ? void 0 : active.getAttribute("data-href");
+        const isFocusableLink = ((_a = active == null ? void 0 : active.classList) == null ? void 0 : _a.contains("chakra-linkbox")) || ((_b = active == null ? void 0 : active.classList) == null ? void 0 : _b.contains("focusable-link"));
+        if (role === "link" && href != null && isFocusableLink) {
+          window.location.href = href;
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+}
 const CourseBoxContext = React.createContext({});
 function WithRipples$1({
   enabled,
@@ -3345,9 +3365,10 @@ function BoxTraditional({
   data,
   modalPaymentText
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g;
   const isClickable = isCourseActive((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id);
   const hasHref = !!((_d = data.action) == null ? void 0 : _d.href);
+  useEnterNavigate();
   const cssActive = {
     boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
   };
@@ -3355,6 +3376,7 @@ function BoxTraditional({
     value: data,
     children: /* @__PURE__ */ jsx(LinkBox, {
       as: "article",
+      className: "focusable-link",
       border: vars("borders-light"),
       borderRadius: vars("radii-big"),
       cursor: isClickable ? "pointer" : "default",
@@ -3365,10 +3387,11 @@ function BoxTraditional({
       _focusWithin: {
         boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
       },
-      tabIndex: !hasHref && isClickable ? 0 : void 0,
-      role: "link",
+      tabIndex: 0,
+      role: hasHref ? "link" : void 0,
+      "data-href": hasHref ? (_e = data.action) == null ? void 0 : _e.href : void 0,
       children: /* @__PURE__ */ jsx(WithRipples$1, {
-        enabled: isCourseActive((_f = (_e = data.action) == null ? void 0 : _e.enabled) != null ? _f : false, (_g = data.Profile) == null ? void 0 : _g.id),
+        enabled: isClickable,
         children: /* @__PURE__ */ jsxs(Flex, {
           direction: "column",
           justify: "space-between",
@@ -3376,8 +3399,11 @@ function BoxTraditional({
           children: [/* @__PURE__ */ jsxs(Box, {
             className: "CourseList-TraditionalBox",
             children: [isClickable && hasHref && /* @__PURE__ */ jsx(LinkOverlay, {
-              href: (_h = data.action) == null ? void 0 : _h.href,
-              isExternal: (_i = data.action) == null ? void 0 : _i.targetBlank
+              className: "course-link-overlay",
+              bg: "gray",
+              href: (_f = data.action) == null ? void 0 : _f.href,
+              isExternal: (_g = data.action) == null ? void 0 : _g.targetBlank,
+              tabIndex: -1
             }), /* @__PURE__ */ jsx(Header$1, {}), /* @__PURE__ */ jsx(Section, {})]
           }), /* @__PURE__ */ jsx(Footer, {
             modalPaymentText
@@ -6200,6 +6226,7 @@ const GoToCalendar = ({
   const activeBg = (_a = vars("colors-main-deepSkyBlue")) != null ? _a : "#0189FF";
   const hoverBg = "rgba(96, 121, 142, 0.8)";
   return /* @__PURE__ */ jsx(MenuButton, {
+    tabIndex: -1,
     onClick: () => onlyToCalendar && onClick && onClick(),
     position: "relative",
     sx: {