From 3c5541a7058fba0e4a264f7d2e01a7e21ea41a0d Mon Sep 17 00:00:00 2001
From: Ghassan Maslamani <ghassan.maslamani@gmail.com>
Date: Fri, 19 Jul 2024 12:03:06 +0200
Subject: [PATCH] squash: use labelledby and describy for advance settings

---
 src/advanced-settings/AdvancedSettings.jsx |  6 ++++--
 src/generic/alert-message/index.jsx        | 12 +++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx
index 792386e0c3..4c54fe3de8 100644
--- a/src/advanced-settings/AdvancedSettings.jsx
+++ b/src/advanced-settings/AdvancedSettings.jsx
@@ -242,8 +242,8 @@ const AdvancedSettings = ({ intl, courseId }) => {
         <AlertMessage
           show={saveSettingsPrompt}
           aria-hidden={saveSettingsPrompt}
-          aria-label={intl.formatMessage(messages.alertWarning)}
-          aria-description={intl.formatMessage(messages.alertWarningDescriptions)}
+          aria-labelledby="advancedSettingsAlertWarningTitle"
+          aria-describedby="advancedSettingsAlertWarningDesc"
           role="dialog"
           actions={[
             !isQueryPending && (
@@ -261,7 +261,9 @@ const AdvancedSettings = ({ intl, courseId }) => {
           variant="warning"
           icon={Warning}
           title={intl.formatMessage(messages.alertWarning)}
+          titleId="advancedSettingsAlertWarningTitle"
           description={intl.formatMessage(messages.alertWarningDescriptions)}
+          descriptoinId="advancedSettingsAlertWarningDesc"
         />
       </div>
       <ModalError
diff --git a/src/generic/alert-message/index.jsx b/src/generic/alert-message/index.jsx
index 41efb771d4..fae952256c 100644
--- a/src/generic/alert-message/index.jsx
+++ b/src/generic/alert-message/index.jsx
@@ -2,21 +2,27 @@ import React from 'react';
 import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-const AlertMessage = ({ title, description, ...props }) => (
+const AlertMessage = ({
+  title, titleId, description, descriptoinId, ...props
+}) => (
   <Alert {...props}>
-    <Alert.Heading>{title}</Alert.Heading>
-    <span>{description}</span>
+    <Alert.Heading id={titleId}>{title}</Alert.Heading>
+    <span id={descriptoinId}>{description}</span>
   </Alert>
 );
 
 AlertMessage.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleId: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  descriptoinId: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 AlertMessage.defaultProps = {
   title: undefined,
+  titleId: undefined,
   description: undefined,
+  descriptoinId: undefined,
 };
 
 export default AlertMessage;