carbon-react 142.11.6 → 142.11.8

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/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/flat-table/__internal__/build-position-map.js

@@ -5,6 +5,8 @@ export default ((array, propertyName) => array.reduce((acc, _, index) => {
       acc[currentId] = 0;
     } else {
       const previousId = array[index - 1].getAttribute("id");
+
+      /* istanbul ignore else */
       if (previousId) {
         acc[currentId] = acc[previousId] + array[index - 1][propertyName];
       }

package/esm/components/flat-table/flat-table-row/flat-table-row.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
 import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
-export interface FlatTableRowProps {
+export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
     /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -29,6 +29,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   draggable,
   findItem,
   moveItem,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }, ref) => {
   const internalId = useRef(id ? String(id) : guid());
@@ -158,12 +160,17 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     };
   }, [addRow, removeRow]);
   const isFirstSubRow = firstRowId === internalId.current;
+  const getDataElement = () => {
+    if (dataElement) return dataElement;
+    return isSubRow ? "flat-table-sub-row" : "flat-table-row";
+  };
   const rowComponent = () => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
     isFirstSubRow: isFirstSubRow,
-    "data-element": isSubRow ? "flat-table-sub-row" : "flat-table-row",
+    "data-element": getDataElement(),
+    "data-role": dataRole,
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
@@ -183,7 +190,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     "data-selected": selected && expandableArea === "wholeRow",
     "data-highlighted": highlighted && expandableArea === "wholeRow",
     rowHeight: rowRef?.current?.offsetHeight
-  }, interactiveRowProps, rest), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
+  }, interactiveRowProps, rest, {
+    "data-component": "flat-table-row"
+  }), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
     value: {
       firstCellId,
       expandable,
@@ -208,6 +217,8 @@ if (process.env.NODE_ENV !== "production") {
   FlatTableRow.propTypes = {
     "bgColor": PropTypes.string,
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "draggable": PropTypes.bool,
     "expandable": PropTypes.bool,
     "expandableArea": PropTypes.oneOf(["firstColumn", "wholeRow"]),

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -233,7 +233,8 @@ const StyledFlatTableRow = styled.tr`
                 border: none;
               }
             `}
-            ${!theme.focusRedesignOptOut && css`
+            ${!theme.focusRedesignOptOut && /* istanbul ignore next */
+  css`
               position: -webkit-sticky;
               :after {
                 border: none;

package/esm/components/flat-table/flat-table.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-export interface FlatTableProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
     /** A string to render as the table's caption */

package/esm/components/flat-table/flat-table.component.js

@@ -108,6 +108,8 @@ export const FlatTable = ({
       } else {
         // it may be that an element within the row currently has focus
         const index = findParentIndexOfFocusedChild(focusableElementsArray);
+
+        /* istanbul ignore else */
         if (index !== -1 && index < focusableElementsArray.length) {
           focusableElementsArray[index + 1]?.focus();
         }
@@ -135,7 +137,6 @@ export const FlatTable = ({
   };
   return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
-    "data-component": "flat-table-wrapper",
     "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -160,7 +161,9 @@ export const FlatTable = ({
     lastColRowSpanIndex: lastColRowSpanIndex,
     onKeyDown: handleKeyDown,
     isFocused: focused
-  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+  }, rest, {
+    "data-component": "flat-table-wrapper"
+  }), /*#__PURE__*/React.createElement(StyledTableContainer, {
     ref: container,
     onFocus: () => {
       if (container.current === document.activeElement) {
@@ -170,7 +173,8 @@ export const FlatTable = ({
     onBlur: () => setFocused(false),
     tabIndex: 0,
     overflowX: overflowX,
-    width: width
+    width: width,
+    "data-role": "flat-table-container"
   }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
     ref: tableRef,
     "data-component": "flat-table"
@@ -181,7 +185,8 @@ export const FlatTable = ({
       getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter
+    hasStickyFooter: hasStickyFooter,
+    "data-role": "flat-table-footer"
   }, footer));
 };
 FlatTable.displayName = "FlatTable";

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/components/textarea/textarea.component.js

@@ -116,7 +116,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
         scrollElement = scrollElement?.parentElement || null;
       }
       const scrollPosition = scrollElement?.scrollTop;
-      textarea.style.height = "0px";
+
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {

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/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/flat-table/__internal__/build-position-map.js

@@ -11,6 +11,8 @@ var _default = (array, propertyName) => array.reduce((acc, _, index) => {
       acc[currentId] = 0;
     } else {
       const previousId = array[index - 1].getAttribute("id");
+
+      /* istanbul ignore else */
       if (previousId) {
         acc[currentId] = acc[previousId] + array[index - 1][propertyName];
       }

package/lib/components/flat-table/flat-table-row/flat-table-row.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
 import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
-export interface FlatTableRowProps {
+export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
     /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -38,6 +38,8 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
   draggable,
   findItem,
   moveItem,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }, ref) => {
   const internalId = (0, _react.useRef)(id ? String(id) : (0, _guid.default)());
@@ -167,12 +169,17 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
     };
   }, [addRow, removeRow]);
   const isFirstSubRow = firstRowId === internalId.current;
+  const getDataElement = () => {
+    if (dataElement) return dataElement;
+    return isSubRow ? "flat-table-sub-row" : "flat-table-row";
+  };
   const rowComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
     isFirstSubRow: isFirstSubRow,
-    "data-element": isSubRow ? "flat-table-sub-row" : "flat-table-row",
+    "data-element": getDataElement(),
+    "data-role": dataRole,
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
@@ -192,7 +199,9 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
     "data-selected": selected && expandableArea === "wholeRow",
     "data-highlighted": highlighted && expandableArea === "wholeRow",
     rowHeight: rowRef?.current?.offsetHeight
-  }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRow2.default.Provider, {
+  }, interactiveRowProps, rest, {
+    "data-component": "flat-table-row"
+  }), /*#__PURE__*/_react.default.createElement(_flatTableRow2.default.Provider, {
     value: {
       firstCellId,
       expandable,
@@ -217,6 +226,8 @@ if (process.env.NODE_ENV !== "production") {
   FlatTableRow.propTypes = {
     "bgColor": _propTypes.default.string,
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "draggable": _propTypes.default.bool,
     "expandable": _propTypes.default.bool,
     "expandableArea": _propTypes.default.oneOf(["firstColumn", "wholeRow"]),

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -242,7 +242,8 @@ const StyledFlatTableRow = _styledComponents.default.tr`
                 border: none;
               }
             `}
-            ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+            ${!theme.focusRedesignOptOut && /* istanbul ignore next */
+  (0, _styledComponents.css)`
               position: -webkit-sticky;
               :after {
                 border: none;

package/lib/components/flat-table/flat-table.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-export interface FlatTableProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
     /** A string to render as the table's caption */

package/lib/components/flat-table/flat-table.component.js

@@ -117,6 +117,8 @@ const FlatTable = ({
       } else {
         // it may be that an element within the row currently has focus
         const index = findParentIndexOfFocusedChild(focusableElementsArray);
+
+        /* istanbul ignore else */
         if (index !== -1 && index < focusableElementsArray.length) {
           focusableElementsArray[index + 1]?.focus();
         }
@@ -144,7 +146,6 @@ const FlatTable = ({
   };
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
-    "data-component": "flat-table-wrapper",
     "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -169,7 +170,9 @@ const FlatTable = ({
     lastColRowSpanIndex: lastColRowSpanIndex,
     onKeyDown: handleKeyDown,
     isFocused: focused
-  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
+  }, rest, {
+    "data-component": "flat-table-wrapper"
+  }), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
     ref: container,
     onFocus: () => {
       if (container.current === document.activeElement) {
@@ -179,7 +182,8 @@ const FlatTable = ({
     onBlur: () => setFocused(false),
     tabIndex: 0,
     overflowX: overflowX,
-    width: width
+    width: width,
+    "data-role": "flat-table-container"
   }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
     ref: tableRef,
     "data-component": "flat-table"
@@ -190,7 +194,8 @@ const FlatTable = ({
       getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter
+    hasStickyFooter: hasStickyFooter,
+    "data-role": "flat-table-footer"
   }, footer));
 };
 exports.FlatTable = FlatTable;

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/components/textarea/textarea.component.js

@@ -125,7 +125,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
         scrollElement = scrollElement?.parentElement || null;
       }
       const scrollPosition = scrollElement?.scrollTop;
-      textarea.style.height = "0px";
+
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {

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.6",
+  "version": "142.11.8",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",