@dxc-technology/halstack-react 0.0.0-74c93cf → 0.0.0-74dd241

package/number-input/NumberInput.accessibility.test.js

@@ -0,0 +1,227 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
+// 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);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+describe("Number input 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(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            size: "medium",
+            step: 1
+          })), 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 optional 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(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            size: "medium",
+            step: 1,
+            optional: 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 error 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(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            error: "Input error",
+            size: "medium",
+            step: 1
+          })), 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);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, container, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            size: "medium",
+            step: 1,
+            disabled: true
+          })), container = _render4.container;
+          _context4.next = 3;
+          return (0, _axeHelper.axe)(container);
+        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, container, results;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            size: "medium",
+            step: 1,
+            readOnly: true
+          })), container = _render5.container;
+          _context5.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context5.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it("Should not have basic accessibility issues for autocomplete mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var _render6, container, results;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+            label: "Number input label",
+            helperText: "Helper text",
+            placeholder: "Placeholder",
+            defaultValue: "10",
+            margin: "medium",
+            min: 0,
+            max: 100,
+            suffix: "Suffix",
+            prefix: "Prefix",
+            name: "Name",
+            size: "medium",
+            step: 1,
+            autocomplete: "on"
+          })), container = _render6.container;
+          _context6.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context6.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+});

package/number-input/NumberInput.js

@@ -13,7 +13,7 @@ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 var _NumberInputContext = require("./NumberInputContext");
 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; }
+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 && {}.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 DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
     name = _ref.name,

package/number-input/NumberInput.stories.tsx

@@ -32,25 +32,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="33"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="33" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="1"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="1" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active read only" theme="light" level={4} />

package/number-input/NumberInput.test.d.ts

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

package/number-input/NumberInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Number input component tests", function () {
   test("Number input renders with label, helper text, placeholder and increment/decrement action buttons", function () {
@@ -776,7 +775,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render30.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -804,7 +803,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render31.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -832,7 +831,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render32.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -860,7 +859,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render33.getByLabelText;
     var number = getByLabelText("Number input label");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-74c93cf",
+  "version": "0.0.0-74dd241",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -21,67 +21,71 @@
     "@radix-ui/react-popover": "^1.0.7",
     "color": "^3.1.3",
     "dayjs": "^1.11.1",
-    "slugify": "^1.6.5",
-    "uuid": "^8.3.2"
+    "slugify": "^1.6.5"
   },
   "scripts": {
-    "test": "jest --env=jsdom",
+    "test": "jest --env=jsdom --config=./jest.config.js",
+    "test:accessibility": "jest --env=jsdom --config=./jest.config.accessibility.js",
     "test:watch": "npm test -- --watch --coverage",
     "build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose && node ../scripts/build/copy-package.js && node ../scripts/build/copy-readme.js && tsc ",
     "build:watch": "babel src --watch --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose",
     "storybook": "storybook dev -p 6006",
+    "storybook:accessibility": "test-storybook",
+    "storybook:accessibility:ci": "test-storybook --maxWorkers=2",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.16.8",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/builder-vite": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/test": "^8.0.8",
+    "@storybook/test-runner": "^0.17.0",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/color": "^3.0.3",
-    "@types/react": "^18.0.18",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "^18.2.79",
     "@types/styled-components": "5.1.29",
-    "@types/uuid": "^9.0.6",
+    "axe-playwright": "^2.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "chromatic": "^8.0.0",
+    "css-loader": "^7.1.1",
     "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.2.2",
+    "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.3.1",
+    "playwright": "^1.41.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.3",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook": "^8.0.8",
+    "storybook-addon-pseudo-states": "^3.0.1",
+    "style-loader": "^4.0.0",
     "styled-components": "^5.0.1",
     "typescript": "^5.3.3"
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy",
-      "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",
-      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js",
-      "^uuid$": "uuid"
-    }
   }
 }

package/paginator/Paginator.accessibility.test.d.ts

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

package/paginator/Paginator.accessibility.test.js

@@ -0,0 +1,78 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Paginator = _interopRequireDefault(require("./Paginator"));
+// 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);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+describe("Paginator 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(_Paginator["default"], {
+            currentPage: 1,
+            itemsPerPage: 10,
+            totalItems: 27,
+            onPageChange: function onPageChange() {},
+            itemsPerPageOptions: [5, 10, 15],
+            showGoToPage: 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);
+  })));
+});

package/paginator/Paginator.js

@@ -13,10 +13,9 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _Select = _interopRequireDefault(require("../select/Select"));
-var _Icons = require("./Icons");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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; }
+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 && {}.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 DxcPaginator = function DxcPaginator(_ref) {
   var _ref$currentPage = _ref.currentPage,
     currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
@@ -54,19 +53,21 @@ var DxcPaginator = function DxcPaginator(_ref) {
   }))), /*#__PURE__*/_react["default"].createElement(TotalItemsContainer, null, translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     disabled: currentPageInternal === 1 || currentPageInternal === 0,
-    icon: _Icons.firstIcon,
+    icon: "first_page",
     tabIndex: tabIndex,
     onClick: function onClick() {
       onPageChange(1);
-    }
+    },
+    title: "First results"
   }), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     disabled: currentPageInternal === 1 || currentPageInternal === 0,
-    icon: _Icons.previousIcon,
+    icon: "navigate_before",
     tabIndex: tabIndex,
     onClick: function onClick() {
       onPageChange(currentPage - 1);
-    }
+    },
+    title: "Previous results"
   }), showGoToPage ? /*#__PURE__*/_react["default"].createElement(PageToSelectContainer, null, /*#__PURE__*/_react["default"].createElement(GoToLabel, null, translatedLabels.paginator.goToPageText, " "), /*#__PURE__*/_react["default"].createElement(SelectContainer, null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
     options: Array.from(Array(totalPages), function (e, num) {
       return {
@@ -83,19 +84,21 @@ var DxcPaginator = function DxcPaginator(_ref) {
   }))) : /*#__PURE__*/_react["default"].createElement("span", null, translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     disabled: currentPageInternal === totalPages,
-    icon: _Icons.nextIcon,
+    icon: "navigate_next",
     tabIndex: tabIndex,
     onClick: function onClick() {
       onPageChange(currentPage + 1);
-    }
+    },
+    title: "Next results"
   }), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     disabled: currentPageInternal === totalPages,
-    icon: _Icons.lastIcon,
+    icon: "last_page",
     tabIndex: tabIndex,
     onClick: function onClick() {
       onPageChange(totalPages);
-    }
+    },
+    title: "Last results"
   }))));
 };
 var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-transform: ", ";\n  background-color: ", ";\n  color: ", ";\n  padding: ", " ", ";\n\n  button {\n    &:disabled {\n      background-color: transparent !important;\n      opacity: 0.3 !important;\n    }\n  }\n"])), function (props) {

package/paginator/Paginator.test.d.ts

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

package/paginator/Paginator.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Paginator = _interopRequireDefault(require("./Paginator.tsx"));
+var _Paginator = _interopRequireDefault(require("./Paginator"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 global.DOMRect = {
   fromRect: function fromRect() {

package/paragraph/Paragraph.accessibility.test.d.ts

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

package/paragraph/Paragraph.accessibility.test.js

@@ -0,0 +1,28 @@
+"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 _Paragraph = _interopRequireDefault(require("./Paragraph"));
+describe("Paragraph 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(_Paragraph["default"], null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl. Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.")), 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/password-input/PasswordInput.accessibility.test.d.ts

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