[terra-abstract-modal] Customise Modal span text (#2160)

cerner · May 14, 2024 · 2eed005 · 2eed005
1 parent 7fbc549
commit 2eed005
Show file tree

Hide file tree

Showing 28 changed files with 1,273 additions and 1,794 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/terra-abstract-modal/CHANGELOG.md b/packages/terra-abstract-modal/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Changes to announce title of modal.
+
 ## 3.49.0 - (March 8, 2024)
 
 * Changes

diff --git a/packages/terra-abstract-modal/src/_ModalContent.jsx b/packages/terra-abstract-modal/src/_ModalContent.jsx
@@ -143,6 +143,8 @@ const ModalContent = forwardRef((props, ref) => {
   // Delete the closePortal prop that comes from react-portal.
   delete customProps.closePortal;
   delete customProps.fallbackFocus;
+  const beginLabelId = ariaLabel === 'Modal' ? 'Terra.AbstractModal.BeginModalDialog' : 'Terra.AbstractModal.BeginModalDialogTitle';
+  const endLabelId = ariaLabel === 'Modal' ? 'Terra.AbstractModal.EndModalDialog' : 'Terra.AbstractModal.EndModalDialogTitle';
 
   const modalContent = (
     <div
@@ -156,7 +158,7 @@ const ModalContent = forwardRef((props, ref) => {
     >
       <div className={modalContainerClassName} ref={setModalFocusElementRef} data-terra-abstract-modal-begin tabIndex="-1">
         {(!isCalledFromNotificationDialog) && (
-        <FormattedMessage id="Terra.AbstractModal.BeginModalDialog">
+        <FormattedMessage id={beginLabelId} values={{ title: ariaLabel }}>
           {text => {
             // In the latest version of react-intl this param is an array, when previous versions it was a string.
             let useText = text;
@@ -171,7 +173,7 @@ const ModalContent = forwardRef((props, ref) => {
         )}
         {children}
         {(!isCalledFromNotificationDialog) && (
-        <FormattedMessage id="Terra.AbstractModal.EndModalDialog">
+        <FormattedMessage id={endLabelId} values={{ title: ariaLabel }}>
           {text => {
             // In the latest version of react-intl this param is an array, when previous versions it was a string.
             let useText = text;