@dxc-technology/halstack-react 11.0.0 → 12.0.1

package/password-input/PasswordInput.accessibility.test.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+describe("Password input component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            clearable: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for pattern 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(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            autocomplete: "on",
+            pattern: "^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? \"]).*$"
+          })), 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 clearable 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(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            error: "Password error",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            clearable: true
+          })), 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 autocomplete 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(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            autocomplete: "on"
+          })), 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/password-input/PasswordInput.js

@@ -12,17 +12,16 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 var _useTranslatedLabels2 = _interopRequireDefault(require("../useTranslatedLabels"));
-var _Icons = _interopRequireDefault(require("./Icons"));
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var setInputType = function setInputType(type, element) {
   element === null || element === void 0 ? void 0 : element.getElementsByTagName("input")[0].setAttribute("type", type);
 };
 var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel, element) {
-  var inputElement = element === null || element === void 0 ? void 0 : element.getElementsByTagName("input")[0];
-  inputElement === null || inputElement === void 0 ? void 0 : inputElement.setAttribute("aria-expanded", ariaExpanded);
-  inputElement === null || inputElement === void 0 ? void 0 : inputElement.setAttribute("aria-label", ariaLabel);
+  var buttonElement = element === null || element === void 0 ? void 0 : element.getElementsByTagName("button")[0];
+  buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.setAttribute("aria-expanded", ariaExpanded);
+  buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.setAttribute("aria-label", ariaLabel);
 };
 var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
@@ -64,7 +63,8 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     })();
   }, [isPasswordVisible, passwordInput]);
   return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
-    ref: ref
+    ref: ref,
+    role: "group"
   }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
@@ -76,7 +76,7 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           return !isPasswordVisible;
         });
       },
-      icon: isPasswordVisible ? _Icons["default"].hidePassword : _Icons["default"].showPassword,
+      icon: isPasswordVisible ? 'Visibility_Off' : 'Visibility',
       title: isPasswordVisible ? passwordInput.inputHidePasswordTitle : passwordInput.inputShowPasswordTitle
     },
     error: error,

package/password-input/PasswordInput.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { userEvent, within } from "@storybook/testing-library";
 import DxcPasswordInput from "./PasswordInput";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 

package/password-input/PasswordInput.test.d.ts

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

package/password-input/PasswordInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _PasswordInput = _interopRequireDefault(require("./PasswordInput.tsx"));
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -173,21 +173,21 @@ describe("Password input component tests", function () {
     }, _callee4);
   })));
   test("Password input has correct accessibility attributes", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var _render9, getByRole, getByLabelText, passwordInput, showButton;
+    var _render9, getByRole, getByLabelText, showButton;
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
           _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
             label: "Password input"
           })), getByRole = _render9.getByRole, getByLabelText = _render9.getByLabelText;
-          passwordInput = getByLabelText("Password input");
           showButton = getByRole("button");
-          expect(passwordInput.getAttribute("aria-expanded")).toBe("false");
+          expect(getByLabelText("Password input")).toBeTruthy();
+          expect(showButton.getAttribute("aria-expanded")).toBe("false");
           expect(showButton.getAttribute("aria-label")).toBe("Show password");
           _context5.next = 7;
           return _userEvent["default"].click(showButton);
         case 7:
-          expect(passwordInput.getAttribute("aria-expanded")).toBe("true");
+          expect(showButton.getAttribute("aria-expanded")).toBe("true");
           expect(showButton.getAttribute("aria-label")).toBe("Hide password");
         case 9:
         case "end":

package/progress-bar/ProgressBar.accessibility.test.d.ts

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

package/progress-bar/ProgressBar.accessibility.test.js

@@ -0,0 +1,35 @@
+"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 _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+describe("ProgressBar 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(_ProgressBar["default"], {
+            label: "test-label",
+            helperText: "helper-text",
+            margin: "medium",
+            value: 50,
+            showValue: true,
+            overlay: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/progress-bar/ProgressBar.js

@@ -13,10 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _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 DxcProgressBar = function DxcProgressBar(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
@@ -29,7 +28,6 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
     showValue = _ref$showValue === void 0 ? false : _ref$showValue,
     margin = _ref.margin;
   var colorsTheme = (0, _useTheme["default"])();
-  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     valueProgressBar = _useState2[0],
@@ -45,26 +43,24 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
     overlay: overlay,
     margin: margin
   }, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
-    overlay: overlay,
-    backgroundType: backgroundType,
-    "aria-label": label || undefined
+    overlay: overlay
   }, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
     overlay: overlay,
     showValue: showValue,
-    backgroundType: backgroundType,
     value: valueProgressBar
   }, valueProgressBar, " %")), /*#__PURE__*/_react["default"].createElement(LinearProgress, {
     role: "progressbar",
     helperText: helperText,
-    "aria-valuenow": showValue ? valueProgressBar : undefined
+    "aria-valuenow": showValue ? valueProgressBar : undefined,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-label": label || "Progress Bar"
   }, /*#__PURE__*/_react["default"].createElement(LinearProgressBar, {
-    backgroundType: backgroundType,
     variant: value === null || value === undefined ? "indeterminate" : "determinate",
     container: "first",
     value: valueProgressBar
   })), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
-    overlay: overlay,
-    backgroundType: backgroundType
+    overlay: overlay
   }, helperText))));
 };
 var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  min-width: 100px;\n  width: 100%;\n"])), function (_ref2) {
@@ -99,7 +95,7 @@ var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_te
 }, function (props) {
   return props.theme.labelFontTextTransform;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor;
+  return props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor;
 });
 var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  display: ", ";\n  flex-shrink: 0;\n"])), function (props) {
   return props.theme.valueFontFamily;
@@ -112,12 +108,12 @@ var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (
 }, function (props) {
   return props.theme.valueFontTextTransform;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? props.theme.overlayFontColor : props.theme.valueFontColor;
+  return props.overlay === true ? props.theme.overlayFontColor : props.theme.valueFontColor;
 }, function (props) {
   return props.value !== undefined && props.value !== null && props.showValue === true && "block" || "none";
 });
 var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n"])), function (props) {
-  return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor;
+  return props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.helperTextFontFamily;
 }, function (props) {
@@ -137,7 +133,7 @@ var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_temp
   return props.helperText !== "" && "8px";
 });
 var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  transform: ", ";\n  top: 0;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  position: absolute;\n  transition: ", ";\n  transform-origin: left;\n  ", ";\n  ", ";\n\n  @keyframes keyframes-indeterminate-first {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n\n  @keyframes keyframes-indeterminate-second {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"])), function (props) {
-  return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
+  return props.theme.trackLineColor;
 }, function (props) {
   return "translateX(-".concat(props.variant === "determinate" ? 100 - props.value : 0, "%)");
 }, function (props) {

package/progress-bar/ProgressBar.test.d.ts

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

package/progress-bar/ProgressBar.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 _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 describe("ProgressBar component tests", function () {
   test("ProgressBar renders with label and helperText", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {

package/quick-nav/QuickNav.accessibility.test.d.ts

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

package/quick-nav/QuickNav.accessibility.test.js

@@ -0,0 +1,57 @@
+"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 _QuickNav = _interopRequireDefault(require("./QuickNav"));
+var links = [{
+  label: "Overview",
+  links: [{
+    label: "Introduction"
+  }]
+}, {
+  label: "Components",
+  links: [{
+    label: "Introduction"
+  }, {
+    label: "Accordion"
+  }]
+}, {
+  label: "Principles very very very very very very very very long",
+  links: [{
+    label: "Color very very very very very very very very long"
+  }, {
+    label: "Spacingveryveryveryveryveryveryveryverylong"
+  }, {
+    label: "Typography"
+  }]
+}, {
+  label: "Componentsveryveryveryveryveryveryveryverylong",
+  links: [{
+    label: "Accordion"
+  }]
+}];
+describe("Quick Nav component accessibility tests", function () {
+  it("Should not have basic accessibility issues for icon 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(_QuickNav["default"], {
+            links: links
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/quick-nav/QuickNav.js

@@ -18,7 +18,7 @@ var _Typography = _interopRequireDefault(require("../typography/Typography"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 DxcQuickNav = function DxcQuickNav(_ref) {
   var title = _ref.title,
     links = _ref.links;

package/radio-group/Radio.js

@@ -10,12 +10,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _uuid = require("uuid");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 DxcRadio = function DxcRadio(_ref) {
   var label = _ref.label,
     checked = _ref.checked,
@@ -25,9 +24,7 @@ var DxcRadio = function DxcRadio(_ref) {
     focused = _ref.focused,
     readOnly = _ref.readOnly,
     tabIndex = _ref.tabIndex;
-  var _useState = (0, _react.useState)("radio-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    radioLabelId = _useState2[0];
+  var radioLabelId = "radio-".concat((0, _react.useId)());
   var ref = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
   var handleOnClick = function handleOnClick() {
@@ -35,10 +32,10 @@ var DxcRadio = function DxcRadio(_ref) {
     onClick();
     document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
   };
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    firstUpdate = _useState4[0],
-    setFirstUpdate = _useState4[1];
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    firstUpdate = _useState2[0],
+    setFirstUpdate = _useState2[1];
   (0, _react.useEffect)(function () {
     var _ref$current2;
     // Don't apply in the first render

package/radio-group/RadioGroup.accessibility.test.d.ts

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

package/radio-group/RadioGroup.accessibility.test.js

@@ -0,0 +1,97 @@
+"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 _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+var options = [{
+  label: "Option 01",
+  value: "1"
+}, {
+  label: "Option 02",
+  value: "2"
+}, {
+  label: "Option 03",
+  value: "3"
+}, {
+  label: "Option 04",
+  value: "4"
+}, {
+  label: "Option 05",
+  value: "5",
+  disabled: true
+}, {
+  label: "Option 06",
+  value: "6",
+  disabled: true
+}, {
+  label: "Option 07",
+  value: "7",
+  disabled: true
+}, {
+  label: "Option 08",
+  value: "8",
+  disabled: true
+}, {
+  label: "Option 09",
+  value: "9"
+}];
+describe("Radio 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(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            options: options,
+            error: "Error",
+            defaultValue: "3",
+            helperText: "Helper Text",
+            name: "Name",
+            stacking: "row",
+            optionalItemLabel: "Optional",
+            optional: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for read-only 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(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            options: options,
+            error: "Error",
+            defaultValue: "3",
+            helperText: "Helper Text",
+            name: "Name",
+            stacking: "row",
+            optionalItemLabel: "Optional",
+            readOnly: 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);
+  })));
+});