carbon-react 104.3.0 → 104.4.0

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

@@ -1,6 +1,9 @@
 export default Confirm;
-declare function Confirm({ open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
+declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
     [x: string]: any;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+    "aria-label": any;
     open: any;
     children: any;
     destructive: any;

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

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -27,11 +29,18 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 let deprecatedWarnTriggered = false;
 
 const Confirm = ({
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   open,
   children,
   destructive,
@@ -62,6 +71,25 @@ const Confirm = ({
   }
 
   const l = (0, _useLocale.default)();
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const ariaProps = {
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel
+  };
+
+  if (title && iconType) {
+    ariaProps["aria-labelledby"] = titleId;
+  }
+
+  if (subtitle && iconType) {
+    ariaProps["aria-describedby"] = subtitleId;
+  }
 
   const renderCancelButton = () => {
     if (!onCancel) return null;
@@ -100,9 +128,9 @@ const Confirm = ({
         fontSize: "medium"
       }), /*#__PURE__*/_react.default.createElement(_heading.default, {
         title: title,
-        titleId: "carbon-dialog-title",
+        titleId: titleId,
         subheader: subtitle,
-        subtitleId: "carbon-dialog-subtitle",
+        subtitleId: subtitleId,
         divider: false
       }));
     }
@@ -118,7 +146,7 @@ const Confirm = ({
     title: getTitle(),
     "data-component": "confirm",
     role: "alertdialog"
-  }, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
+  }, ariaProps, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 
 Confirm.defaultProps = {

package/lib/components/dialog/dialog.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -58,6 +60,12 @@ const Dialog = ({
   const innerContentRef = (0, _react.useRef)();
   const titleRef = (0, _react.useRef)();
   const listenersAdded = (0, _react.useRef)(false);
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
   const centerDialog = (0, _react.useCallback)(() => {
     const {
       width: dialogWidth,
@@ -133,9 +141,9 @@ const Dialog = ({
     }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
       "data-element": "dialog-title",
       title: title,
-      titleId: "carbon-dialog-title",
+      titleId: titleId,
       subheader: subtitle,
-      subtitleId: "carbon-dialog-subtitle",
+      subtitleId: subtitleId,
       divider: false,
       help: help
     }) : title);
@@ -150,15 +158,10 @@ const Dialog = ({
   const dialogProps = {
     size,
     dialogHeight,
-    "aria-labelledby": rest["aria-labelledby"],
-    "aria-describedby": subtitle ? "carbon-dialog-subtitle" : rest["aria-describedby"],
+    "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
+    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
-
-  if (title && typeof title === "string") {
-    dialogProps["aria-labelledby"] = "carbon-dialog-title";
-  }
-
   const componentTags = {
     "data-component": rest["data-component"] || "dialog",
     "data-element": rest["data-element"],

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -51,11 +53,17 @@ const DialogFullScreen = ({
   onCancel,
   contentRef,
   help,
-  role = "region",
+  role = "dialog",
   ...rest
 }) => {
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -74,13 +82,18 @@ const DialogFullScreen = ({
   }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
     "data-element": "dialog-title",
     title: title,
-    titleId: "carbon-dialog-title",
+    titleId: titleId,
     subheader: subtitle,
-    subtitleId: "carbon-dialog-subtitle",
+    subtitleId: subtitleId,
     divider: false,
     help: help
   }) : title, headerChildren);
 
+  const ariaProps = {
+    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
+    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-label": ariaLabel
+  };
   const componentTags = {
     "data-component": "dialog-full-screen",
     "data-element": rest["data-element"],
@@ -94,16 +107,14 @@ const DialogFullScreen = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef
-  }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, {
-    "aria-modal": true,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy || "carbon-dialog-title",
+  }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
+    "aria-modal": true
+  }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",
     pagesStyling: pagesStyling,
     role: role
-  }, dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
+  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.3.0",
+  "version": "104.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {