@dxc-technology/halstack-react 11.0.0 → 12.0.1

package/button/Button.stories.tsx

@@ -20,7 +20,6 @@ const iconSVG = (
 const facebookIcon = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -76,31 +75,27 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton label="Primary disabled" disabled icon={iconSVG} />
+      <DxcButton label="Primary disabled" disabled icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With left icon" theme="light" level={4} />
-      <DxcButton label="Primary" icon={iconSVG} />
+      <DxcButton label="Primary" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With right icon" theme="light" level={4} />
-      <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
+      <DxcButton label="Primary" icon="filled_bottom_app_bar" iconPosition="after" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Only icon" theme="light" level={4} />
-      <DxcButton icon={iconSVG} />
+      <DxcButton icon="filled_bottom_app_bar" title="Button with no label" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Big icon (SVG)" theme="light" level={4} />
-      <DxcButton icon={facebookIcon} />
+      <DxcButton icon={facebookIcon} title="Facebook" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Big icon (image)" theme="light" level={4} />
-      <DxcButton icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small icon" theme="light" level={4} />
-      <DxcButton icon={smallIcon} />
+      <Title title="Small icon (SVG)" theme="light" level={4} />
+      <DxcButton icon={smallIcon} title="Button with no label" />
     </ExampleContainer>
     <Title title="Secondary" theme="light" level={2} />
     <ExampleContainer>
@@ -121,18 +116,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton mode="secondary" disabled label="Secondary disabled" icon={iconSVG} />
+      <DxcButton mode="secondary" disabled label="Secondary disabled" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Only icon (image)" theme="light" level={4} />
-      <DxcButton
-        mode="secondary"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      />
+      <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <Title title="Text" theme="light" level={2} />
     <ExampleContainer>
@@ -153,18 +141,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton mode="text" label="Text disabled" disabled icon={iconSVG} />
+      <DxcButton mode="text" label="Text disabled" disabled icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcButton label="Text" mode="text" icon={iconSVG} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Only icon (image)" theme="light" level={4} />
-      <DxcButton
-        mode="text"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      />
+      <DxcButton label="Text" mode="text" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <Title title="Sizes" theme="light" level={2} />
     <ExampleContainer>
@@ -181,19 +162,19 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon after" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon before" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon after with ellipsis" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon before with ellipsis" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size" theme="light" level={4} />
@@ -205,19 +186,19 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon after" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon before" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon after with ellipsis" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon before with ellipsis" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FillParent size" theme="light" level={4} />
@@ -269,75 +250,75 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton label="Primary" icon={iconSVG} />
+        <DxcButton label="Primary" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton label="Primary hovered" icon={iconSVG} />
+      <DxcButton label="Primary hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton label="Primary focused" icon={iconSVG} />
+      <DxcButton label="Primary focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton label="Primary actived" icon={iconSVG} />
+      <DxcButton label="Primary actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton label="Primary" icon={iconSVG} disabled />
+        <DxcButton label="Primary" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
     <Title title="Secondary" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
+        <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary hovered" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary focused" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary actived" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="secondary" label="Secondary" icon={iconSVG} disabled />
+        <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
     <Title title="Text" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="text" label="Text" icon={iconSVG} />
+        <DxcButton mode="text" label="Text" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton mode="text" label="Text hovered" icon={iconSVG} />
+      <DxcButton mode="text" label="Text hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton mode="text" label="Text focused" icon={iconSVG} />
+      <DxcButton mode="text" label="Text focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton mode="text" label="Text actived" icon={iconSVG} />
+      <DxcButton mode="text" label="Text actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="text" label="Text disabled" icon={iconSVG} disabled />
+        <DxcButton mode="text" label="Text disabled" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
   </>

package/button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/button/Button.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Button = _interopRequireDefault(require("./Button.tsx"));
+var _Button = _interopRequireDefault(require("./Button"));
 describe("Button component tests", function () {
   test("Button renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -26,11 +26,13 @@ describe("Button component tests", function () {
   test("Renders with correct accessibility attributes", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         label: "Home",
-        title: "Go home"
+        title: "Go home",
+        tabIndex: 1
       })),
       getByRole = _render3.getByRole;
     var button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("Go home");
     expect(button.getAttribute("title")).toBe("Go home");
+    expect(button.getAttribute("tabindex")).toBe("1");
   });
 });

package/button/types.d.ts

@@ -33,7 +33,7 @@ type Props = {
      */
     type?: "button" | "reset" | "submit";
     /**
-     * Element or path used as the icon that will be placed next to the label.
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
     icon?: string | SVG;
     /**

package/card/Card.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/card/Card.accessibility.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Card = _interopRequireDefault(require("./Card"));
+describe("Card component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+            linkHref: "https://www.dxc.com",
+            imageSrc: "https://picsum.photos/id/1022/200/300",
+            imagePosition: "after",
+            imagePadding: "xsmall",
+            margin: "medium",
+            imageBgColor: "yellow",
+            imageCover: true
+          }, "test-card")), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/card/Card.js

@@ -16,7 +16,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Box = _interopRequireDefault(require("../box/Box"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcCard = function DxcCard(_ref) {
   var imageSrc = _ref.imageSrc,
     _ref$imageBgColor = _ref.imageBgColor,
@@ -64,7 +64,8 @@ var DxcCard = function DxcCard(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(TagImage, {
     imagePadding: imagePadding,
     imageCover: imageCover,
-    src: imageSrc
+    src: imageSrc,
+    alt: "Card image"
   })), /*#__PURE__*/_react["default"].createElement(CardContent, null, children)))));
 };
 var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  text-decoration: none;\n  ", "\n"])), function (_ref2) {

package/card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/card/Card.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Card = _interopRequireDefault(require("./Card.tsx"));
+var _Card = _interopRequireDefault(require("./Card"));
 describe("Card component tests", function () {
   test("Card renders with correct content", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-card")),

package/checkbox/Checkbox.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.accessibility.test.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+describe("Checkbox component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            defaultChecked: true,
+            optional: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            readOnly: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            disabled: true
+          })), container = _render3.container;
+          _context3.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/checkbox/Checkbox.js

@@ -13,17 +13,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
-var _uuid = require("uuid");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var checkedIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "currentColor",
   focusable: "false",
-  "aria-hidden": "true",
   viewBox: "0 0 24 24"
 }, /*#__PURE__*/_react["default"].createElement("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
@@ -51,16 +48,13 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     size = _ref$size === void 0 ? "fitContent" : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("label-checkbox-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    labelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultChecked),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerChecked = _useState4[0],
-    setInnerChecked = _useState4[1];
+  var labelId = "label-checkbox-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultChecked),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerChecked = _useState2[0],
+    setInnerChecked = _useState2[1];
   var checkboxRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
-  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var handleCheckboxChange = function handleCheckboxChange() {
     if (!disabled && !readOnly) {
@@ -89,18 +83,16 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     margin: margin,
     size: size,
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
-    backgroundType: backgroundType,
     ref: ref
   }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     id: labelId,
     disabled: disabled,
-    backgroundType: backgroundType,
-    labelPosition: labelPosition
+    labelPosition: labelPosition,
+    "aria-label": label
   }, label, optional && " ".concat(translatedLabels.formFields.optionalLabel)), /*#__PURE__*/_react["default"].createElement(ValueInput, {
     type: "checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     name: name,
-    "aria-hidden": "true",
     value: value,
     disabled: disabled,
     readOnly: true
@@ -112,8 +104,8 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     "aria-disabled": disabled,
     "aria-readonly": readOnly,
     "aria-required": !disabled && !optional,
-    "aria-labelledby": labelId,
-    backgroundType: backgroundType,
+    "aria-labelledby": label ? labelId : undefined,
+    "aria-label": label ? undefined : "Checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     disabled: disabled,
     readOnly: readOnly,
@@ -130,52 +122,52 @@ var sizes = {
 var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
-var getDisabledColor = function getDisabledColor(props, element) {
+var getDisabledColor = function getDisabledColor(theme, element) {
   switch (element) {
     case "check":
-      return props.backgroundType === "dark" ? props.theme.disabledCheckColorOnDark : props.theme.disabledCheckColor;
+      return theme.disabledCheckColor;
     case "background":
-      return props.backgroundType === "dark" ? props.theme.disabledBackgroundColorCheckedOnDark : props.theme.disabledBackgroundColorChecked;
+      return theme.disabledBackgroundColorChecked;
     case "border":
-      return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;
+      return theme.disabledBorderColor;
     case "label":
-      return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
+      return theme.disabledFontColor;
   }
 };
-var getReadOnlyColor = function getReadOnlyColor(props, element) {
+var getReadOnlyColor = function getReadOnlyColor(theme, element) {
   switch (element) {
     case "check":
-      return props.theme.readOnlyCheckColor;
+      return theme.readOnlyCheckColor;
     case "background":
-      return props.theme.readOnlyBackgroundColorChecked;
+      return theme.readOnlyBackgroundColorChecked;
     case "hoverBackground":
-      return props.theme.hoverReadOnlyBackgroundColorChecked;
+      return theme.hoverReadOnlyBackgroundColorChecked;
     case "border":
-      return props.theme.readOnlyBorderColor;
+      return theme.readOnlyBorderColor;
     case "hoverBorder":
-      return props.theme.hoverReadOnlyBorderColor;
+      return theme.hoverReadOnlyBorderColor;
   }
 };
-var getEnabledColor = function getEnabledColor(props, element) {
+var getEnabledColor = function getEnabledColor(theme, element) {
   switch (element) {
     case "check":
-      return props.backgroundType === "dark" ? props.theme.checkColorOnDark : props.theme.checkColor;
+      return theme.checkColor;
     case "background":
-      return props.backgroundType === "dark" ? props.theme.backgroundColorCheckedOnDark : props.theme.backgroundColorChecked;
+      return theme.backgroundColorChecked;
     case "hoverBackground":
-      return props.backgroundType === "dark" ? props.theme.hoverBackgroundColorCheckedOnDark : props.theme.hoverBackgroundColorChecked;
+      return theme.hoverBackgroundColorChecked;
     case "border":
-      return props.backgroundType === "dark" ? props.theme.borderColorOnDark : props.theme.borderColor;
+      return theme.borderColor;
     case "hoverBorder":
-      return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
+      return theme.hoverBorderColor;
     case "label":
-      return props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
+      return theme.fontColor;
   }
 };
 var LabelContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  order: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.labelPosition === "before" ? 0 : 1;
 }, function (props) {
-  return props.disabled ? getDisabledColor(props, "label") : getEnabledColor(props, "label");
+  return props.disabled ? getDisabledColor(props.theme, "label") : getEnabledColor(props.theme, "label");
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -185,14 +177,14 @@ var LabelContainer = _styledComponents["default"].span(_templateObject || (_temp
 });
 var ValueInput = _styledComponents["default"].input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
 var CheckboxContainer = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
-var Checkbox = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 18px;\n  width: 18px;\n  border: 2px solid\n    ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n\n  &:focus {\n    outline: 2px solid\n      ", ";\n    outline-offset: 2px;\n  }\n  svg {\n    position: absolute;\n    width: 22px;\n    height: 22px;\n  }\n  ", "\n"])), function (props) {
-  return props.disabled ? getDisabledColor(props, "border") : props.readOnly ? getReadOnlyColor(props, "border") : getEnabledColor(props, "border");
+var Checkbox = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 18px;\n  width: 18px;\n  border: 2px solid\n    ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n  svg {\n    position: absolute;\n    width: 22px;\n    height: 22px;\n  }\n  ", "\n"])), function (props) {
+  return props.disabled ? getDisabledColor(props.theme, "border") : props.readOnly ? getReadOnlyColor(props.theme, "border") : getEnabledColor(props.theme, "border");
 }, function (props) {
-  return props.checked ? props.disabled ? getDisabledColor(props, "check") : props.readOnly ? getReadOnlyColor(props, "check") : getEnabledColor(props, "check") : "transparent";
+  return props.checked ? props.disabled ? getDisabledColor(props.theme, "check") : props.readOnly ? getReadOnlyColor(props.theme, "check") : getEnabledColor(props.theme, "check") : "transparent";
 }, function (props) {
-  return props.disabled ? getDisabledColor(props, "background") : props.readOnly ? getReadOnlyColor(props, "background") : getEnabledColor(props, "background");
+  return props.disabled ? getDisabledColor(props.theme, "background") : props.readOnly ? getReadOnlyColor(props.theme, "background") : getEnabledColor(props.theme, "background");
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
+  return props.theme.focusColor;
 }, function (props) {
   return props.disabled && "pointer-events: none;";
 });
@@ -213,8 +205,8 @@ var MainContainer = _styledComponents["default"].div(_templateObject5 || (_templ
 }, function (props) {
   return props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer";
 }, Checkbox, function (props) {
-  if (!props.disabled) return props.readOnly ? getReadOnlyColor(props, "hoverBorder") : getEnabledColor(props, "hoverBorder");
+  if (!props.disabled) return props.readOnly ? getReadOnlyColor(props.theme, "hoverBorder") : getEnabledColor(props.theme, "hoverBorder");
 }, function (props) {
-  if (!props.disabled) return props.readOnly ? getReadOnlyColor(props, "hoverBackground") : getEnabledColor(props, "hoverBackground");
+  if (!props.disabled) return props.readOnly ? getReadOnlyColor(props.theme, "hoverBackground") : getEnabledColor(props.theme, "hoverBackground");
 });
 var _default = exports["default"] = DxcCheckbox;

package/checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox component tests", function () {
   test("Checkbox renders with correct aria-labelledby and aria-required", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {

package/chip/Chip.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};