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

package/toggle-group/ToggleGroup.accessibility.test.js

@@ -0,0 +1,107 @@
+"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 _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
+var ethernetSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"
+}));
+var gMobileSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0,0h24v24H0V0z",
+  fill: "none"
+})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
+}))));
+var wifiSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0V0zm0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
+}));
+var options = [{
+  value: 1,
+  icon: wifiSVG,
+  title: "WiFi connection"
+}, {
+  value: 2,
+  icon: ethernetSVG,
+  title: "Ethernet connection"
+}, {
+  value: 3,
+  icon: gMobileSVG,
+  title: "3G Mobile data connection"
+}];
+describe("Toggle group 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(_ToggleGroup["default"], {
+            label: "Toggle group label",
+            helperText: "Toggle group helper text",
+            options: options,
+            margin: "medium",
+            defaultValue: 2,
+            multiple: true
+          })), 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);
+  })));
+  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(_ToggleGroup["default"], {
+            label: "Toggle group label",
+            helperText: "Toggle group helper text",
+            options: options,
+            margin: "medium",
+            disabled: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/toggle-group/ToggleGroup.js

@@ -15,6 +15,7 @@ var _uuid = require("uuid");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -106,8 +107,8 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       alignItems: "center"
     }, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
       optionLabel: option.label
-    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-      src: option.icon
+    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      icon: option.icon
     }) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
   }))));
 };
@@ -195,7 +196,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_tem
 }, function (props) {
   return props.theme.optionLabelFontWeight;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 24px;\n  width: 24px;\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-right: ", ";\n  overflow: hidden;\n  font-size: 24px;\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
   return props.optionLabel && props.theme.iconMarginRight;
 });
 var _default = exports["default"] = DxcToggleGroup;

package/toggle-group/ToggleGroup.stories.tsx

@@ -52,17 +52,17 @@ const options = [
 const optionsWithIcon = [
   {
     value: 1,
-    icon: wifiSVG,
+    icon: "wifi",
     title: "WiFi connection",
   },
   {
     value: 2,
-    icon: ethernetSVG,
+    icon: "filled_lan",
     title: "Ethernet connection",
   },
   {
     value: 3,
-    icon: gMobileSVG,
+    icon: "5g",
     title: "3G Mobile data connection",
   },
 ];

package/toggle-group/types.d.ts

@@ -13,7 +13,7 @@ type OptionIcon = {
      */
     label?: never;
     /**
-     * Element used as the icon. Icon and label can't be used at same time.
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon: string | SVG;
     /**
@@ -28,7 +28,7 @@ export type OptionLabel = {
      */
     label: string;
     /**
-     * Element used as the icon. Icon and label can't be used at same time.
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
     /**

package/typography/Typography.accessibility.test.js

@@ -0,0 +1,339 @@
+"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 _Typography = _interopRequireDefault(require("./Typography"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+describe("Typography component accessibility tests", function () {
+  it("Should not have basic accessibility issues for different font sizes", /*#__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(_Typography["default"], {
+            display: "block",
+            fontSize: "3.75rem"
+          }, "3.75rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "3rem"
+          }, "3rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "2rem"
+          }, "2rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "1.5rem"
+          }, "1.5rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "1.25rem"
+          }, "1.25rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "1rem"
+          }, "1rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "0.875rem"
+          }, "0.875rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontSize: "0.75rem"
+          }, "0.75rem."))), 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);
+  })));
+  it("Should not have basic accessibility issues for different letter spacings", /*#__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(_Typography["default"], {
+            display: "block",
+            letterSpacing: "-0.025em"
+          }, "-0.025em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            letterSpacing: "-0.0125em"
+          }, "-0.0125em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            letterSpacing: "0em"
+          }, "0em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            letterSpacing: "0.025em"
+          }, "0.025em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            letterSpacing: "0.05em"
+          }, "0.05em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            letterSpacing: "0.1em"
+          }, "0.1em."))), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.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 different line heights", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "1em"
+          }, "1em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "1.25em"
+          }, "1.25em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "1.365em"
+          }, "1.365em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "1.5em"
+          }, "1.5em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "1.715em"
+          }, "1.715em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            lineHeight: "2em"
+          }, "2em."))), container = _render3.container;
+          _context3.next = 3;
+          return (0, _jestAxe.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 different font weights", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontWeight: "300"
+          }, "300."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontWeight: "400"
+          }, "400."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontWeight: "600"
+          }, "600."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontWeight: "700"
+          }, "700."))), container = _render4.container;
+          _context4.next = 3;
+          return (0, _jestAxe.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 different text decorations", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textDecoration: "underline"
+          }, "Underline."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textDecoration: "line-through"
+          }, "Line-through."))), container = _render5.container;
+          _context5.next = 3;
+          return (0, _jestAxe.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 different font families", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontFamily: "Open Sans, sans-serif"
+          }, "Open Sans, sans-serif."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontFamily: "Source Code Pro, monospace"
+          }, "Source Code Pro, monospace."))), container = _render6.container;
+          _context6.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context6.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  it("Should not have basic accessibility issues for different font styles", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var _render7, container, results;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontStyle: "italic"
+          }, "Italic."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            fontStyle: "normal"
+          }, "Normal."))), container = _render7.container;
+          _context7.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context7.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  it("Should not have basic accessibility issues for different text alignments", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render8, container, results;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textAlign: "left"
+          }, "Left."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textAlign: "center"
+          }, "Center."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textAlign: "right"
+          }, "Right."))), container = _render8.container;
+          _context8.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context8.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  it("Should not have basic accessibility issues for different white-spaces", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var _render9, container, results;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            fontSize: "2rem"
+          }, "                  ", " Normal: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            whiteSpace: "nowrap",
+            fontSize: "2rem"
+          }, "                  ", "No-wrap: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            whiteSpace: "pre",
+            fontSize: "2rem"
+          }, "                  ", " pre: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            whiteSpace: "pre-line",
+            fontSize: "2rem"
+          }, "                  ", "pre-line: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            whiteSpace: "pre-wrap",
+            fontSize: "2rem"
+          }, "                  ", " pre-wrap: A bunch of words you see."))), container = _render9.container;
+          _context9.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context9.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
+  it("Should not have basic accessibility issues for different displays", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var _render10, container, results;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textAlign: "left"
+          }, "Display Block.", /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "A different text.")), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "inline",
+            textAlign: "left"
+          }, "Display Inline.", /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "A different text.")))), container = _render10.container;
+          _context10.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context10.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+  it("Should not have basic accessibility issues for different text overflows", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var _render11, container, results;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+            style: {
+              width: "75px"
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textOverflow: "clip"
+          }, "Overflow clip.")), /*#__PURE__*/_react["default"].createElement("div", {
+            style: {
+              width: "75px"
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textOverflow: "ellipsis"
+          }, "Overflow ellipsis.")), /*#__PURE__*/_react["default"].createElement("div", {
+            style: {
+              width: "75px"
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+            display: "block",
+            textOverflow: "unset"
+          }, "Overflow unset.")))), container = _render11.container;
+          _context11.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context11.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+});

package/wizard/Wizard.accessibility.test.js

@@ -0,0 +1,55 @@
+"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 _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
+var favoriteSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  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("Wizard 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(_Wizard["default"], {
+            steps: [{
+              label: "first-step",
+              description: "Description",
+              icon: favoriteSVG
+            }, {
+              label: "second-step",
+              description: "Description"
+            }, {
+              label: "valid-step",
+              valid: true
+            }, {
+              label: "disabled-step",
+              disabled: true
+            }],
+            mode: "vertical",
+            defaultCurrentStep: 1,
+            margin: "medium"
+          })), 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/Icons.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-export declare const calendarIcon: React.JSX.Element;
-export declare const leftCaret: React.JSX.Element;
-export declare const rightCaret: React.JSX.Element;
-export declare const downCaret: React.JSX.Element;
-export declare const upCaret: React.JSX.Element;

package/date-input/Icons.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.upCaret = exports.rightCaret = exports.leftCaret = exports.downCaret = exports.calendarIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var calendarIcon = exports.calendarIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  viewBox: "0 0 24 24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0z",
-  fill: "none"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
-}));
-var leftCaret = exports.leftCaret = /*#__PURE__*/_react["default"].createElement("svg", {
-  fill: "currentColor",
-  focusable: "false",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  fill: "none",
-  d: "M0 0h24v24H0V0z"
-}));
-var rightCaret = exports.rightCaret = /*#__PURE__*/_react["default"].createElement("svg", {
-  fill: "currentColor",
-  focusable: "false",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  fill: "none",
-  d: "M0 0h24v24H0V0z"
-}));
-var downCaret = exports.downCaret = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M7.5 10L12.5 15L17.5 10H7.5Z",
-  fill: "currentColor"
-}));
-var upCaret = exports.upCaret = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  width: "24",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "m7 14 5-5 5 5Z",
-  fill: "currentColor"
-}));

package/sidenav/Icons.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-declare const icons: {
-    collapsedIcon: React.JSX.Element;
-    collapsableIcon: React.JSX.Element;
-    externalLinkIcon: React.JSX.Element;
-};
-export default icons;