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

package/paragraph/Paragraph.accessibility.test.js

@@ -0,0 +1,28 @@
+"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 _Paragraph = _interopRequireDefault(require("./Paragraph"));
+describe("Paragraph 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(_Paragraph["default"], null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl. Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.")), 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/password-input/PasswordInput.accessibility.test.d.ts

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

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

@@ -0,0 +1,152 @@
+"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);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+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,9 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     })();
   }, [isPasswordVisible, passwordInput]);
   return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
-    ref: ref
+    ref: ref,
+    role: "group",
+    size: size
   }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
@@ -76,7 +77,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,
@@ -93,5 +94,7 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     tabIndex: tabIndex
   }));
 });
-var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  & ::-ms-reveal {\n    display: none;\n  }\n"])));
+var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  & ::-ms-reveal {\n    display: none;\n  }\n"])), function (props) {
+  return props.size == "fillParent" && "width: 100%;";
+});
 var _default = exports["default"] = DxcPasswordInput;

package/password-input/PasswordInput.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import DxcPasswordInput from "./PasswordInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Password Input",
@@ -81,6 +82,14 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcPasswordInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcPasswordInput label="fillParent" size="fillParent" />
+        <DxcPasswordInput label="medium" size="medium" />
+        <DxcPasswordInput label="large" size="large" />
+      </DxcFlex>
+    </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 = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Password input component tests", function () {
   test("Password input renders with label and helper text", function () {
@@ -173,21 +172,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

@@ -15,7 +15,7 @@ var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 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,
@@ -43,8 +43,7 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
     overlay: overlay,
     margin: margin
   }, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
-    overlay: overlay,
-    "aria-label": label || undefined
+    overlay: overlay
   }, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
     overlay: overlay,
     showValue: showValue,
@@ -52,7 +51,10 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
   }, 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, {
     variant: value === null || value === undefined ? "indeterminate" : "determinate",
     container: "first",

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);
+  })));
+});