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

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,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,5 +1,5 @@
 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";

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

package/radio-group/RadioGroup.js

@@ -11,13 +11,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 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 _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _Radio = _interopRequireDefault(require("./Radio"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _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 getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
   var initialSelectedOptionIndex = innerOptions.findIndex(function (option) {
     return option.value === value;
@@ -46,19 +45,17 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     error = _ref.error,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("radio-group-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    radioGroupId = _useState2[0];
+  var radioGroupId = "radio-group-".concat((0, _react.useId)());
   var radioGroupLabelId = "label-".concat(radioGroupId);
   var errorId = "error-".concat(radioGroupId);
-  var _useState3 = (0, _react.useState)(defaultValue),
+  var _useState = (0, _react.useState)(defaultValue),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerValue = _useState4[0],
-    setInnerValue = _useState4[1];
-  var _useState5 = (0, _react.useState)(true),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    firstTimeFocus = _useState6[0],
-    setFirstTimeFocus = _useState6[1];
+    firstTimeFocus = _useState4[0],
+    setFirstTimeFocus = _useState4[1];
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var innerOptions = (0, _react.useMemo)(function () {
@@ -68,10 +65,10 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled: disabled
     }]) : options;
   }, [optional, options, optionalItemLabel, translatedLabels]);
-  var _useState7 = (0, _react.useState)(getInitialFocusIndex(innerOptions, value !== null && value !== void 0 ? value : innerValue)),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    currentFocusIndex = _useState8[0],
-    setCurrentFocusIndex = _useState8[1];
+  var _useState5 = (0, _react.useState)(getInitialFocusIndex(innerOptions, value !== null && value !== void 0 ? value : innerValue)),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentFocusIndex = _useState6[0],
+    setCurrentFocusIndex = _useState6[1];
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
     if (newValue !== currentValue && !readOnly) {
@@ -182,6 +179,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     });
   })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
+    role: "alert",
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });

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

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