@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e3dbad

package/dialog/Dialog.js

@@ -14,22 +14,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _reactDom = require("react-dom");
 var _FocusLock = _interopRequireDefault(require("../utils/FocusLock"));
+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; }
-var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  role: "img",
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0V0z",
-  fill: "none"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-}));
+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 DxcDialog = function DxcDialog(_ref) {
   var _ref$isCloseVisible = _ref.isCloseVisible,
     isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
@@ -63,14 +51,17 @@ var DxcDialog = function DxcDialog(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(Dialog, {
     role: "dialog",
     "aria-modal": overlay,
-    isCloseVisible: isCloseVisible
+    isCloseVisible: isCloseVisible,
+    "aria-label": "Dialog"
   }, /*#__PURE__*/_react["default"].createElement(_FocusLock["default"], null, children, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconAction, {
     onClick: function onClick() {
       onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
     },
     "aria-label": translatedLabels.dialog.closeIconAriaLabel,
     tabIndex: tabIndex
-  }, closeIcon)))), document.body));
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "close"
+  }))))), document.body));
 };
 var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  body {\n    overflow: hidden;\n  }\n"])));
 var DialogContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  z-index: 2147483647;\n"])));
@@ -84,7 +75,7 @@ var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObje
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
 }, _variables.responsiveSizes.medium);
-var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  cursor: pointer;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  &:hover {\n    background-color: #f2f2f2;\n  }\n  &:active {\n    background-color: #cccccc;\n  }\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  cursor: pointer;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  &:hover {\n    background-color: #f2f2f2;\n  }\n  &:active {\n    background-color: #cccccc;\n  }\n  span {\n    font-size: ", ";\n  }\n"])), function (props) {
   return props.theme.closeIconBackgroundColor;
 }, function (props) {
   return props.theme.closeIconColor;
@@ -97,8 +88,6 @@ var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_
 }, function (props) {
   return props.theme.closeIconBorderColor;
 }, function (props) {
-  return props.theme.closeIconWidth;
-}, function (props) {
-  return props.theme.closeIconHeight;
+  return props.theme.closeIconSize;
 });
 var _default = exports["default"] = DxcDialog;

package/dialog/Dialog.stories.tsx

@@ -10,11 +10,17 @@ import { HalstackProvider } from "../HalstackContext";
 import DxcHeading from "../heading/Heading";
 import DxcParagraph from "../paragraph/Paragraph";
 import DxcAlert from "../alert/Alert";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 export default {
   title: "Dialog",
   component: DxcDialog,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
 };
 
 const opinionatedTheme = {
@@ -356,10 +362,8 @@ MobileResponsiveDialog.parameters = {
 };
 
 export const ScrollDialog = ScrollingDialog.bind({});
-ScrollDialog.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
+ScrollDialog.play = async () => {
   await userEvent.tab();
   await userEvent.tab();
   await userEvent.tab();
 };
-

package/dialog/Dialog.test.d.ts

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

package/dialog/Dialog.test.js

@@ -1,20 +1,54 @@
 "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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
-var _TextInput = _interopRequireDefault(require("../text-input/TextInput.tsx"));
-var _Textarea = _interopRequireDefault(require("../textarea/Textarea.tsx"));
-var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox.tsx"));
-var _Select = _interopRequireDefault(require("../select/Select.tsx"));
-var _Button = _interopRequireDefault(require("../button/Button.tsx"));
-var _Link = _interopRequireDefault(require("../link/Link.tsx"));
-var _Card = _interopRequireDefault(require("../card/Card.tsx"));
-var _RadioGroup = _interopRequireDefault(require("../radio-group/RadioGroup.tsx"));
-var _Slider = _interopRequireDefault(require("../slider/Slider.tsx"));
-var _Switch = _interopRequireDefault(require("../switch/Switch.tsx"));
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
+var _Textarea = _interopRequireDefault(require("../textarea/Textarea"));
+var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
+var _Select = _interopRequireDefault(require("../select/Select"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _Link = _interopRequireDefault(require("../link/Link"));
+var _Card = _interopRequireDefault(require("../card/Card"));
+var _RadioGroup = _interopRequireDefault(require("../radio-group/RadioGroup"));
+var _Slider = _interopRequireDefault(require("../slider/Slider"));
+var _Switch = _interopRequireDefault(require("../switch/Switch"));
+var _DateInput = _interopRequireDefault(require("../date-input/DateInput"));
+// 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() {}
+  }]);
+}();
 var options = [{
   label: "Female",
   value: "female"
@@ -29,7 +63,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;
@@ -77,11 +111,40 @@ describe("Dialog component tests", function () {
     });
     expect(onCloseClick).toHaveBeenCalled();
   });
+  test("Does not call function onCloseClick when 'Escape' key is pressed while a child popover is opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var onCloseClick, _render6, getByRole, calendarAction;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          onCloseClick = jest.fn();
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+            onCloseClick: onCloseClick
+          }, /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "With format M-dd-yyyy",
+            format: "M-dd-yyyy"
+          }))), getByRole = _render6.getByRole;
+          calendarAction = getByRole("combobox");
+          _context.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          _react2.fireEvent.keyDown(document.activeElement, {
+            key: "Escape",
+            code: "Escape",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(onCloseClick).not.toHaveBeenCalled();
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
 });
 describe("Dialog component: Focus lock tests", function () {
   test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "example-dialog")),
-      getByRole = _render6.getByRole;
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "example-dialog")),
+      getByRole = _render7.getByRole;
     var button = getByRole("button");
     var dialog = getByRole("dialog");
     expect(document.activeElement).toEqual(button);
@@ -95,100 +158,100 @@ describe("Dialog component: Focus lock tests", function () {
     expect(document.activeElement).toEqual(button);
   });
   test("Autofocus with Button component", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         label: "Accept"
       }))),
-      getAllByRole = _render7.getAllByRole;
+      getAllByRole = _render8.getAllByRole;
     var button = getAllByRole("button")[0];
     expect(document.activeElement).toEqual(button);
     expect(button.getAttribute("aria-label")).not.toBe("Close dialog");
   });
   test("Autofocus with Card component", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         linkHref: "https://developer.dxc.com/halstack/next/components/card/"
       }, "example-card"))),
-      getByRole = _render8.getByRole;
+      getByRole = _render9.getByRole;
     var card = getByRole("link");
     expect(document.activeElement).toEqual(card);
   });
   test("Autofocus with Checkbox component", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         label: "Name"
       }))),
-      getByRole = _render9.getByRole;
+      getByRole = _render10.getByRole;
     var checkbox = getByRole("checkbox");
     expect(document.activeElement).toEqual(checkbox);
   });
   test("Autofocus with Link component", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "This is a text with a ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "This is a text with a ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: "#"
       }, "Link"), " to another page.")),
-      getByRole = _render10.getByRole;
+      getByRole = _render11.getByRole;
     var link = getByRole("link");
     expect(document.activeElement).toEqual(link);
   });
   test("Autofocus with RadioGroup component", function () {
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
         label: "Example",
         options: options
       }))),
-      getAllByRole = _render11.getAllByRole;
+      getAllByRole = _render12.getAllByRole;
     var checkedRadio = getAllByRole("radio")[0];
     expect(document.activeElement).toEqual(checkedRadio);
   });
   test("Autofocus with Select component", function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "Country",
         options: options
       }))),
-      getByRole = _render12.getByRole;
+      getByRole = _render13.getByRole;
     var select = getByRole("combobox");
     expect(document.activeElement).toEqual(select);
   });
   test("Autofocus with Slider component", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
         label: "label",
         minValue: 0,
         maxValue: 100,
         showLimitsValues: true
       }))),
-      getByRole = _render13.getByRole;
+      getByRole = _render14.getByRole;
     var slider = getByRole("slider");
     expect(document.activeElement).toEqual(slider);
   });
   test("Autofocus with Switch component", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
         label: "Example"
       }))),
-      getByRole = _render14.getByRole;
+      getByRole = _render15.getByRole;
     var switchButton = getByRole("switch");
     expect(document.activeElement).toEqual(switchButton);
   });
   test("Autofocus with Text Input component", function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
         label: "Name"
       }))),
-      getByRole = _render15.getByRole;
+      getByRole = _render16.getByRole;
     var input = getByRole("textbox");
     expect(document.activeElement).toEqual(input);
   });
   test("Autofocus with Textarea component", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
         label: "Name"
       }))),
-      getByRole = _render16.getByRole;
+      getByRole = _render17.getByRole;
     var textarea = getByRole("textbox");
     expect(document.activeElement).toEqual(textarea);
   });
   test("Negative tabindex elements are not automatically focused, even if it is enabled and a valid focusable item (programatically and by click)", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
-        label: "Name",
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+        title: "Name",
         tabIndex: -1
       }), /*#__PURE__*/_react["default"].createElement("input", {
-        label: "Name"
+        title: "Name"
       }))),
-      getAllByRole = _render17.getAllByRole,
-      getByRole = _render17.getByRole;
+      getAllByRole = _render18.getAllByRole,
+      getByRole = _render18.getByRole;
     var inputs = getAllByRole("textbox");
     var button = getByRole("button");
     expect(document.activeElement).toEqual(inputs[1]);
@@ -198,7 +261,7 @@ describe("Dialog component: Focus lock tests", function () {
     expect(document.activeElement).toEqual(inputs[1]);
   });
   test("Focus jumps disabled components and negative tabIndexes when autofocusing first item", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         label: "Accept",
         disabled: true
       }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
@@ -235,12 +298,12 @@ describe("Dialog component: Focus lock tests", function () {
       }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
         label: "Description"
       }))),
-      getAllByRole = _render18.getAllByRole;
+      getAllByRole = _render19.getAllByRole;
     var textarea = getAllByRole("textbox")[2];
     expect(document.activeElement).toEqual(textarea);
   });
   test("Focus jumps from last element to the first", function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         label: "Accept",
         disabled: true
       }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
@@ -249,7 +312,7 @@ describe("Dialog component: Focus lock tests", function () {
         label: "Name",
         options: options
       }))),
-      getByRole = _render19.getByRole;
+      getByRole = _render20.getByRole;
     var closeAction = getByRole("button");
     var textarea = getByRole("textbox");
     expect(document.activeElement).toEqual(textarea);
@@ -260,13 +323,13 @@ describe("Dialog component: Focus lock tests", function () {
     expect(document.activeElement).toEqual(textarea);
   });
   test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
-        label: "Name",
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+        title: "Name",
         style: {
           display: "none"
         }
       }), /*#__PURE__*/_react["default"].createElement("input", {
-        label: "Name",
+        title: "Name",
         style: {
           visibility: "hidden"
         }
@@ -274,21 +337,21 @@ describe("Dialog component: Focus lock tests", function () {
         type: "hidden",
         name: "example"
       }))),
-      getByRole = _render20.getByRole;
+      getByRole = _render21.getByRole;
     var closeAction = getByRole("button");
     expect(document.activeElement).toEqual(closeAction);
     _userEvent["default"].tab();
     expect(document.activeElement).toEqual(closeAction);
   });
   test("Focus gets trapped in the Dialog when there are not focusable elements inside until it is closed", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
         label: "Name"
       }), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         isCloseVisible: false
       }, /*#__PURE__*/_react["default"].createElement("h2", null, "Policy agreement"), /*#__PURE__*/_react["default"].createElement("p", null, "Sample text.")), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
         label: "Surname"
       }))),
-      getAllByRole = _render21.getAllByRole;
+      getAllByRole = _render22.getAllByRole;
     var inputs = getAllByRole("textbox");
     var dialog = getAllByRole("dialog")[0];
     _userEvent["default"].tab();

package/divider/Divider.accessibility.test.d.ts

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

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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+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, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/divider/Divider.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Title from "../../.storybook/components/Title";
 import DxcDivider from "./Divider";
-import { DxcFlex, DxcParagraph } from "../main";
+import DxcFlex from "../flex/Flex";
+import DxcParagraph from "../paragraph/Paragraph";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
 export default {

package/divider/Divider.test.d.ts

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

package/dropdown/Dropdown.accessibility.test.d.ts

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