@gympass/yoga 7.124.0 → 7.126.0

package/cjs/Checkbox/web/Checkbox.js

@@ -76,7 +76,12 @@ const CheckboxWrapper = import_styled_components.default.div`
 
   ${({ disabled }) => disabled ? `cursor: not-allowed` : ""}
 `;
-const CheckMark = import_styled_components.default.div`
+const CheckMark = import_styled_components.default.div.attrs(({ checked, disabled }) => ({
+  role: "checkbox",
+  "aria-checked": checked,
+  "aria-disabled": disabled || void 0,
+  "data-testid": "checkbox-checkMark"
+}))`
   position: relative;
 
   border-style: solid;
@@ -284,6 +289,7 @@ const Checkbox = (_a) => {
     className,
     inverted,
     indeterminate,
+    ariaLabel,
     theme: {
       yoga: {
         components: { checkbox }
@@ -300,9 +306,12 @@ const Checkbox = (_a) => {
     "className",
     "inverted",
     "indeterminate",
+    "ariaLabel",
     "theme"
   ]);
   const inputRef = (0, import_react.useRef)(null);
+  const id = (0, import_react.useId)();
+  const checkboxLabelId = `checkbox-label-${id}`;
   const _a2 = rest, { onChange, onClick } = _a2, restWithoutEvents = __objRest(_a2, ["onChange", "onClick"]);
   (0, import_react.useEffect)(() => {
     if (inputRef.current) {
@@ -324,11 +333,14 @@ const Checkbox = (_a) => {
             indeterminate,
             inverted,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { id: checkboxLabelId, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shadow, {}),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 CheckMark,
-                __spreadProps(__spreadValues({}, {
+                __spreadProps(__spreadValues({
+                  "aria-labelledby": ariaLabel ? void 0 : checkboxLabelId,
+                  "aria-label": ariaLabel
+                }, {
                   disabled,
                   checked,
                   error,
@@ -350,7 +362,8 @@ const Checkbox = (_a) => {
                   disabled
                 }, value ? { value } : {}), restWithoutEvents), {
                   onChange,
-                  onClick
+                  onClick,
+                  "aria-hidden": true
                 })
               ),
               label
@@ -375,7 +388,8 @@ Checkbox.propTypes = {
   indeterminate: import_prop_types.bool,
   /** set a style to the checkbox container */
   style: (0, import_prop_types.shape)({}),
-  className: import_prop_types.string
+  className: import_prop_types.string,
+  ariaLabel: import_prop_types.string
 };
 Checkbox.defaultProps = {
   label: void 0,
@@ -387,7 +401,8 @@ Checkbox.defaultProps = {
   indeterminate: false,
   error: void 0,
   style: void 0,
-  className: void 0
+  className: void 0,
+  ariaLabel: void 0
 };
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = (0, import_styled_components.withTheme)(Checkbox);

package/cjs/Checkbox/web/Checkbox.test.js

@@ -150,10 +150,10 @@ describe("<Checkbox />", () => {
   describe("Events", () => {
     it("should call onChange function when press on Checkbox", () => {
       const onChangeMock = jest.fn();
-      const { getByRole } = (0, import_react2.render)(
+      const { getByTestId } = (0, import_react2.render)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, __spreadProps(__spreadValues({}, data), { onChange: onChangeMock })) })
       );
-      import_react2.fireEvent.click(getByRole("checkbox", { hidden: true }));
+      import_react2.fireEvent.click(getByTestId("checkbox-checkMark"));
       expect(onChangeMock).toHaveBeenCalled();
     });
   });

package/esm/Checkbox/web/Checkbox.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useId } from "react";
 import { bool, string, shape, oneOfType, node } from "prop-types";
 import styled, { withTheme } from "styled-components";
 import { hexToRgb } from "@gympass/yoga-common";
@@ -45,7 +45,12 @@ const CheckboxWrapper = styled.div`
 
   ${({ disabled }) => disabled ? `cursor: not-allowed` : ""}
 `;
-const CheckMark = styled.div`
+const CheckMark = styled.div.attrs(({ checked, disabled }) => ({
+  role: "checkbox",
+  "aria-checked": checked,
+  "aria-disabled": disabled || void 0,
+  "data-testid": "checkbox-checkMark"
+}))`
   position: relative;
 
   border-style: solid;
@@ -253,6 +258,7 @@ const Checkbox = (_a) => {
     className,
     inverted,
     indeterminate,
+    ariaLabel,
     theme: {
       yoga: {
         components: { checkbox }
@@ -269,9 +275,12 @@ const Checkbox = (_a) => {
     "className",
     "inverted",
     "indeterminate",
+    "ariaLabel",
     "theme"
   ]);
   const inputRef = useRef(null);
+  const id = useId();
+  const checkboxLabelId = `checkbox-label-${id}`;
   const _a2 = rest, { onChange, onClick } = _a2, restWithoutEvents = __objRest(_a2, ["onChange", "onClick"]);
   useEffect(() => {
     if (inputRef.current) {
@@ -293,11 +302,14 @@ const Checkbox = (_a) => {
             indeterminate,
             inverted,
             disabled,
-            children: /* @__PURE__ */ jsxs(Label, { children: [
+            children: /* @__PURE__ */ jsxs(Label, { id: checkboxLabelId, children: [
               /* @__PURE__ */ jsx(Shadow, {}),
               /* @__PURE__ */ jsxs(
                 CheckMark,
-                __spreadProps(__spreadValues({}, {
+                __spreadProps(__spreadValues({
+                  "aria-labelledby": ariaLabel ? void 0 : checkboxLabelId,
+                  "aria-label": ariaLabel
+                }, {
                   disabled,
                   checked,
                   error,
@@ -319,7 +331,8 @@ const Checkbox = (_a) => {
                   disabled
                 }, value ? { value } : {}), restWithoutEvents), {
                   onChange,
-                  onClick
+                  onClick,
+                  "aria-hidden": true
                 })
               ),
               label
@@ -344,7 +357,8 @@ Checkbox.propTypes = {
   indeterminate: bool,
   /** set a style to the checkbox container */
   style: shape({}),
-  className: string
+  className: string,
+  ariaLabel: string
 };
 Checkbox.defaultProps = {
   label: void 0,
@@ -356,7 +370,8 @@ Checkbox.defaultProps = {
   indeterminate: false,
   error: void 0,
   style: void 0,
-  className: void 0
+  className: void 0,
+  ariaLabel: void 0
 };
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = withTheme(Checkbox);

package/esm/Checkbox/web/Checkbox.test.js

@@ -129,10 +129,10 @@ describe("<Checkbox />", () => {
   describe("Events", () => {
     it("should call onChange function when press on Checkbox", () => {
       const onChangeMock = jest.fn();
-      const { getByRole } = render(
+      const { getByTestId } = render(
         /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { onChange: onChangeMock })) })
       );
-      fireEvent.click(getByRole("checkbox", { hidden: true }));
+      fireEvent.click(getByTestId("checkbox-checkMark"));
       expect(onChangeMock).toHaveBeenCalled();
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.124.0",
+  "version": "7.126.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -58,7 +58,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "19f2cf453d3e3925bbd6a961163da89cda3fedeb",
+  "gitHead": "b3c22ff96b8e6b492c9170e348c4218ce2e3c340",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"