@dxc-technology/halstack-react 0.0.0-89de434 → 0.0.0-8a597df

package/chip/Chip.stories.tsx

@@ -13,7 +13,6 @@ export default {
 const iconSVG = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -64,20 +63,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
-      <DxcChip
-        label="Chip with prefix and suffix"
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip
-        label="Disabled"
-        disabled
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />
@@ -146,22 +136,13 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Chip with prefix and suffix" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcChip
-          label="Chip"
-          prefixIcon={iconSVG}
-          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-        />
+        <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with prefix and suffix" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcChip
-          label="Chip"
-          disabled
-          prefixIcon={iconSVG}
-          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-        />
+        <DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -199,7 +180,7 @@ const ChipPrefixFocused = () => (
 const ChipSuffixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with suffix" theme="light" level={4} />
-    <DxcChip label="Chip with suffix" suffixIcon="https://cdn.iconscout.com/icon/free/png-256/free-delete-2902143-2411575.png" onClickSuffix={() => {}} />
+    <DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
   </ExampleContainer>
 );
 

package/chip/Chip.test.js

@@ -16,26 +16,26 @@ describe("Chip component tests", function () {
     var onClick = jest.fn();
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
         label: "Chip",
-        prefixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+        prefixIcon: "nutrition",
         onClickPrefix: onClick
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
   test("Calls correct function when clicking on suffix icon", function () {
     var onClick = jest.fn();
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
         label: "Chip",
-        suffixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+        suffixIcon: "nutrition",
         onClickSuffix: onClick
       })),
       getByText = _render3.getByText,
       getByRole = _render3.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
 });

package/contextual-menu/ContextualMenu.accessibility.test.js

@@ -0,0 +1,86 @@
+"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 _jestAxe = require("jest-axe");
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+var badge_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 7H13V9H11V7ZM11 11H13V17H11V11Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+}));
+var key_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  viewBox: "0 -960 960 960",
+  width: "24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"
+}));
+var fav_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  viewBox: "0 -960 960 960",
+  width: "24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"
+}));
+var itemsWithTruncatedText = [{
+  label: "Item with a very long label that should be truncated",
+  slot: /*#__PURE__*/_react["default"].createElement(_ContextualMenu["default"].Badge, {
+    color: "blue",
+    mode: "contextual",
+    label: "Label",
+    size: "small",
+    icon: badge_icon,
+    title: "Badge"
+  }),
+  icon: key_icon
+}, {
+  label: "Item 2",
+  slot: /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.6667 10.6667H1.33333V1.33333H6V0H1.33333C0.593333 0 0 0.6 0 1.33333V10.6667C0 11.4 0.593333 12 1.33333 12H10.6667C11.4 12 12 11.4 12 10.6667V6H10.6667V10.6667ZM7.33333 0V1.33333H9.72667L3.17333 7.88667L4.11333 8.82667L10.6667 2.27333V4.66667H12V0H7.33333Z",
+    fill: "#323232"
+  })),
+  icon: fav_icon
+}];
+describe("Context menu 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(_ContextualMenu["default"], {
+            items: itemsWithTruncatedText
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/date-input/DateInput.accessibility.test.js

@@ -0,0 +1,216 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _DateInput = _interopRequireDefault(require("./DateInput.tsx"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+describe("DateInput component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, baseElement, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            size: "medium",
+            placeholder: true,
+            clearable: true
+          })), baseElement = _render.baseElement;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for autocomplete mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, baseElement, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            size: "medium",
+            placeholder: true,
+            autocomplete: "on"
+          })), baseElement = _render2.baseElement;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for optional mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, baseElement, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            size: "medium",
+            placeholder: true,
+            optional: true
+          })), baseElement = _render3.baseElement;
+          _context3.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for error mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, baseElement, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            error: "Error message.",
+            size: "medium",
+            placeholder: true,
+            clearable: true
+          })), baseElement = _render4.baseElement;
+          _context4.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render5, baseElement, results;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            error: "Error message.",
+            size: "medium",
+            placeholder: true,
+            clearable: true,
+            readOnly: true
+          })), baseElement = _render5.baseElement;
+          _context5.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context5.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var _render6, baseElement, results;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Help message",
+            defaultValue: "06-04-2007",
+            format: "dd/mm/yy",
+            name: "DateInput Name",
+            margin: "medium",
+            error: "Error message.",
+            size: "medium",
+            placeholder: true,
+            clearable: true,
+            disabled: true
+          })), baseElement = _render6.baseElement;
+          _context6.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context6.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+});

package/date-input/DateInput.js

@@ -19,7 +19,6 @@ var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _uuid = require("uuid");
-var _Icons = require("./Icons");
 var _templateObject;
 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" != _typeof(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; }
@@ -191,7 +190,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     placeholder: placeholder ? format.toUpperCase() : null,
     action: {
       onClick: openCalendar,
-      icon: _Icons.calendarIcon,
+      icon: "filled_calendar_today",
       title: "Open calendar"
     },
     clearable: clearable,

package/date-input/DatePicker.js

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Calendar = _interopRequireDefault(require("./Calendar"));
 var _YearPicker = _interopRequireDefault(require("./YearPicker"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-var _Icons = require("./Icons");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 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" != _typeof(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; }
@@ -52,20 +52,26 @@ var DxcDatePicker = function DxcDatePicker(_ref) {
     onClick: function onClick() {
       return handleMonthChange(innerDate.set("month", innerDate.get("month") - 1));
     }
-  }, _Icons.leftCaret), /*#__PURE__*/_react["default"].createElement(HeaderYearTrigger, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "keyboard_arrow_left"
+  })), /*#__PURE__*/_react["default"].createElement(HeaderYearTrigger, {
     "aria-live": "polite",
     onClick: function onClick() {
       return setContent(function (content) {
         return content === "yearPicker" ? "calendar" : "yearPicker";
       });
     }
-  }, /*#__PURE__*/_react["default"].createElement(HeaderYearTriggerLabel, null, translatedLabels.calendar.months[innerDate.get("month")], " ", innerDate.format("YYYY")), content === "yearPicker" ? _Icons.upCaret : _Icons.downCaret), /*#__PURE__*/_react["default"].createElement(HeaderButton, {
+  }, /*#__PURE__*/_react["default"].createElement(HeaderYearTriggerLabel, null, translatedLabels.calendar.months[innerDate.get("month")], " ", innerDate.format("YYYY")), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down"
+  })), /*#__PURE__*/_react["default"].createElement(HeaderButton, {
     "aria-label": translatedLabels.calendar.nextMonthTitle,
     title: translatedLabels.calendar.nextMonthTitle,
     onClick: function onClick() {
       return handleMonthChange(innerDate.set("month", innerDate.get("month") + 1));
     }
-  }, _Icons.rightCaret)), content === "calendar" && /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "keyboard_arrow_right"
+  }))), content === "calendar" && /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
     innerDate: innerDate,
     selectedDate: selectedDate,
     onInnerDateChange: setInnerDate,
@@ -91,7 +97,7 @@ var DatePicker = _styledComponents["default"].div(_templateObject || (_templateO
   return props.theme.dateInput.pickerFontWeight;
 });
 var PickerHeader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0px 16px;\n"])));
-var HeaderButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", ";\n  }\n  &:active {\n    color: ", ";\n    background-color: ", ";\n  }\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
+var HeaderButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", ";\n  }\n  &:active {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  span::before {\n    font-size: 24px;\n  }\n"])), function (props) {
   return props.theme.dateInput.pickerHeaderFontColor;
 }, function (props) {
   return props.theme.dateInput.pickerHeaderBackgroundColor;
@@ -106,7 +112,7 @@ var HeaderButton = _styledComponents["default"].button(_templateObject3 || (_tem
 }, function (props) {
   return props.theme.dateInput.pickerHeaderActiveBackgroundColor;
 });
-var HeaderYearTrigger = (0, _styledComponents["default"])(HeaderButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  gap: 8px;\n  height: 40px;\n  width: 172px;\n"])));
+var HeaderYearTrigger = (0, _styledComponents["default"])(HeaderButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  gap: 8px;\n  height: 40px;\n  width: 172px;\n  font-size: 24px;\n  span::before {\n    font-size: 24px;\n  }\n"])));
 var HeaderYearTriggerLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: ", ";\n  font-size: ", ";\n"])), function (props) {
   return props.theme.dateInput.pickerFontFamily;
 }, function (props) {

package/dialog/Dialog.accessibility.test.js

@@ -0,0 +1,69 @@
+"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 _jestAxe = require("jest-axe");
+var _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
+describe("Dialog component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, baseElement, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "Dialog text")), baseElement = _render.baseElement;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for close button not visible", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, baseElement, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+            isCloseVisible: false
+          }, "Dialog text")), baseElement = _render2.baseElement;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for overlay not visible", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, baseElement, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+            overlay: false
+          }, "Dialog text")), baseElement = _render3.baseElement;
+          _context3.next = 3;
+          return (0, _jestAxe.axe)(baseElement);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/dialog/Dialog.test.js

@@ -29,7 +29,7 @@ var options = [{
   value: "other"
 }];
 describe("Dialog component tests", function () {
-  test("Dialog renders with correct text and accesibility attributes", function () {
+  test("Dialog renders with correct text and accessibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
       getByText = _render.getByText,
       getByRole = _render.getByRole;

package/divider/Divider.accessibility.test.js

@@ -0,0 +1,33 @@
+"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 _jestAxe = require("jest-axe");
+var _Divider = _interopRequireDefault(require("./Divider"));
+describe("Divider 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(_Divider["default"], {
+            orientation: "vertical",
+            color: "darkGrey",
+            decorative: false,
+            weight: "strong"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/divider/types.d.ts

@@ -12,7 +12,9 @@ type Props = {
      */
     color?: "lightGrey" | "mediumGrey" | "darkGrey";
     /**
-     * Indicates whether the divider is just a decorative resource or it works as a semantic separator of content.
+     * Specifies whether the divider serves a purely decorative purpose
+     * or functions as a semantic separator for content. Additionally, it
+     * determines whether the divider is accessible to screen readers.
      */
     decorative?: boolean;
 };