@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

package/checkbox/Checkbox.accessibility.test.js

@@ -5,8 +5,8 @@ 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 _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox 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;
@@ -24,7 +24,7 @@ describe("Checkbox component accessibility tests", function () {
             optional: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -49,7 +49,7 @@ describe("Checkbox component accessibility tests", function () {
             readOnly: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -74,7 +74,7 @@ describe("Checkbox component accessibility tests", function () {
             disabled: true
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();

package/checkbox/Checkbox.js

@@ -13,16 +13,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
-var _uuid = require("uuid");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 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" != _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; }
+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 checkedIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "currentColor",
   focusable: "false",
-  "aria-hidden": "true",
   viewBox: "0 0 24 24"
 }, /*#__PURE__*/_react["default"].createElement("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
@@ -50,13 +48,11 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     size = _ref$size === void 0 ? "fitContent" : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("label-checkbox-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    labelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultChecked),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerChecked = _useState4[0],
-    setInnerChecked = _useState4[1];
+  var labelId = "label-checkbox-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultChecked),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerChecked = _useState2[0],
+    setInnerChecked = _useState2[1];
   var checkboxRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
@@ -91,12 +87,12 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     id: labelId,
     disabled: disabled,
-    labelPosition: labelPosition
+    labelPosition: labelPosition,
+    "aria-label": label
   }, label, optional && " ".concat(translatedLabels.formFields.optionalLabel)), /*#__PURE__*/_react["default"].createElement(ValueInput, {
     type: "checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     name: name,
-    "aria-hidden": "true",
     value: value,
     disabled: disabled,
     readOnly: true
@@ -108,7 +104,8 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     "aria-disabled": disabled,
     "aria-readonly": readOnly,
     "aria-required": !disabled && !optional,
-    "aria-labelledby": labelId,
+    "aria-labelledby": label ? labelId : undefined,
+    "aria-label": label ? undefined : "Checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     disabled: disabled,
     readOnly: readOnly,

package/checkbox/Checkbox.test.d.ts

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

package/checkbox/Checkbox.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox component tests", function () {
   test("Checkbox renders with correct aria-labelledby and aria-required", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {

package/chip/Chip.accessibility.test.d.ts

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

package/chip/Chip.accessibility.test.js

@@ -5,8 +5,8 @@ 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 _Chip = _interopRequireDefault(require("./Chip.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Chip = _interopRequireDefault(require("./Chip"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   version: "1.1",
   x: "0px",
@@ -31,7 +31,7 @@ describe("Chip component accessibility tests", function () {
             label: "Chip"
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -54,7 +54,7 @@ describe("Chip component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/chip/Chip.js

@@ -16,7 +16,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 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; }
+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 DxcChip = function DxcChip(_ref) {
   var label = _ref.label,
     suffixIcon = _ref.suffixIcon,
@@ -35,6 +35,7 @@ var DxcChip = function DxcChip(_ref) {
     margin: margin
   }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickPrefix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickPrefix === "function" ? "Prefix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickPrefix === "function" && !disabled,
     tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
@@ -47,6 +48,7 @@ var DxcChip = function DxcChip(_ref) {
     disabled: disabled
   }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickSuffix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickSuffix === "function" ? "Suffix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickSuffix === "function" && !disabled,
     tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,

package/chip/Chip.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import DxcChip from "./Chip";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";

package/chip/Chip.test.d.ts

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

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

package/common/coreTokens.js

@@ -112,10 +112,10 @@ var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(k
   return CoreColorTokens[key];
 };
 /**
- * Halstack Spacing Principles
+ * Halstack Spacing Values
  * @link https://developer.dxc.com/halstack/next/principles/spacing/
  */
-var SpacingTokens = {
+var CoreSpacingTokens = {
   spacing_0: "0rem",
   spacing_2: "0.125rem",
   spacing_4: "0.25rem",
@@ -132,7 +132,7 @@ var SpacingTokens = {
   spacing_96: "6rem",
   spacing_112: "7rem"
 };
-var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), SpacingTokens), {}, {
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), CoreSpacingTokens), {}, {
   inherit: "inherit",
   // Typography
   type_sans: "Open Sans, sans-serif",

package/common/variables.d.ts

@@ -251,8 +251,7 @@ export declare const componentTokens: {
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconWidth: string;
-        closeIconHeight: string;
+        closeIconSize: string;
         closeIconTopPosition: string;
         closeIconRightPosition: string;
         closeIconBackgroundColor: string;
@@ -290,7 +289,6 @@ export declare const componentTokens: {
         disabledColor: string;
         disabledButtonBackgroundColor: string;
         disabledButtonBorderColor: string;
-        disabledBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -330,7 +328,6 @@ export declare const componentTokens: {
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -531,8 +528,8 @@ export declare const componentTokens: {
         totalItemsContainerMarginLeft: string;
     };
     paragraph: {
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     };

package/common/variables.js

@@ -20,18 +20,18 @@ var componentTokens = exports.componentTokens = {
     assistiveTextFontColor: _coreTokens["default"].color_grey_700,
     disabledAssistiveTextFontColor: _coreTokens["default"].color_grey_500,
     assistiveTextMinWidth: "100px",
-    assistiveTextPaddingRight: "24px",
-    assistiveTextPaddingLeft: "0px",
+    assistiveTextPaddingRight: _coreTokens["default"].spacing_24,
+    assistiveTextPaddingLeft: _coreTokens["default"].spacing_0,
     titleLabelFontFamily: _coreTokens["default"].type_sans,
     titleLabelFontSize: _coreTokens["default"].type_scale_03,
     titleLabelFontWeight: _coreTokens["default"].type_regular,
     titleLabelFontStyle: _coreTokens["default"].type_normal,
     titleLabelFontColor: _coreTokens["default"].color_black,
     disabledTitleLabelFontColor: _coreTokens["default"].color_grey_500,
-    titleLabelPaddingTop: "0px",
-    titleLabelPaddingBottom: "0px",
-    titleLabelPaddingLeft: "0px",
-    titleLabelPaddingRight: "16px",
+    titleLabelPaddingTop: _coreTokens["default"].spacing_0,
+    titleLabelPaddingBottom: _coreTokens["default"].spacing_0,
+    titleLabelPaddingLeft: _coreTokens["default"].spacing_0,
+    titleLabelPaddingRight: _coreTokens["default"].spacing_16,
     focusBorderColor: _coreTokens["default"].color_blue_600,
     focusBorderStyle: _coreTokens["default"].border_solid,
     focusBorderThickness: "2px",
@@ -43,8 +43,8 @@ var componentTokens = exports.componentTokens = {
     iconColor: _coreTokens["default"].color_purple_700,
     disabledIconColor: _coreTokens["default"].color_grey_500,
     iconSize: "24px",
-    iconMarginLeft: "0px",
-    iconMarginRight: "12px",
+    iconMarginLeft: _coreTokens["default"].spacing_0,
+    iconMarginRight: _coreTokens["default"].spacing_12,
     accordionGroupSeparatorBorderColor: _coreTokens["default"].color_grey_200_a,
     accordionGroupSeparatorBorderThickness: "1px",
     accordionGroupSeparatorBorderRadius: "0px",
@@ -57,17 +57,17 @@ var componentTokens = exports.componentTokens = {
     titleFontStyle: _coreTokens["default"].type_normal,
     titleFontWeight: _coreTokens["default"].type_bold,
     titleTextTransform: _coreTokens["default"].type_uppercase,
-    titlePaddingRight: "0px",
-    titlePaddingLeft: "0px",
+    titlePaddingRight: _coreTokens["default"].spacing_0,
+    titlePaddingLeft: _coreTokens["default"].spacing_0,
     inlineTextFontFamily: _coreTokens["default"].type_sans,
     inlineTextFontColor: _coreTokens["default"].color_black,
     inlineTextFontSize: _coreTokens["default"].type_scale_01,
     inlineTextFontStyle: _coreTokens["default"].type_normal,
     inlineTextFontWeight: _coreTokens["default"].type_regular,
-    inlineTextPaddingLeft: "0px",
-    inlineTextPaddingRight: "0px",
-    contentPaddingLeft: "0px",
-    contentPaddingRight: "0px",
+    inlineTextPaddingLeft: _coreTokens["default"].spacing_0,
+    inlineTextPaddingRight: _coreTokens["default"].spacing_0,
+    contentPaddingLeft: _coreTokens["default"].spacing_0,
+    contentPaddingRight: _coreTokens["default"].spacing_0,
     contentPaddingTop: "20px",
     contentPaddingBottom: "30px",
     borderRadius: "4px",
@@ -78,8 +78,8 @@ var componentTokens = exports.componentTokens = {
     warningBorderColor: _coreTokens["default"].color_yellow_700,
     errorBorderColor: _coreTokens["default"].color_red_700,
     iconSize: "24px",
-    iconPaddingLeft: "0px",
-    iconPaddingRight: "0px",
+    iconPaddingLeft: _coreTokens["default"].spacing_0,
+    iconPaddingRight: _coreTokens["default"].spacing_0,
     infoIconColor: _coreTokens["default"].color_blue_800,
     successIconColor: _coreTokens["default"].color_green_700,
     warningIconColor: _coreTokens["default"].color_yellow_700,
@@ -121,7 +121,7 @@ var componentTokens = exports.componentTokens = {
     bulletIconWidth: "1.5rem",
     bulletHeight: "5px",
     bulletWidth: "5px",
-    bulletMarginRight: "0.5rem"
+    bulletMarginRight: _coreTokens["default"].spacing_8
   },
   button: {
     labelFontLineHeight: _coreTokens["default"].type_leading_normal,
@@ -195,7 +195,7 @@ var componentTokens = exports.componentTokens = {
     fontColor: _coreTokens["default"].color_black,
     disabledFontColor: _coreTokens["default"].color_grey_500,
     focusColor: _coreTokens["default"].color_blue_600,
-    checkLabelSpacing: "8px"
+    checkLabelSpacing: _coreTokens["default"].spacing_8
   },
   chip: {
     backgroundColor: _coreTokens["default"].color_grey_200,
@@ -210,12 +210,12 @@ var componentTokens = exports.componentTokens = {
     borderRadius: "80px",
     borderThickness: _coreTokens["default"].border_width_0,
     borderStyle: _coreTokens["default"].border_solid,
-    contentPaddingLeft: "16px",
-    contentPaddingRight: "16px",
-    contentPaddingTop: "0px",
-    contentPaddingBottom: "0px",
+    contentPaddingLeft: _coreTokens["default"].spacing_16,
+    contentPaddingRight: _coreTokens["default"].spacing_16,
+    contentPaddingTop: _coreTokens["default"].spacing_0,
+    contentPaddingBottom: _coreTokens["default"].spacing_0,
     iconSize: "24px",
-    iconSpacing: "8px",
+    iconSpacing: _coreTokens["default"].spacing_8,
     iconColor: _coreTokens["default"].color_grey_800,
     hoverIconColor: _coreTokens["default"].color_grey_900,
     activeIconColor: _coreTokens["default"].color_black,
@@ -259,8 +259,7 @@ var componentTokens = exports.componentTokens = {
   dialog: {
     overlayColor: _coreTokens["default"].color_grey_800_a,
     backgroundColor: _coreTokens["default"].color_white,
-    closeIconWidth: "24px",
-    closeIconHeight: "24px",
+    closeIconSize: "24px",
     closeIconTopPosition: "20px",
     closeIconRightPosition: "20px",
     closeIconBackgroundColor: _coreTokens["default"].color_transparent,
@@ -286,10 +285,10 @@ var componentTokens = exports.componentTokens = {
     buttonIconSize: "20px",
     buttonIconSpacing: "10px",
     buttonIconColor: _coreTokens["default"].color_black,
-    buttonPaddingTop: "0px",
-    buttonPaddingBottom: "0px",
-    buttonPaddingLeft: "16px",
-    buttonPaddingRight: "16px",
+    buttonPaddingTop: _coreTokens["default"].spacing_0,
+    buttonPaddingBottom: _coreTokens["default"].spacing_0,
+    buttonPaddingLeft: _coreTokens["default"].spacing_16,
+    buttonPaddingRight: _coreTokens["default"].spacing_16,
     buttonHeight: "40px",
     buttonBorderRadius: "4px",
     buttonBorderStyle: _coreTokens["default"].border_none,
@@ -298,7 +297,6 @@ var componentTokens = exports.componentTokens = {
     disabledColor: _coreTokens["default"].color_grey_500,
     disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
     disabledButtonBorderColor: _coreTokens["default"].color_transparent,
-    disabledBorderColor: _coreTokens["default"].color_transparent,
     optionBackgroundColor: _coreTokens["default"].color_white,
     hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
     activeOptionBackgroundColor: _coreTokens["default"].color_grey_300,
@@ -312,11 +310,11 @@ var componentTokens = exports.componentTokens = {
     optionIconColor: _coreTokens["default"].color_black,
     optionPaddingTop: "6px",
     optionPaddingBottom: "6px",
-    optionPaddingLeft: "16px",
-    optionPaddingRight: "16px",
+    optionPaddingLeft: _coreTokens["default"].spacing_16,
+    optionPaddingRight: _coreTokens["default"].spacing_16,
     caretIconSize: "24px",
     caretIconColor: _coreTokens["default"].color_black,
-    caretIconSpacing: "12px",
+    caretIconSpacing: _coreTokens["default"].spacing_12,
     borderRadius: "4px",
     borderStyle: _coreTokens["default"].border_none,
     borderThickness: _coreTokens["default"].border_width_0,
@@ -338,7 +336,6 @@ var componentTokens = exports.componentTokens = {
     focusDropBorderColor: _coreTokens["default"].color_blue_600,
     disabledDropBorderColor: _coreTokens["default"].color_grey_500,
     dragoverDropBackgroundColor: _coreTokens["default"].color_blue_50,
-    activeFileItemIconBackgrounColor: _coreTokens["default"].color_grey_300,
     errorFileItemBorderColor: _coreTokens["default"].color_red_700,
     errorFileItemBackgroundColor: _coreTokens["default"].color_red_50,
     errorFilePreviewBackgroundColor: _coreTokens["default"].color_red_200,
@@ -384,7 +381,7 @@ var componentTokens = exports.componentTokens = {
     bottomLinksDividerColor: _coreTokens["default"].color_blue_600,
     bottomLinksDividerThickness: "1px",
     bottomLinksDividerStyle: _coreTokens["default"].border_solid,
-    bottomLinksDividerSpacing: "8px",
+    bottomLinksDividerSpacing: _coreTokens["default"].spacing_8,
     bottomLinksFontFamily: _coreTokens["default"].type_sans,
     bottomLinksFontSize: _coreTokens["default"].type_scale_01,
     bottomLinksFontStyle: _coreTokens["default"].type_normal,
@@ -400,7 +397,7 @@ var componentTokens = exports.componentTokens = {
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
-    socialLinksGutter: "16px",
+    socialLinksGutter: _coreTokens["default"].spacing_16,
     socialLinksColor: _coreTokens["default"].color_white
   },
   header: {
@@ -426,10 +423,10 @@ var componentTokens = exports.componentTokens = {
     overlayColor: _coreTokens["default"].color_grey_800_a,
     overlayOpacity: "0.7",
     overlayZindex: "1600",
-    paddingTop: "0px",
-    paddingBottom: "0px",
-    paddingRight: "24px",
-    paddingLeft: "24px",
+    paddingTop: _coreTokens["default"].spacing_0,
+    paddingBottom: _coreTokens["default"].spacing_0,
+    paddingRight: _coreTokens["default"].spacing_24,
+    paddingLeft: _coreTokens["default"].spacing_24,
     underlinedColor: _coreTokens["default"].color_black,
     underlinedThickness: "2px",
     underlinedStyle: _coreTokens["default"].border_solid,
@@ -487,8 +484,8 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     iconSize: "16px",
-    iconSpacing: "4px",
-    underlineSpacing: "0px",
+    iconSpacing: _coreTokens["default"].spacing_4,
+    underlineSpacing: _coreTokens["default"].spacing_0,
     underlineStyle: _coreTokens["default"].border_solid,
     underlineThickness: "1px",
     disabledFontColor: _coreTokens["default"].color_grey_500,
@@ -527,20 +524,20 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     fontTextTransform: "none",
-    verticalPadding: "0.75rem",
-    horizontalPadding: "2rem",
-    marginRight: "40px",
+    verticalPadding: _coreTokens["default"].spacing_12,
+    horizontalPadding: _coreTokens["default"].spacing_32,
+    marginRight: _coreTokens["default"].spacing_40,
     marginLeft: "20px",
-    itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "0.5rem",
+    itemsPerPageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    itemsPerPageSelectorMarginRight: _coreTokens["default"].spacing_8,
     pageSelectorMarginRight: "30px",
-    pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "2.5rem",
-    totalItemsContainerMarginLeft: "0px"
+    pageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    totalItemsContainerMarginRight: _coreTokens["default"].spacing_40,
+    totalItemsContainerMarginLeft: _coreTokens["default"].spacing_0
   },
   paragraph: {
-    fontColor: _coreTokens["default"].color_black,
     display: "block",
+    fontColor: _coreTokens["default"].color_black,
     fontSize: _coreTokens["default"].type_scale_03,
     fontWeight: _coreTokens["default"].type_regular
   },
@@ -726,10 +723,10 @@ var componentTokens = exports.componentTokens = {
     linkFontTextTransform: "none",
     linkFontLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
     linkTextDecoration: _coreTokens["default"].type_no_line,
-    linkMarginTop: "4px",
-    linkMarginBottom: "4px",
-    linkMarginRight: "16px",
-    linkMarginLeft: "16px",
+    linkMarginTop: _coreTokens["default"].spacing_4,
+    linkMarginBottom: _coreTokens["default"].spacing_4,
+    linkMarginRight: _coreTokens["default"].spacing_16,
+    linkMarginLeft: _coreTokens["default"].spacing_16,
     linkFocusColor: _coreTokens["default"].color_blue_600,
     scrollBarThumbColor: _coreTokens["default"].color_grey_200_a,
     scrollBarTrackColor: _coreTokens["default"].color_transparent
@@ -843,7 +840,7 @@ var componentTokens = exports.componentTokens = {
     thumbShift: "1.25rem",
     trackHeight: "12px",
     trackWidth: "36px",
-    spaceBetweenLabelSwitch: "8px"
+    spaceBetweenLabelSwitch: _coreTokens["default"].spacing_8
   },
   table: {
     rowSeparatorThickness: "1px",
@@ -856,8 +853,8 @@ var componentTokens = exports.componentTokens = {
     dataFontWeight: _coreTokens["default"].type_regular,
     dataFontColor: _coreTokens["default"].color_black,
     dataFontTextTransform: "none",
-    dataPaddingTop: "16px",
-    dataPaddingBottom: "16px",
+    dataPaddingTop: _coreTokens["default"].spacing_16,
+    dataPaddingBottom: _coreTokens["default"].spacing_16,
     dataPaddingRight: "20px",
     dataPaddingLeft: "20px",
     dataPaddingTopReduced: _coreTokens["default"].spacing_8,
@@ -878,8 +875,8 @@ var componentTokens = exports.componentTokens = {
     headerFontWeight: _coreTokens["default"].type_regular,
     headerFontColor: _coreTokens["default"].color_white,
     headerFontTextTransform: "none",
-    headerPaddingTop: "16px",
-    headerPaddingBottom: "16px",
+    headerPaddingTop: _coreTokens["default"].spacing_16,
+    headerPaddingBottom: _coreTokens["default"].spacing_16,
     headerPaddingRight: "20px",
     headerPaddingLeft: "20px",
     headerPaddingTopReduced: _coreTokens["default"].spacing_8,
@@ -933,10 +930,10 @@ var componentTokens = exports.componentTokens = {
     fontSize: _coreTokens["default"].type_scale_02,
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
-    labelPaddingTop: "0px",
-    labelPaddingBottom: "0px",
-    labelPaddingLeft: "16px",
-    labelPaddingRight: "16px",
+    labelPaddingTop: _coreTokens["default"].spacing_0,
+    labelPaddingBottom: _coreTokens["default"].spacing_0,
+    labelPaddingLeft: _coreTokens["default"].spacing_16,
+    labelPaddingRight: _coreTokens["default"].spacing_16,
     height: "40px",
     iconColor: _coreTokens["default"].color_white,
     iconSectionWidth: "40px",
@@ -1154,13 +1151,13 @@ var componentTokens = exports.componentTokens = {
   }
 };
 var spaces = exports.spaces = {
-  xxsmall: "6px",
-  xsmall: "16px",
-  small: "24px",
-  medium: "36px",
-  large: "48px",
-  xlarge: "64px",
-  xxlarge: "100px"
+  xxsmall: _coreTokens["default"].spacing_4,
+  xsmall: _coreTokens["default"].spacing_8,
+  small: _coreTokens["default"].spacing_12,
+  medium: _coreTokens["default"].spacing_16,
+  large: _coreTokens["default"].spacing_24,
+  xlarge: _coreTokens["default"].spacing_32,
+  xxlarge: _coreTokens["default"].spacing_48
 };
 var responsiveSizes = exports.responsiveSizes = {
   xsmall: "20",

package/container/Container.stories.tsx

@@ -108,7 +108,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>1</b>
+          <b tabIndex={0}>1</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -116,7 +116,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>2</b>
+          <b tabIndex={0}>2</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -124,7 +124,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>3</b>
+          <b tabIndex={0}>3</b>
         </DxcContainer>
       </DxcContainer>
     </ExampleContainer>

package/contextual-menu/ContextualMenu.accessibility.test.d.ts

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

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

@@ -5,8 +5,20 @@ 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 _axeHelper = require("../../test/accessibility/axe-helper.js");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+var _disabledRules = require("../../test/accessibility/rules/specific/contextual-menu/disabledRules.js");
+// TODO: REMOVE
+
+var disabledRules = {
+  rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
+    rulesObj[rule] = {
+      enabled: false
+    };
+    return rulesObj;
+  }, {})
+};
 var badge_icon = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24",
   height: "24",
@@ -40,7 +52,7 @@ var fav_icon = /*#__PURE__*/_react["default"].createElement("svg", {
 }));
 var itemsWithTruncatedText = [{
   label: "Item with a very long label that should be truncated",
-  slot: /*#__PURE__*/_react["default"].createElement(_ContextualMenu["default"].Badge, {
+  slot: /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
     color: "blue",
     mode: "contextual",
     label: "Label",
@@ -73,7 +85,7 @@ describe("Context menu accessibility tests", function () {
             items: itemsWithTruncatedText
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container, disabledRules);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();