@eclass/ui-kit 1.54.8 → 1.54.10

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

@@ -1870,6 +1870,11 @@ const NavBarButton = ({
     className: "nav-bar-button",
     id: isAccessibility ? "UserWayButton" : "",
     onClick: isAccessibility ? triggerWidget : onClick,
+    _focusVisible: {
+      outline: `3px solid ${vars("colors-alert-deepSkyBlue")}`,
+      borderRadius: "2px"
+    },
+    tabIndex: 0,
     sx: {
       alignItems: "center",
       background: "none !important",
@@ -1918,9 +1923,11 @@ const NavBarButton = ({
     },
     children: [/* @__PURE__ */ jsx(Box, {
       className: "nav-bar-icon",
+      tabIndex: -1,
       children: buttonType[type].icon
     }), !isMobile && /* @__PURE__ */ jsx(Box, {
       className: "nav-bar-text",
+      tabIndex: -1,
       children: buttonType[type].text
     })]
   });
@@ -3280,11 +3287,8 @@ function Footer({
     p: "1rem",
     borderTop: "1px solid",
     borderTopColor: vars("colors-neutral-platinum"),
-    tabIndex: 0,
-    className: "footerButtonBox",
     children: [isCourseActive(action.enabled, Profile2 == null ? void 0 : Profile2.id) ? /* @__PURE__ */ jsxs(Fragment, {
       children: [hasFinanzeFreezed && modalPaymentText ? /* @__PURE__ */ jsx(Box, {
-        className: "uno",
         color: vars("colors-main-deepSkyBlue"),
         backgroundColor: "transparent",
         fontWeight: "500",
@@ -3300,7 +3304,6 @@ function Footer({
         fontSize: "1rem !important",
         children: action.text
       }) : /* @__PURE__ */ jsx(Text, {
-        className: "dos",
         color: vars("colors-main-deepSkyBlue"),
         fontWeight: "500",
         mr: action.hasIcon ? "1.5rem" : "0",
@@ -3312,7 +3315,6 @@ function Footer({
         color: vars("colors-main-deepSkyBlue")
       })]
     }) : /* @__PURE__ */ jsx(Text, {
-      className: "tres",
       fontWeight: "500",
       lineHeight: "1.172rem",
       color: vars("colors-neutral-spanishGrey"),
@@ -3328,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,
@@ -3343,37 +3365,45 @@ function BoxTraditional({
   data,
   modalPaymentText
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  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")}`
   };
   return /* @__PURE__ */ jsx(CourseBoxContext.Provider, {
     value: data,
     children: /* @__PURE__ */ jsx(LinkBox, {
-      className: "linkBoxTraditional",
       as: "article",
+      className: "focusable-link",
       border: vars("borders-light"),
       borderRadius: vars("radii-big"),
-      cursor: "pointer",
+      cursor: isClickable ? "pointer" : "default",
       transition: "box-shadow .3s",
-      _active: cssActive,
-      _hover: cssActive,
       overflow: "hidden",
+      _hover: cssActive,
+      _active: cssActive,
+      _focusWithin: {
+        boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
+      },
       tabIndex: 0,
-      role: "link",
+      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((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id),
+        enabled: isClickable,
         children: /* @__PURE__ */ jsxs(Flex, {
           direction: "column",
           justify: "space-between",
           h: "100%",
           children: [/* @__PURE__ */ jsxs(Box, {
             className: "CourseList-TraditionalBox",
-            children: [!data.hasFinanzeFreezed && isCourseActive((_e = (_d = data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
-              href: (_g = data.action) == null ? void 0 : _g.href,
-              isExternal: (_h = data.action) == null ? void 0 : _h.targetBlank,
-              tabIndex: -1,
-              className: "linkOverlay"
+            children: [isClickable && hasHref && /* @__PURE__ */ jsx(LinkOverlay, {
+              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
@@ -6196,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: {