carbon-react 147.6.0 → 147.7.0

package/esm/components/confirm/confirm.component.js

@@ -85,6 +85,7 @@ export const Confirm = ({
     "data-element": "confirm",
     ...confirmButtonDataProps
   })), isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
+    "data-role": "confirm-loader",
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

package/esm/components/loader/loader.component.d.ts

@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
 export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
     /** Toggle between the default variant and gradient variant */
     variant?: string;
-    /** Specify a custom accessible name for the Loader component */
+    /**
+     * Specify a custom accessible name for the Loader component
+     * @deprecated - use `loaderLabel` prop instead
+     */
     "aria-label"?: string;
+    /**
+     * Specify a custom accessible label for the Loader.
+     * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
+     */
+    loaderLabel?: string;
 }
-export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/esm/components/loader/loader.component.js

@@ -7,14 +7,22 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledLoader from "./loader.style";
 import StyledLoaderSquare from "./loader-square.style";
+import Typography from "../typography";
+import Logger from "../../__internal__/utils/logger";
+let deprecateAriaLabelWarnTriggered = false;
 export const Loader = ({
   variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
   isActive = true,
+  loaderLabel,
   ...rest
 }) => {
+  if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
+    deprecateAriaLabelWarnTriggered = true;
+    Logger.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
+  }
   const l = useLocale();
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const loaderSquareProps = {
@@ -25,13 +33,14 @@ export const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({
-    "aria-label": ariaLabel || l.loader.loading(),
-    role: "progressbar"
-  }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
+  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
-  }, loaderSquareProps)))));
+  }, loaderSquareProps))), /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderLabel || ariaLabel || l.loader.loading())));
 };
 export default Loader;

package/esm/components/select/__internal__/select-list/select-list.component.js

@@ -405,7 +405,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
+  }, /*#__PURE__*/React.createElement(Loader, {
+    "data-role": "select-list-loader"
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",

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

@@ -49,7 +49,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, _extends({
+    "data-role": "switch-slider-loader"
+  }, loaderProps)) : panelContent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
     size: size,
     "aria-hidden": true

package/lib/components/confirm/confirm.component.js

@@ -94,6 +94,7 @@ const Confirm = ({
     "data-element": "confirm",
     ...confirmButtonDataProps
   })), isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": "confirm-loader",
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

package/lib/components/loader/loader.component.d.ts

@@ -5,8 +5,16 @@ import { StyledLoaderSquareProps } from "./loader-square.style";
 export interface LoaderProps extends Omit<StyledLoaderSquareProps, "backgroundColor">, MarginProps, TagProps {
     /** Toggle between the default variant and gradient variant */
     variant?: string;
-    /** Specify a custom accessible name for the Loader component */
+    /**
+     * Specify a custom accessible name for the Loader component
+     * @deprecated - use `loaderLabel` prop instead
+     */
     "aria-label"?: string;
+    /**
+     * Specify a custom accessible label for the Loader.
+     * This label is visible to users who have enabled the reduce motion setting in their operating system. It is also available to assistive technologies.
+     */
+    loaderLabel?: string;
 }
-export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, ...rest }: LoaderProps) => React.JSX.Element;
+export declare const Loader: ({ variant, "aria-label": ariaLabel, size, isInsideButton, isActive, loaderLabel, ...rest }: LoaderProps) => React.JSX.Element;
 export default Loader;

package/lib/components/loader/loader.component.js

@@ -12,16 +12,24 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _loader = _interopRequireDefault(require("./loader.style"));
 var _loaderSquare = _interopRequireDefault(require("./loader-square.style"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateAriaLabelWarnTriggered = false;
 const Loader = ({
   variant = "default",
   "aria-label": ariaLabel,
   size = "medium",
   isInsideButton,
   isActive = true,
+  loaderLabel,
   ...rest
 }) => {
+  if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
+    deprecateAriaLabelWarnTriggered = true;
+    _logger.default.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
+  }
   const l = (0, _useLocale.default)();
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const loaderSquareProps = {
@@ -32,14 +40,15 @@ const Loader = ({
   };
 
   // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
-    "aria-label": ariaLabel || l.loader.loading(),
-    role: "progressbar"
-  }, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, (0, _tags.default)("loader", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), reduceMotion ? loaderLabel || ariaLabel || l.loader.loading() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/_react.default.createElement(_loaderSquare.default, _extends({
     "data-role": "loader-square",
     key: color,
     backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
-  }, loaderSquareProps)))));
+  }, loaderSquareProps))), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderLabel || ariaLabel || l.loader.loading())));
 };
 exports.Loader = Loader;
 var _default = exports.default = Loader;

package/lib/components/select/__internal__/select-list/select-list.component.js

@@ -414,7 +414,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }, [setPlacement]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": "select-list-loader"
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",

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

@@ -56,7 +56,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, loaderProps) : panelContent);
+  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+    "data-role": "switch-slider-loader"
+  }, loaderProps)) : panelContent);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {
     size: size,
     "aria-hidden": true

package/package.json

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