carbon-react 142.11.5 → 142.11.7

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -106,7 +106,9 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     reverse: reverse
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({}, formFieldProps, {
     my: 0
-  }), /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
+  }), /*#__PURE__*/React.createElement(StyledCheckableInput, {
+    "data-role": "checkable-input"
+  }, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
 });
 if (process.env.NODE_ENV !== "production") {
   CheckableInput.propTypes = {

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+export default rootTagTest;

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,14 +1,6 @@
-export const elementsTagTest = (wrapper, elements) => {
-  elements.forEach(element => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({
-        "data-element": element
-      }).length).toEqual(1);
-    });
-  });
-};
-export const rootTagTest = (rootNode, comp, elem, role) => {
+const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
-};
+};
+export default rootTagTest;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -10,7 +10,8 @@ const ValidationMessage = ({
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
     id: validationId,
-    isWarning: !!(!error && warning)
+    isWarning: !!(!error && warning),
+    "data-role": "validation-message"
   }, validation) : null;
 };
 export default ValidationMessage;

package/esm/components/accordion/accordion.component.js

@@ -79,6 +79,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
+    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     scheme: scheme,
@@ -125,10 +126,12 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
   })), /*#__PURE__*/React.createElement(StyledAccordionContentContainer, {
     isExpanded: isExpanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "accordion-content-container"
   }, /*#__PURE__*/React.createElement(StyledAccordionContent, {
     role: "region",
     "data-element": "accordion-content",
+    "data-role": "accordion-content",
     id: contentId,
     "aria-labelledby": headerId,
     ref: accordionContent,

package/esm/components/content/content.component.js

@@ -21,12 +21,14 @@ export const Content = ({
     variant: variant,
     inline: inline,
     "data-element": "content-title",
+    "data-role": "content-title",
     titleWidth: titleWidth,
     align: align
   }, title), /*#__PURE__*/React.createElement(StyledContentBody, {
     variant: variant,
     inline: inline,
     "data-element": "content-body",
+    "data-role": "content-body",
     bodyFullWidth: bodyFullWidth,
     titleWidth: titleWidth,
     align: align

package/esm/components/date/date.component.js

@@ -10,7 +10,6 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/__internal__/date-range.context";
-import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 const DateInput = /*#__PURE__*/React.forwardRef(({
@@ -48,6 +47,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
+  const blockClose = useRef(false);
   const locale = useLocale();
   const {
     dateFnsLocale
@@ -89,17 +89,30 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  useEffect(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -165,7 +178,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -200,7 +215,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -209,9 +224,13 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -220,7 +239,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = useCallback(inputElement => {
     internalInputRef.current = inputElement;

package/esm/components/detail/detail.component.js

@@ -20,6 +20,7 @@ export const Detail = ({
   hasIcon: !!icon
 }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
   "data-element": "footnote",
+  "data-role": "footnote",
   hasIcon: !!icon
 }, footnote));
 Detail.displayName = "Detail";

package/esm/components/switch/__internal__/switch-slider.component.js

@@ -44,12 +44,15 @@ const SwitchSlider = ({
     isActive: checked,
     size
   };
-  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, sliderPanelStyleProps, loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
+  const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
+    "data-role": "slider-panel"
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
     size: size,
     "aria-hidden": true
   }, longestText), /*#__PURE__*/React.createElement(StyledSwitchSlider, _extends({
-    "data-component": "slider"
+    "data-component": "slider",
+    "data-role": "slider"
   }, switchSliderStyleProps), sliderContent, useValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
     error: error,
     warning: warning,

package/esm/components/switch/switch.component.js

@@ -58,6 +58,8 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   }, [setCheckedInternal, onChange]);
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
+  // Coverage has been ignored here as this functionality is covered in a Playwright test.
+  /* istanbul ignore next */
   if (adaptiveLabelBreakpoint) {
     shouldLabelBeInline = largeScreen;
   }
@@ -152,13 +154,17 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   };
   const applyValidation = error || warning;
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Box, {
+    "data-role": "hint-text-wrapper",
     mb: labelHelp ? 0 : 1
-  }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp)), /*#__PURE__*/React.createElement(Box, {
+  }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+    "data-role": "hint-text"
+  }, labelHelp)), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
     warning: warning
   }), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
+    "data-role": "error-border",
     warning: !!(!error && warning)
   }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,

package/esm/locales/fr-fr.js

@@ -87,13 +87,13 @@ const frFR = {
     skipLinkLabel: () => "Passer au contenu principal"
   },
   loader: {
-    loading: () => "Téléhargement"
+    loading: () => "Chargement en cours"
   },
   loaderSpinner: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   loaderStar: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   menuFullscreen: {
     ariaLabels: {

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -115,7 +115,9 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     reverse: reverse
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, formFieldProps, {
     my: 0
-  }), /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, null, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
+  }), /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, {
+    "data-role": "checkable-input"
+  }, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
 });
 if (process.env.NODE_ENV !== "production") {
   CheckableInput.propTypes = {

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -3,16 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "elementsTagTest", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _tagsSpecs.elementsTagTest;
+    return _tagsSpecs.default;
   }
 });
-Object.defineProperty(exports, "rootTagTest", {
-  enumerable: true,
-  get: function () {
-    return _tagsSpecs.rootTagTest;
-  }
-});
-var _tagsSpecs = require("./tags-specs");
+var _tagsSpecs = _interopRequireDefault(require("./tags-specs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +1,3 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-export declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
-export declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
+export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -3,20 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootTagTest = exports.elementsTagTest = void 0;
-const elementsTagTest = (wrapper, elements) => {
-  elements.forEach(element => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({
-        "data-element": element
-      }).length).toEqual(1);
-    });
-  });
-};
-exports.elementsTagTest = elementsTagTest;
+exports.default = void 0;
 const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-exports.rootTagTest = rootTagTest;
+var _default = exports.default = rootTagTest;

package/lib/__internal__/validation-message/validation-message.component.js

@@ -17,7 +17,8 @@ const ValidationMessage = ({
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     id: validationId,
-    isWarning: !!(!error && warning)
+    isWarning: !!(!error && warning),
+    "data-role": "validation-message"
   }, validation) : null;
 };
 var _default = exports.default = ValidationMessage;

package/lib/components/accordion/accordion.component.js

@@ -88,6 +88,7 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
+    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     scheme: scheme,
@@ -134,10 +135,12 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left")
   })), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
     isExpanded: isExpanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "accordion-content-container"
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContent, {
     role: "region",
     "data-element": "accordion-content",
+    "data-role": "accordion-content",
     id: contentId,
     "aria-labelledby": headerId,
     ref: accordionContent,

package/lib/components/content/content.component.js

@@ -28,12 +28,14 @@ const Content = ({
     variant: variant,
     inline: inline,
     "data-element": "content-title",
+    "data-role": "content-title",
     titleWidth: titleWidth,
     align: align
   }, title), /*#__PURE__*/_react.default.createElement(_content.StyledContentBody, {
     variant: variant,
     inline: inline,
     "data-element": "content-body",
+    "data-role": "content-body",
     bodyFullWidth: bodyFullWidth,
     titleWidth: titleWidth,
     align: align

package/lib/components/date/date.component.js

@@ -15,7 +15,6 @@ var _date = _interopRequireDefault(require("./date.style"));
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
-var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,6 +56,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
+  const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale
@@ -98,17 +98,30 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  (0, _react.useEffect)(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -174,7 +187,9 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -209,7 +224,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -218,9 +233,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -229,7 +248,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = (0, _react.useCallback)(inputElement => {
     internalInputRef.current = inputElement;

package/lib/components/detail/detail.component.js

@@ -27,6 +27,7 @@ const Detail = ({
   hasIcon: !!icon
 }, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
   "data-element": "footnote",
+  "data-role": "footnote",
   hasIcon: !!icon
 }, footnote));
 exports.Detail = Detail;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -51,12 +51,15 @@ const SwitchSlider = ({
     isActive: checked,
     size
   };
-  const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, sliderPanelStyleProps, loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
+  const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
+    "data-role": "slider-panel"
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {
     size: size,
     "aria-hidden": true
   }, longestText), /*#__PURE__*/_react.default.createElement(_switchSlider.StyledSwitchSlider, _extends({
-    "data-component": "slider"
+    "data-component": "slider",
+    "data-role": "slider"
   }, switchSliderStyleProps), sliderContent, useValidationIcon && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     error: error,
     warning: warning,

package/lib/components/switch/switch.component.js

@@ -67,6 +67,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   }, [setCheckedInternal, onChange]);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
+  // Coverage has been ignored here as this functionality is covered in a Playwright test.
+  /* istanbul ignore next */
   if (adaptiveLabelBreakpoint) {
     shouldLabelBeInline = largeScreen;
   }
@@ -161,13 +163,17 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   };
   const applyValidation = error || warning;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "hint-text-wrapper",
     mb: labelHelp ? 0 : 1
-  }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
+    "data-role": "hint-text"
+  }, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning
   }), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
+    "data-role": "error-border",
     warning: !!(!error && warning)
   }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,

package/lib/locales/fr-fr.js

@@ -94,13 +94,13 @@ const frFR = {
     skipLinkLabel: () => "Passer au contenu principal"
   },
   loader: {
-    loading: () => "Téléhargement"
+    loading: () => "Chargement en cours"
   },
   loaderSpinner: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   loaderStar: {
-    loading: () => "Téléhargement..."
+    loading: () => "Chargement en cours..."
   },
   menuFullscreen: {
     ariaLabels: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.11.5",
+  "version": "142.11.7",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",