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

package/accordion-group/AccordionGroup.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 _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
 describe("Accordion component tests", function () {
   test("Uncontrolled accordion group calls correct function on click", function () {
     var onActiveChange = jest.fn();
@@ -11,8 +11,7 @@ describe("Accordion component tests", function () {
         margin: "large",
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
@@ -48,8 +47,7 @@ describe("Accordion component tests", function () {
         indexActive: 1,
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
@@ -70,8 +68,7 @@ describe("Accordion component tests", function () {
       indexActive: 0,
       onActiveChange: onActiveChange
     }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      margin: "large"
+      label: "Accordion1"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
       label: "Accordion2"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
@@ -85,8 +82,7 @@ describe("Accordion component tests", function () {
         onActiveChange: onActiveChange,
         disabled: true
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),

package/accordion-group/AccordionGroupAccordion.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
 var _AccordionGroupContext = require("./AccordionGroupContext");
 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 AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
   var childProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   var _useContext = (0, _react.useContext)(_AccordionGroupContext.AccordionGroupAccordionContext),

package/action-icon/ActionIcon.accessibility.test.d.ts

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

package/action-icon/ActionIcon.accessibility.test.js

@@ -0,0 +1,63 @@
+"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 _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  width: "24px",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+}));
+describe("Action icon 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(_ActionIcon["default"], {
+            icon: iconSVG,
+            title: "favourite"
+          })), 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 disabled 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(_ActionIcon["default"], {
+            icon: iconSVG,
+            title: "disabled",
+            disabled: 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);
+  })));
+});

package/action-icon/ActionIcon.test.d.ts

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

package/action-icon/ActionIcon.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 _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",

package/alert/Alert.accessibility.test.d.ts

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

package/alert/Alert.accessibility.test.js

@@ -0,0 +1,95 @@
+"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 _Alert = _interopRequireDefault(require("./Alert"));
+describe("Alert component accessibility tests", function () {
+  it("Should not have basic accessibility issues for confirm mode", /*#__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(_Alert["default"], {
+            type: "confirm",
+            inlineText: "info-alert-text",
+            margin: "small"
+          })), 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 error 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(_Alert["default"], {
+            type: "error",
+            inlineText: "info-alert-text",
+            margin: "small"
+          })), 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 info 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(_Alert["default"], {
+            type: "info",
+            inlineText: "info-alert-text",
+            margin: "small"
+          })), 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 warning 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(_Alert["default"], {
+            type: "warning",
+            inlineText: "info-alert-text",
+            margin: "small"
+          })), 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);
+  })));
+});

package/alert/Alert.js

@@ -14,72 +14,10 @@ var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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; }
-var alertIcons = {
-  close: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__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 12z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  })),
-  info: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-  })),
-  success: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-  })),
-  warning: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-  })),
-  error: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }))
-};
+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 DxcAlert = function DxcAlert(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "info" : _ref$type,
@@ -109,13 +47,26 @@ var DxcAlert = function DxcAlert(_ref) {
     mode: mode,
     type: type,
     margin: margin,
-    size: size
+    size: size,
+    role: type === "error" ? "alert" : "status",
+    "aria-live": type === "error" ? "assertive" : "off"
   }, /*#__PURE__*/_react["default"].createElement(AlertInfo, null, /*#__PURE__*/_react["default"].createElement(AlertIcon, {
     type: type
-  }, type === "info" && alertIcons.info || type === "confirm" && alertIcons.success || type === "warning" && alertIcons.warning || type === "error" && alertIcons.error), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
+  }, type === "info" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_info"
+  }) || type === "confirm" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_check_circle"
+  }) || type === "warning" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_warning"
+  }) || type === "error" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_cancel"
+  })), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
     onClick: onClose,
-    tabIndex: tabIndex
-  }, alertIcons.close)), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, children))));
+    tabIndex: tabIndex,
+    "aria-label": "Close alert"
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "close"
+  }))), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, children))));
 };
 var sizes = {
   small: "280px",
@@ -229,7 +180,7 @@ var AlertInlineText = _styledComponents["default"].div(_templateObject6 || (_tem
 }, function (props) {
   return props.theme.inlineTextFontColor;
 });
-var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  font-size: ", ";\n"])), function (props) {
   return props.theme.iconPaddingRight;
 }, function (props) {
   return props.theme.iconPaddingLeft;
@@ -237,14 +188,12 @@ var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_template
   return props.type === "info" && props.theme.infoIconColor || props.type === "confirm" && props.theme.successIconColor || props.type === "warning" && props.theme.warningIconColor || props.type === "error" && props.theme.errorIconColor;
 }, function (props) {
   return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
 });
 var AlertText = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  align-items: center;\n  overflow: hidden;\n"])));
 var AlertContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  padding: ", ";\n  overflow-y: auto;\n"])), function (props) {
   return "".concat(props.theme.contentPaddingTop, " ").concat(props.theme.contentPaddingRight, " ").concat(props.theme.contentPaddingBottom, " ").concat(props.theme.contentPaddingLeft);
 });
-var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 20px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.hoverActionBackgroundColor;
 }, function (props) {
   return props.theme.focusActionBorderColor;

package/alert/Alert.test.d.ts

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

package/alert/Alert.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 _Alert = _interopRequireDefault(require("./Alert.tsx"));
+var _Alert = _interopRequireDefault(require("./Alert"));
 describe("Alert component tests", function () {
   test("Info alert renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {

package/badge/Badge.accessibility.test.d.ts

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

package/badge/Badge.accessibility.test.js

@@ -0,0 +1,129 @@
+"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 _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var 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"
+}));
+describe("Badge component accessibility tests", function () {
+  it("Should not have basic accessibility issues for contextual mode", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "blue",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "green",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "grey",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "orange",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "purple",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "red",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "yellow",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }))), 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 notification 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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 100,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99,
+            title: "Badge2"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 50,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99,
+            title: "Badge2"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 1000000,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99999999,
+            title: "Badge2"
+          }))), 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);
+  })));
+});

package/badge/Badge.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 var contextualColorMap = {
   grey: {
@@ -111,9 +112,8 @@ var DxcBadge = function DxcBadge(_ref2) {
     alignItems: "center"
   }, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     size: size
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon,
-    alt: title
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), /*#__PURE__*/_react["default"].createElement(Label, {
     label: label,
     notificationLimit: notificationLimit,
@@ -148,7 +148,9 @@ var BadgeContainer = _styledComponents["default"].div(_templateObject || (_templ
 }, function (props) {
   return props.label ? getPadding(props.mode, props.size) : "";
 });
-var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  img,\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-size: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+  return sizeMap[props.size].iconSize;
+}, function (props) {
   return sizeMap[props.size].iconSize;
 }, function (props) {
   return sizeMap[props.size].iconSize;